나만의공간

1일 차 (종이책p.67~100)

3.3기본문법 다루기-1

3.1 뷰 애플리케이션의 기본구조 

특히 중요한 역할을 파일은 package.json , index.html , main.js , App.vue 이다

package.json 

뷰 애플리케이션에서 가장 중심이 되는 파일임

기본 정보, 의존성 모듈 정보 , 스크립트 명령어 정보등을 담고 있음

name : 애플리케이션을 명확히 구분할 수 있도록 직관적인 이름으로 작성해야함

version : 버전을 나타내는 문자열, 여기서 0,0,0 은 [major]. [minor].[patch] 버전을 의미함

             major 는 하위 호환성이 없는 변경 사항이 있을대 증가

             minor 는 하위 호환성이 있는 기능을 추가하거나 변경 사항이 있을 때 증가 

             patch 는 버그나 작은 수정 사항이 있을 때 증가 

private : 뷰 애플리케이션의 공개여부

scripts : 뷰 애플리케이션을 빌드하거나 실행할 수 있는 명령어를 등록하는 부분

dependencies : 뷰 애플리케이션을 실행 할 때 필요한 의존성 모듈을 정의 하는 부분 

여기에 정의한 모듈은 프로덕션 (production,애플리케이션을 배포하고 서비스하는 단계)

devDependencies : 뷰 애플리케이션을 개발할 때 필요한 의존성 모듈을 정의 하는 부분

여기서 등록한 모듈은 개발 (development, 애플리케이션을 개발하는 단계 )

터미널
npm run dev

• 이 명령어가 실행될 수 있는 근거는 scripts 부분에 정의된 명령어에 있음
• scripts 부분에 dev 속성이 있어서 해당 명령어가 실행됨
• dev 속성에 "vite" 값 때문에 vite 라이브러리를 실행해 개발 서버가 구동됨

npm install [페키지명] [--save | --save-dev]

• 이 명령어로 설치되는 패키지는 dependencies 나 devDependencies 에 의존성으로 등록됨
• --save 옵션을 주면 dependencies 에 설치 
• --save dev 옵션을 주면  devDependencies  에 설치
• 아무 옵션 없으면 --save 설치

index.html

npm run dev 명령어를 입력하면 개발 서버가 구동됨

개발서버가 구동되면 가장 먼저 index.html 파일을 서버에 로드(load) 함

1. 기본 언어 설정은 ko 

2. <div id ="app"></div> id 속성의 값이 "app"인 HTML 요소를 루트(root) 요소로 지정

3.<script type="module" src = "/src/main.js></script> 뷰 애플리케이션의 핵심인 main.js 모듈을 불러오는 부분

main.js

index.html 파일에서 main.js 파일을 불러오면 뷰 애플리케이션의 코드가 실행됨

main.js 파일은 뷰 애플리케이션을 초기화하고 구성하는 역할을 함 

1.  main.css 파일을 불러와서 컴포넌트에 스타일을 적용함
2.  veu 패키지에서 함수를 가져옴 . 모든 뷰 애플리케이션은 하나의 인스턴스를 가지는데 createApp() 함수가
   뷰 애플리케이션의 인스턴스를 생성하는 역할을 함
3. App.vue 파일을 불러옴 . 이 파일이 루트(root) 컴포넌트가 됨
4. createApp(App) 함수로 뷰 애플리케이션의 인스턴스를 생성함 

JavaScript에서 "인스턴스(instance)"란

클래스나 객체 생성자로부터 생성된 특정 객체를 의미합니다.

App.vue

• App.vue 파일처럼 확장자가 vue 인 파일을 뷰에서는 SFC ( single File Component)  다른말로 하면 컴포넌트 라고 함
• App.vue 파일은 뷰 애플리케이션에서 루트 컴포넌트 역할을함

루트 컴포넌트란 

컴포넌트 중에서도 뷰 애플리케이션이 최초로 진입하는 가장 상위에 있는 컴포넌트임

• SFC는 <script> , <template>, <style> 태그로 영역을 구분함 

3.2 뷰 애플리케이션 인스턴스

뷰 애플리케이션 인스턴스는 뷰 패키지의 구조와 기능을 뷰 애플리케이션에서 사용 할 수 있게 하는 진입점 역할을 함

인스턴스란

• 인스턴스는 객체지향 언어 대부분이 가지고 있는 프로그래밍 개념임
• 자바스크립트에서 인스턴스(instance) 는 클래스의 실체화된 객체를 의미함
• 클래스가 객체를 생성하기 위한 템플릿이라면 , 인스턴스는 해당 클래스의 실제 객체임

뷰에서 인스턴스를 생성하는 코드는 main.js 파일에 작성함

1. 뷰 패키지에서 createApp() 가져옴 . createApp() 함수는 뷰 패키지에 정의된 vue 클래스의 인스턴스를 생성하는 역할을 하는 함수임
2. createApp() 함수로 Vue 인스턴스를 생성하고 생성한 인스턴스를 mount() 함수로 HTML DOM 과 연결함
   뷰 패키지에 내장된 여러 기능과 구성 요소를 뷰 애플리케이션에서 사용할 수 있도록 생성한 인스턴스가 진입점 역할을함 

인스턴스의 구성요소

cd vue-project           = 터미널 경로 를 지정해주고
npm run dev

• 코드를 보면 객체에 data , methods , render 라는 3가지 속성이 있음
• 3가지 속성은 HTML 구조 , 데이터 , 함수 등을 객체 속성으로 설정함
• 이 속성들을 매개변수로 전달해 객체를 바탕으로 뷰 애플리케이션의 인스턴스를 생성함

이때 data , methods , render  와 같은 속성들을 인스턴스 구성요소라고 함

객체에 포함되는 구성 요소의 코드가 길어지면 가독성이 떨어지고 코드의 유지보수도 어려움

-> SFC라는 독자적인 파일 형식을 만듬

-> App.vue 가 SFC 파일임 . 뷰 애플리케이션 인스턴스의 설정 정보가 들어있음

인스턴스를 생성할 때 SFC 파일을 createApp() 함수의 매개변수로 전달하면 SFC 파일의 설정 정보를 가져와
인스턴스를 생성함 

-> 이 방법으로 작성한 코드가 main.js 파일임

SFC의 구조

SFC 는 뷰만의 특별한 파일형태로 , 확장자가 vue 인 단일 구성 요소임

단일 구성 요소는 하나의 파일에 인스턴스 구성 요소와 관련한 모든 코드가 포함되는 것을 의미함 

※ SFC 파일에 <template> 태그를 1개 이상 포함해야한다는점 기억하기

1. <script> 태그 영역
   뷰에서 객체를 작성할 때 지켜야 하는 문법 규칙을 옵션 API 라고 함 
2. <template> 태그 영역
   HTML 코드를 작성함
3. <style> 태그 영역
   css 스타일 적용

 뷰 애플리케이션 생성하기 

1. npm create vue@lastest
2. cd vue-project
3. npm install

옵션스 API 사용하기

• SFC 파일의 <script> 태그 영역에는 SFC 파일에서 사용할 로직 자바스크립트로 작성함
• 그중 하나가 SFC 파일의 기본 형식에서 언급한 옵션스 API 임
• 옵션스 API 는 export default 키워드로 내보내는 객체({})안에 여러 속성을 사용하는 형태임

컴포지션 API
컴포지션 API 도 SFC 파일의 <script> 태그 영역에 자바스크립트 코드를 작성하는 방법중 하나임

데이터 정의하기

• <script> 태그 영역에 로직을 작성할 때 가장 기본이 되는 개념은 데이터임
• 여기서 데이터는 컴포넌트 전반에 걸쳐서 사용하는 값
• 뷰에서는 data 옵션 속성을 사용함

data 옵션 속성에서 return 문으로 반환하는 객체에 정의된 속성이 SFC에서 사용할 수 있는 데이터 속성임

데이터 보간 사용하기p84

1. 상태관리와 SPA

상태 ( state ) 란?

값이 변하는 데이터 

state라고 불리는 상태는 웹 페이지 내에서 눈에 보이는 눈에 보이지 않는 모든 변화하는 데이터

※ 상태 관리란
데이터의 흐름을 편리하게 관리
상태를 효율적으로 변경
불필요한 리렌더링 발생 X 
사용자에게 좋은 경험 제공 (페이지 로딩시간)

"리렌더링"이란 상태가 변경될 때 컴포넌트가 다시 그려지는 과정

파일구조

• 상태관리는 웹페이지의 데이터 흐름을 효율적으로 관리하고 사용자 경험을 개선하는 데 필수적인 기술임
• 상태 관리를 사용하면 하나의 컴포넌트에서 변경사항이 발생한다면 해당 부분의 상태만 변경시킬 수 있기 때문에
• 기존 방식에 비해 성능을 향상하고 데이터를 관리하기 쉽게 만들어줌
• 상태관리를 통해 불필요한 리렌더링을 방지하고 웹 애플리케이션의  성능을 최적화할 수 있음

상태 관리 적용

기본적인 틀

• 자바스크립트 기반의 라이브러리인 React.js 와 비슷한 구조로 state와 setState를 사용해 컴포넌트의 상태를 관리함
• 상태 변화에 따라 웹 페이지를 업데이트하기 위해 rander라는 함수를 사용함
• React 에는 state와 setState와 같은 메서드들이 내장되어 있지만 바닐라 자바스크립에서는 내장되어 있지 않기 때문에  비슷한 기능을 구현하기 위해서는 직접 코드를 작성해야 함

2-2 동물 앨범 만들기

App.js 파일에서 TabBar  와 Content 컴포넌트의 상태를 관리하는 이유는 웹 애플리케이션의 복잡성을 줄이기 위함임

1. 제일먼저 this.state 객체를 사용해서 컴포넌트의 필요한 상태를 정의하고 초기화해야함
2.  웹페이지에서는 어떠한 버튼을 눌렀는지에 대한 데이터와 API 호출의 결과값 두 개의 데이터를 상태로 나타낼수 있음. this.state 내부의 두개의 데이터를 넣어야함

1. 현재 눌린 버튼의 값을 나타내는 currentTab 이라는 프로퍼트를 작성하고 전체를 나타내는 all 이라는 문자열로 초기화함
2. 다음 컨텐트 컴포넌트에 표시될 사진들의 데이터를  담기 위해 photos 라는 프로퍼티를 배열의 상태로 초기화함

1. 상태들을 업데이트 역할을 하는 this.setState 함수를 생성함
2. setState 함수의 매개변수로는 업데이트할 새로운값을 newState 라는 값으로 받고 함수의 내부에서는 매개변수로
   전달받은 값을 this.state 에 할당해 state 의 새로운 값으로 업데이트해 줌
   
   
3.  앱 컴포넌트에서는 이 상태가 업데이트 될 때마다 텝바와 컨텐츠 컴포넌트의 상태도 알맞게 업데이트 해주어야  함
   
   
4. 텝바 컴포넌트는 4개의 버튼들이 있는 컴포넌트이기 때문에 탭바 컴포넌트에 필요한 상태는 this.state 객체에 내부에 있는 currentTab 에 대한 값이고 컨텐츠 컴포넌트는 사진을 나타내는 기능의 컴포넌트이므로 컨텐츠 컴포넌트에 필요한 상태는 this.state 객체의 photos의 저장된 값이다. 
   
   
5. 각각의 인스턴스들이 갖고 있는 setState 메서드의 인수로 전달해줘야함 
6. 탭바 컴포넌트와 컨텐츠 컴포넌트도 setState  라는 함수를 가지고 있음
   이 값들을 currentTab 와 photos 라는 값을 각각의 인스턴스들이 갖고 있는 setState  메서드의 인수로 전달해주어야함.

1. 텝바의 setState 메서드의 인수로는 this.state 객체가 갖고 있는 currentTab 데이터를 전달해주고
   컨텐츠 컴포넌트의 setState 메서드의 this.state 의 photos라는 값을 전달해줌
2. 탭바 콤포넌트에 필요한 상태 및 기능들을 전달해야함
3.  탭바 컴포넌트는 4개의 버튼을 누르는 기능과 어떠한 버튼이 눌렸는지에 대한 상태가 필요함
   탭바 함수에는 초기 상태를 나타내는 initialState 라는 값과 버튼을 누르는 기능을 하는 onClick이라는 함수를 전달함

1. 탭바 함수에는 초기 상태를 나타내는 initialState 값과 버튼을 누르는 기능을 하는 onClick 함수를 전달함
2. 온클릭 함수는 버튼이 클릭될 때 실행되는 함수로 버튼을 누르면 CurrentTab이라는 상태를 눌린 버튼의 값으로 변경 시켜야함
3. 눌린 버튼의 상태에 맞는 API 를 호출해 알맞은 데이터를 가져와야함 

1. 눌린 버튼에 대한 값은 name 이라는 매개변수로 전달 받고 setState 를 통해 상태가 변경되었을 때 
   state에 정의 되어 있는 값들을 변경 시켜줘야함
2. spread 연산자를 사용해서 기존의 상태를 유지하고 this.state 객체에 있는 currentTab 에 대한 값으로는
   전달 받은 name을 넣어줌
3. 그 다음 photos 의 값으로는 api 를 통해 받아온 사진을 넣어주어야함

1. api 를 호출하기 위해 api 모듈을 import 해야함
2. api.js 파일로 이동하면 export 라는 키워드를 통해 해당 함수를  공개 처리해주었고 
   해당 함수를 request 로 해줌

1. 해당 모듈을 사용하기 위해 import 라는 키워드를 작성한 다음  {request}라는 함수를 중괄호 안에 
   작성해주면 사용가능함
2. onClick 함수가 실행 될때 photos 배열의 값을 request 함수의 결과 값으로 변경 시켜줌
3. API 는 비동기로 처리해야 하므로 request 함수의 앞에 await 키워드 작성 , onclick앞에 async 작성

1.  웹 페이지의 초기 상태 값을 설정해주는 init이라는 함수 추가함
2.  init 이라는 함수는 현재 this.stae 에서 currentTab 의 초기값은 임의로 설정해주었지만
   photos 라는 값에는 빈 배열이 담겨져 있음
3. 웹 애플리케이션을 시작할 때 필요한 작업을 실행하고 초기 상태를 설정하는 역할을 하는 함수인 init 함수 추가해야함
4. 웹 페이지의 초기 상태에서 필요한 데이터는 여기에서는 모든 동물의 사진임
5.  init 함수의 내부에서는 모든 사진들을 가져와야함 

1. API 를 호출해야 되기 때문에 try,catch 로 에러 처리를 해주고 try 문의 내부에서는 사진데이터의 초기값을 나타내는
   initialPhotos 라는 변수에 API 결과 값을 넣어주도록 해야함 
2. await 이라는 키워드를 사용해야하기 때문에 init 함수의 앞에는 async라는 키워드를 작성해줌
3. setState 의 내부에서 spread 연산자를 사용해 기존의 상태를 유지하면서 state  객체의 photos 라는 배열을 
   initialphotos 변수에 할당된 값으로 변경시켜주어야함 
4. init 함수는 웹 애플리케이션이 실행될 때 실행되어야 하기때문에 코드의 밑에 함수를 호출해줘야함
   탬바 컴포넌트의 기능을 개발해야함

상태를 기반으로 페이지를 렌더링할 때 사용되는 가장 일반적인 구조임

1. 탭바.js 파일에서는 탭바라는 컴포넌트를 모듈로서 사용 할 거기때문에 export default 키워드를 작성해주고 이 탬바 함수를 모듈로 내보내 줌
2. 함수의 내부에 기본적인 구조로 코드를 작성함
3. this.state 와 this render 함수를 작성해주고 state 값을 업데이트 하는 this.setState 함수를 작성해줘야함
4. setState  함수의 매개변수에는 업데이트 할 newState 라는 값을 전달받고 setState  내부에서는 this.state 값을 전달받을 값으로 업데이트 해주고 화면을 업데이트해주는 코드를 작성함 

1. App.js 파일에서 탭바 함수의 initialState와 onClick 을 전달했었는데 탭바 함수의 매개 변수로 initialState, onClick 전달해줌
2. 탭바 함수 내부에서의 state 값은 전달받은 이니셜 스테이트로 설정해주고 온클릭또한 전달받은 onclick함수로 설정함
3. 탬바 컴포넌트에는 4개의 버튼들을 나타내야 하고 버튼을 눌렀을 때 onclick 함수를 실행해 알맞은 aip 를 호출해야함

1. 4개의 버튼이라는 것을 만들어야 하는데 , 템플릿이라는 함수를 만들고 함수의 내부에 템프라는 변수를
   선언한 다음 4개의 버튼 요소들을 작성함
2. 템플릿이라는 함수가 이 temp 라는 변수에 있는 값을 반환할 수 있도록 리턴문 작성함
3. render 라는 함수는 템플릿함수를 통해 반환받은 템프 요소가 id 가 app 인 div  요소 내부에 추가하는 역할을 수행해야함
4. render 함수 내부에서는 innerHTML 을 사용해서 새로운 요소를 추가해야 
5. 먼저 id가 app 인 div 요소를 가져와야함

1. 작성한 템플릿을 화면에 나타내주어야함
2. render 함수의 내부에서 작성했던 템플릿이라는 함수를 호출해줌 
3.  id가 app인 div요소를 가져와야함
4. app.js에서 app이라는 함수가 전달받은 앱 요소를 탭바함수에 전달하고 탭바함수의 매개변수로 앱요소를 받아옴
5. 템프에 작성된 요소를 감싸는 외부 div 를 생성해줌 
6. target 이름 변수에 createElement를 사용해서 새로운 div 를 하나 만들어줌
7. div 요소의 클래스 이름을 탭바로 설정해줌
8. 매개변수로 받아온 app요소에 appendChild 메서드를 사용해서 생성해 주었던 target 이라는 요소를 추가함
9. 랜더 함수의 내부에서 새로 생성한 target 이라는 요소에 innerHTML 을 사용해 this.template 함수의 
   반환값을 할당해줌
10.  마지막으로 this.render함수를 호출

버튼을 흰색 배경으로 바꾸는 코드

클릭했을때 코드

1 컴포넌트

컴포넌트는 웹 애플리케이션의 구성요소로 웹 애플리케이션을 기능별로 나눈 독립적인 부분

• 중복코드 작성하지 않고 재사용 가능 
• 기능과 구조를 명확하게 분리 가능
• 독립적인 요소  -> 유지보수 편리

컴포넌트와 모듈

• 4 개의 버튼들이 있는 TabBar와 사진들을 Content로 나누고 각각 TabBar.js와 Content.js로 분리함
• API를 호출하는 기능은 별도의 컴포넌트로 나누지 않았음
  -> 컴포넌트는 주로 사용자 인터페이스와 사용자와 상호작용을 하는 부분, UI를 나타내기 때문에
• UI 재사용 부분이 아닌 재사용이 가능한 어떠한 기능인 API 를 호출하는 코드는 컴포넌트로 나눌 수 없음
  -> 컴포넌트로 분류할 수는 없지만 중복되는 기능은 컴포넌트가 아닌 하나의 모듈로 나눌수 있다

모듈

• 재사용 가능한 코드의 집합으로 , 특정 기능을 수행하는 코드를 하나의 단위로 묶어 관리함
• 모듈은 코드를 쉽게 관리 할 수 있도록 중복되는 기능을 작은 단위로 나눠 쉽게 재사용할 수 있도록 하는 방법 
• 여러 부분으로 나눠진 코드를 각각의 모듈로 만들어 관리하면 필요할 때마다 조합해서 사용함
• 재사용하기 쉽고 코드의 가독성이 좋아지고 코드의 유지보수기 편리함

2. 컴포넌트와 모듈시스템

모듈시스템

컴포넌트 단위로 나눈 자바스크립트 파일은 하나의 모듈이며 다른 파일에서 필요할 때 가져와 사용가능함

모듈 사용법 알아보기

• 자바스크립트는 ES6 버전부터 기본적으로 ECMAScript 모듈 시스템이라는 모듈 시스템 제공함
• 모듈 시스템에서 모듈은 보통 하나의 파일을 의미하고 이 모듈들은 각각 자신만의 스코프를 갖고 있음
  -> 일반적으로 모듈 내부에 작성되어 있는 기능들은 서로 외부에 공유할 수 없고 모듈 내부에서만 사용 가능함
  -> 즉 모듈 내부에 작성된 식별자들은 전부 비공개 처리가 되어 있음 
• ECMAScript 모듈 시스템은 비공개 처리된 식별자들을 공개 상태로 변경해 주는 Export라는 키워드를 제공함

• 식별자의 선언문 앞에 Export 키워드를 작성하면 해당 식별자는 공개 상태변경되어 다른 파일에서 사용 가능한 상태가 됨
• export 키워드를 통해 공개된 식별자를 다른 파일에서 사용하기 위해서는 ECMAScript 모듈 시스템이 제공하는 import라는 키워드를 사용함

자바스크립트의 ESMAScript 모듈 시스템에서는 이 Export 키워드를 사용해 외부에 공개할 기능을 명시해주고
import라는 키워드를 통해 다음과 같이 공개된 모듈들을 가져올 수 있음 

자바스크립트 파일을 모듈로서 사용하는 방법

• index.html 파일에 스크립트 태그의 타입을 모듈로 설정함
• 모듈로 사용되는 자바스크립트 파일은 자바스크립트의 파일이 아니라 모듈임을 명시해 주기 위해 JS에서 mjs로 변경해 줌 

한 번에 import 하고 export 하는 방

• 만약 모듈에서 내보내고자 하는 값이 다음과 같이 단 한 개만 존재한다면 코드의 가장 아래쪽에  default라는 키워드를 작성해서 식별자를 좀 더 간단하게 export 할 수 있음 

하지만 const let var 랑 default는 같이 사용할 수 없음

test.mjs 파일이 적혀있는 스크립트 태그를 삭제했지만 오류 생기지 않고 알맞은 값이 나옴

자바스크립트 파일을 모듈로서 사용하면 여러 모듈의 중심이 되는 파일인 index.mjs 파일만 이렇게 스크립트 태그로 로드해주면 됨  

2-1 동물 앨범 만들기

• 각각 파일들이 가져와야 할 모듈이 서로 중복되는 경우에는 새로운 자바스크립트 파일을 생성해서 관리해야 함
• 여러 개의 모듈들을 관리하는 새로운 자바스크립트 파일의 이름은 보통 App.js로 설정함
• App.js 파일에서는 필요한 기능들을 불러와서 조합하거나 다른 모듈로부터 정보를 전달받아 처리함

App.js
웹 애플리케이션의 시작점
주요 기능들 작성
여러 모듈들 조합 및 연결 
가독성 증가

1 - index.html과 index.js 파일을 제외한 모든 파일 삭제

2 - src 폴더의 내부에 components 폴더를 생성함 

3 - components 폴더 내부에 TabBar.js 와 Content.js 와 api.js 생성해 줌

4 - index.js 파일에 있는 코드를 복사해서 api.js로 옮겨 줌

5 - api.js는 api를 호출하고 결과 값을 반환하는 역할만 해야 함 

6 - src 폴더의 내부에 이 모듈을 관리하는 자바스크립트 파일인 App.js 파일을 생성해 줌

7 - index.html 수정함 

8 - index.html 에서 클래스 이름인 TABBAR와 CONTENT 인 div 요소는 모듈로 나눠지는 파일이기 때문에 삭제해 주고

     주석으로 표시하고  스크립트 타입을 module로 작성함

9 - index.js를 수정함

10 - index.js 파일에서는 여러 모듈들을 관리하는 역할의 app.js 파일을 import 해줌

11 - index.js 파일에 웹페이지들의 핵심이 작성되어 있는 app.js 모듈을 가져와서 웹페이지에 나타내 주는 코드를 작성해야 함

12 -  4개의 버튼과 사진들이 표시되어야 하는 부분은 index.html 파일에서 id 가 app인 div 요소의 내부에 존재해야 하므로

13 -  우선 html 문서에 id 가 app인 요소를 찾아 app 엘리먼트라는 변수에 할당함

14  - 그다음 생성자 함수를 사용해 app컴포넌트를 불러와야 함

15 -  new 키워드를 사용해서 컴포넌트의 새로운 인스턴스를 생성하고 AppElement 변수에 담은 id가 app인 요소를

        생성자 함수에 전달해서 AppComponent의 인스턴스가 AppElement 요소를 화면에 표시할 수 있도록 AppElement

       요소를 조작할 수 있도록 해줌

16 - TabBar.js로 넘어가서 코드작성함

17 - TabBar.js 에서는 tabBar 컴포넌트를 나타내는 tabBar라는 함수 하나를 모듈로서 내보내주어야 하기 때문에

       식별자가 단 하나만 존재할 때 사용할 수 있는 export default를 사용해서 내보내줌 ( content.js 도 마찬가지 )

18 - 모든 모듈들을 관리하는 app.js 파일에 코드를 작성해야 함 

19 - App.js 파일에서는 tabBar 모듈과 content 모듈을 가져와서 관리해야 하기 때문에 두 개의 모듈들을 import 해야 함

20 - index.js 파일에서 생성한 앱 컴포넌트의 인스턴스에 인수로 앱 엘리먼트 요소를 전달해 주었기 때문에 export default라는 키워드가 붙어있는 앱 함수 옆에 있는 소괄호 안에 전달받은 app 앨리먼트 요소를 작성함

21 - import 키워드를 통해 가져온 tabBar  컴포넌트와 conetent 컴포넌트를 앱 컴포넌트에서 사용할 수 있도록 코드를 작성해야 함

22 - tabBar라는 변수에 new 키워드를 사용해서 tabBar 컴포넌트의 인스턴스를 할당해 주고 content라는 변수에는

       new 키워드를 사용해 content 컴포넌트의 인스턴스를  할당해 줌

23 -  컴포넌트를 생성자 함수를 사용해 활용하면 동일한 구조와 기능을 가진 컴포넌트의 인스턴스를 여러 번 편리하게 재 사용할 수 있음  또한, 새로운 기능이 추가되거나 수정이 되더라도 기능을 쉽게 추가, 수정할 수 있

1-1 동물 앨범 만들기

동물 사진들은 API 호출을 통해 불러올 수 있음

API 사용법

API 주소만 호출하게 될 경우 값을 반환하고 API 주소의 뒤쪽에 동물 이름을 넣어 호출하게 되면

이 name에 해당하는 동물들의 사진들만 반환하는 api 

1. API 주소를 const 키워드를 통해 작성해 줌 
2. API를 호출하는 기능을 하는 getData라는 함수를 작성해 줌 / const getData =()=>{}
3. getData 함수의 내부에서는 res라는 변수의 fetch 메서드를 사용해서 API를 호출해 주고 API를 비동기적으로 처리해 주기 위해 함수의 앞에는 async를 작성하고 feach메서드 앞에는 await를 작성해야 함 
   const getData = async() =>{  let res = await feach(API_URL);
4.  API는 tryCatch 문을 사용해 에러 처리를 해야 함  /  try 내부에서는 만약 res라는 결괏값이 존재할 경우 data라는 변수에 API호출의 결괏값을 JSON으로 파싱 해야 함 /   if(res){ let data = await res.json()}
5. 그다음 API 호출결과를 console.log탭에서 확인 -> console.log(data);
6. 에러를 처리하는 catch 문의 내부에는 에러를 출력하는 코드를 console.log(err)
7. 코드 가장 하단에 getData();를 호출해서 출력값을 확인, 개발자 도구 열어 콘솔탭에 데이터확인함
8. 그 다음 API 호출 결과 값을 이 클래스 이름이 콘텐츠 인 div 요소의 내부에 나타내줘야 함
9. data 변수에  photos라는 배열을 forEach 배열 메서드를 사용해서 배열에 담긴 요소들을 하나씩 꺼내주어야 함
   data.photos.forEach((elm)=>{})
10. forEach 함수의 내부에는 엘리먼트 요소들을 하나씩 출력해보아야 함 console.log(elm)
11. API 호출 결과인 데이터에 photos라는 배열을 forEach 메서드를 통해 요소들을 하나씩 출력하면 photos 배열에 담긴 요소들이 하나씩 출력됨
12. element요소의 url이라는 값을 image 태그에 src로 넣어 이미지를 index.html의 content div에 나타내야 함
13. class이름이 content인 div 요소에 html 코드를 넣기 위해서 DOM API를 사용해야 함
    코드를 추가해 줄 대상 요소인 컨텐트 요소를 가져와야 함 const $content = document.querySelector('div.content'); 가져올 수 있음
14. forEach 메서드의 내부에 `<img src=${elm.url}></img>` 작성해 줌
15. 여러 개의 이미지 태그들을 한 번에 묶어서 이 콘텐츠 엘리먼트에 넣어주어야 하기 때문에 let templat =[]; 빈 배열을 전역변수로 만들어주고 생성한 템플릿 변수의 복합 대입 연산자를 사용해서 여러 개의 이미지 태그들을 템플릿이라는 변수에 모두 담아줌 template +=  `<img src=${elm.url}></img>` 
16. 템플릿 변수에 담긴 배열을 콘텐츠 엘리먼트의 innerHTML을 사용해서 추가해 줌 $content.innerHTML = tamplate;작성 후 실행

1-2 동물 앨범 만들기

각 버튼에 맞는 이미지로 세팅해 보기

1. 코드에서 API를 호출해 이름값이 penguin 인 데이터만 전달받기 위해서는 API 주소 뒤에 원하는 동물의 이름을 전달해주어야 함
2. getData 함수에 penguin이라는 값을 전달하고 
3. getData 함수에서는 매개변수로 name이라는 값을 전달받아 API URL 뒤쪽에 추가로 작성해주어야 함`${API_URL}$(name)`
4. 버튼을 눌렀을 때 각각 다른 화면이 나올 수 있도록 해주기
5. index.html로 가서 a태그를 이용해 페이지 이동시켜 줌
6. clicked라는 클래스 이름은 버튼의 배경색을 흰색으로 표시해 주기 위한 클래스임 버튼을 눌렀을 때 각각 화면의 이미지가 맞게 실행될 수 있도록 해주기 

1.this 와 화살표 함수

화살표 함수와 일반함수의 차이점은 함수 내부의 this 가 가리키는 값이 다르다는 것임

this는 함수가 어떻게 호출 되었는가에 따라 바인딩(binding) 하는 값이 달라지는 키워드임

웹개발에서 바인딩 (Binding)이란, 데이터를 특정 위치에 동적으로 연결하는 것을 의미한다.

화살표 함수 내부의 this 가 어떠한 값을 갖는지 알아보기

• 생성한 count 변수를 0 으로 초기화
• 내장함수인 setInterval 메서드를 사용함
• setInterval 메서드는 매개 변수 변수로 콜백함수와 딜레이 타임을 전달받는 메서드임 
• 콜백 함수로는 function 키워드를 사용해서 count변수의 값을 1씩 증가시켜주고 증가된 카운트의 값을 출력해주는 코드를 콜백함수의 내부에 작성해줌
• setInterval 함수에 전달된 콜백함수인 this 는 생성자 함수를 통해 새로운 카운터 객체를 가리키지 않고 전역객체인 window 객체를 가리키기 때문에 숫자가 1씩 증가되어 출력이 아니라 NaN이라는 값이 2초마다 출력됨

콜백함수를 화살표 함수로 변경해 코드를 작성하는 방법

• 콜백함수를 화살표 함수로 변경했을 뿐인데 코드가 알맞게 동작함 ex) 1 2 3 4 5 / 2초마다 1씩증가
• this 는 함수가 호출된 방법에 따라 가리키는 값이 달라짐
• 화살표 함수의 this 는 함수의 호출 방식이 아닌 함수가 정의 된 시점에서 상위 스코프의 this 를 참조 한다는 특징이 있음
• 자바스키립트가 식별자의 스코프를 결정하는 방법인 Lexical Scope (렉시컬 스코프) 와 유사

Lexical Scope 

함수의 호출 방법이 아니라 함수가 선언된 위치에 따라 스코프가 결정되는 방법 

일반함수로 호출이 되었으므로 웹 브라우저의 전역 객체인 윈도우 객체가 this 에 바인딩 된것임

• 콜백함수를 화살표 함수로 작성한다면 이 화살표 함수 내부의 this 는 함수가 어디에 선언되었는가에따라 바인딩 되는 값이 달라지기 때문에 콜백 함수가 선언된 위치인 setInterval 메서드 내부를 기준으로 창의 스코프를 참조함

※ 함수가 어디에 선언되었는가 ?

함수 선언 위치에 의해 스코프 결정 -> Lexical Scope (렉시컬 스코프)

• 화살표 함수는 함수의 선언 위치에 따라 스코프를 결정하는 방법인 Lexical Scope (렉시컬 스코프)를 따라 상위 스코프의 this 를 참조하기 때문에 함수의 호출위치와 상관없이 항상 고정된 this 의 값을 가짐
• 콜백함수의 내부에서 this 키워드가 자신이 포함된 객체가 아니라 전역객체를 가리킨다는 문제점을 해결하기 위한 대안으로 사용

this의 값에 윈도우 객체가 바인딩되어 출력됨

화살표 함수의 this는 자신을  포함하고 있는 함수가 선언된 위치의 상위 스코프를 참조하기 때문에

프린트 메서드가 선언된 위치인 cafe객체의 상위 스코프인 전역객체가 출력

-> 자바스크립트에서 객체의 메서드를 작성할 때에는 화살표 함수를 사용하지 않고 일반함수를 사용함

1.자바스크립트의 this

자신이 속한 객체를 가리킴 

this 는 자신이 속한 객체를 가리키는 키워드로 자바스크립트의 함수와 관련이 있음

자바스크립트의 this 키워드는 함수가 어떻게 호출되었는가에 따라 바인딩되는 값이 달라진다는 ,

즉 값이 동적으로 결정

"바인딩되다"라는 표현은 주로 프로그래밍에서 특정 변수나 객체가 특정 값이나 함수에 연결되는 것을 의미합니다.

전역공간

window 객체는 웹 브라우저의 전역객체로 전역공간에 항상 존재하는 객체를 의미함

함수

• this 키워드는 자신을 포함하고 있는 함수가 어떻게 호출 되었는가에 따라 값이 달라짐
• this 키워드를 포함하고 있는 fuc함수를 호출한 객체인 윈도우 객체가 this에 바인딩이 됨

메서드

메서드 = 객체의 프로퍼티에 저장된 함수

함수를 메서드로써 호출하면 메서드를 포함하고 있는 객체 자체가 출력이 됨

메서드를 호출 했을 때 메서드의 호출문에 있는 점 바로 앞에 객체가 출력이 된다고 봐도됨

• this가 포함 된 함수인 print 메서드를 갖고 있는 newCafe 라는 객체의 프로퍼티들이 출력됨
• print 메서드를 호출 했을 때 점 바로 앞에 있는 객체가 출력이 됨

• 코드를 실행하면 전역 객체인 윈도우 객체가 출력됨
• 함수가 메서드로써 호출이 되면 무조건 이 메서드의 점 앞에 있는 객체 그 자체가 출력이 되는건 아닌가? 라고 생각한다면

※ this 키워드에 대한 설명을 다시 한번 생각해야함

this 는 자신이 속한 객체를 가리키는 키워드로 자신을 포함하고 있는 함수가 어떻게 호출 되었는가에 따라 가리키는 값이 달라지는 키워드이다

• 코드에서 this 를 포함하고 있는 print 함수는 메서드로서 호출된 것이 아니라 전역 공간에서 일반함수로 호출이 되었음myCafe 함수를 호출한 객체인 전역 객체, 윈도우 객체가 출력이 됨

this 는 함수가 선언된 위치나 방법에 영향을 받지 않고 무조건 함수가 호출된 방법에 따라 가리키는 값이 달라진다는 것을 기억해야함 

this-2

자바스크립트의 this 는 함수가 어떻게 호출되었는가에 따라 가리키는 값이 달라짐

생성자함수

• this 값으로는 생성자 함수를 통해 생성한 Cafe{} 라는 객체가 출력이 됨
• 생성자 함수의 this 는 생성자 함수가 새로 생성할 새로운 객체 즉, 인스턴스를 가리킴
• 인스턴스 (instance)는 객체 지향 프로그래밍 (OOP)의 핵심 개념 중 하나로, 클래스로부터 생성된 객체를 의미합니다

함수가 콜백함수로서 호출될 때 this는 어떠한 값을 가리키는지 알아보기

• 자바스크립트의 this 는 자신을 포함하고 있는 함수가 어떻게 호출되었는가에 따라 값이 달라짐
• setMenu 의 메서드의 this 는 getMenu라는 함수 내부에서 메서드로서 호출이 아닌 일반함수로서 호출이 됨
• 함수가 일반함수로서 호출되면 this는 전역 객체인 윈도우 객체를 출력함
• '핫초코는'는 웹 브라우저의 전역 객체인 윈도우 객체의 메뉴에 프로퍼티에 할당됨.

함수가 callback 함수로서 호출되면 callback 함수에 있는 this는 예상한 것처럼 동작하지 않고 this 값에 전역 객체인 window 객체가 바인딩 된다는 문제가 있음

자바스크립트의 this 는 함수의 호출 방식에 의해 값이 동적으로 바인딩이 되고
함수가 일반함수로서 그리고 콜백함수로서 호출 될 때의 this 는 전역 객체를 가리킴
함수가 함수가 메서드로서 호출되었을 때의 this 는 메서드를 포함하고 있는 객체를 가리키고
마지막으로 생성자 함수로서 호출되면 this는 생성자 함수가 새로 생성할 새로운 객체를 가리킴

Part 1 Vue.js 기본기술 익히기 

1일 차 (종이책 ~ P66)

1장 Vue.js 개요 살펴보기 

1. 뷰는

사용자 인터페이스 (UI, User Interface)를 만드는 데 사용하는 자바스크립 기반 오픈소스 프로그레시브 프레임워크이다.

https://ko.vuejs.org/ 뷰 공식 사이트

대부분 오픈소스 프레임워크는 모두 특정 소프트웨어 아키텍처 패턴에 기반을 두고 있음 

아키텍처 패턴(Architecture Pattern)은

소프트웨어 시스템의 구조를 설계할 때 반복적으로 사용할 수 있는 설계 템플릿입니다.

뷰는 MVVM 아키텍처 패턴을 따름 

Model - View - ViewModel 

MVVM 아키텍처 패턴
데이터를 보여주는 뷰(view)와 데이터를 처리하는 모델(model) 사이에 데이터를 중개하는 뷰  모델(view model)을 두어 UI와 데이터 처리 로직의 상호 의존성을 줄이는 아키텍처 패턴을 말함

-> 뷰와 모델 사이의 의존성을 낮추면 , 뷰. 뷰 모델 모델 부분을 독립적으로 모듈화 하고 재사용성을 높일 수 있는

애플리케이션을 설계할수 있음 

뷰는 특히 뷰 모델에 집중하는 프레임워크임 그래서 뷰를 사용하면 뷰와 모델을 손쉽게 중개할 수 있는,

즉 MVVM 아키텍처 패턴을 따르는 애플리케이션을 설계할 수 있음 

2. 뷰의 탄생 배경 

앵귤러가 배우기 어렵고 무거운 프레임워크라는 단점을 극복하기 위해 만들어짐

더불어 앵귤러의 장점인 데이터 바인딩과 MVVM 패턴을 채택해 뷰가 탄생함

3. 뷰를 사용하는 이유

뷰의 특징

가상 DOM

뷰는 화면을 조작할 때 가상 DOM으로 조작함

예를 들어 <a> 태그의 텍스트가 변경되면 해당 부분의 속성 값만 변경함

변경되기 전 가상 DOM과 달라진 부분이 있으면 실제 DOM에도 해당 부분만 반영해 변경함

-> 불필요한 렌더링을 최소화하므로 뷰를 사용해 만든 웹 애플리케이션의 렌더링 성능을 효율적으로 올릴 수 있음 

양방향 데이터 바인딩

뷰는 MVVM 패턴에서 뷰 모델에 집중한 프레임 워크임

뷰는 뷰(view)에서 받은 요청을 모델(model)에 전달하고 모델에서 받은 응답을 뷰에 전달하는 뷰 모델로써의 역할을 함

이때 뷰와 모델 사이에 연결점이 되는 기능이 양방향 데이터 바이딩임

※ 뷰는 양방향 데이터 바인딩 덕분에 화면 업데이트를 실시간으로 처리할 수 있음

4. 뷰의 장단점

- 간단한 설치

뷰는 CDN 라이브러리 하나만 불러오면 사용할 준비가 끝남 

방법 1 )  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

방법 2 )  터미널
               npm create vue@latest
Vite를 사용해 구조적으로 프레임워크를 사용하는 방법 2 

- 낮은 학습 곡선

• 뷰는 배우는데 오래 걸리거나 어렵지 않음
• 뷰의 지시어, 문법만 추가로 배우면 됨 

- 공식 문서 한국어 지원

• 뷰 공식 문서 :http://ko.vuejs.org
• 라우터 공식 문서 : https://router.vuejs.kr
• 피니아 공식 문서:  https://pinia.vuejs.kr

단점

• 커뮤니티 활용의 한계 : 다른 프레임워크에 비해 커뮤니티가 좁은 편
• 뚜렷한 후원처의 부재 : 뷰는 에반 유 개인이 여러 기업의 후원을 받아 운영 중이다
• 플로그인의 부재 : 뷰는 아직 프레임워크와 호환되는 플로그인이 부족함

-> 뷰의 여러 단점은 모두 다른 프레임워크보다 늦게 출시된 것에서 비롯됨

2장 Vue.js 시작하기

개발환경 설정하기

• Node.js 설치

Node.js 는 웹 브라우저 외부에서 자바스크립트를 실행할 수 있는 크로스 플랫폼 오픈소스 런타임 환경을 제공함

https://nodejs.org/en/download/prebuilt-installer

LTS(장기 지원버전)와 Current(최신 버전)가 있지만 안정적인 LTS로 다운로드

• Vue CLI ( command Line Interface ) 설치

CLI는 윈도우의 명령 프롬프트나 맥 OS의 터미널에서 사용자가 명령어를 입력했을 대 컴퓨터가 그에 맞는 기능을 실행해 주는 일련의 처리 방식을 말함

Vue CLI 는 명령어 인터페이스로 뷰 애플리케이션을 쉽게 생성하고 관리하는 여러 명령어를 제공함 

다만, 윈도나 맥 OS에 기본으로 설치된 명령어 인터페이스가 아니라서 별도 설치 필요함

Node.js를 설치할 때 함께 설치되는 NPM(Node Package Manager )를 사용함

npm install [,-g] 패키지명
이 명령어로 Vue CLI(@vue/cli)를 설치함

명령프롬프트에 npm installl -g @vue/cli  설치 후  

vue --version 명령어 확인 

• 비주얼 스튜디오 설치 

Vue - Official 익스테이션 

Vue - Official 익스텐션은 뷰 문법과 파일을 인식하게 할 뿐 아니라 타입스크립트 지원, 빠른 코드 분석 및 디버깅, 인텔리센스 등 다양한 기능을 제공함

확장 프로그램 설치

Vue.js devtools 

뷰 애플리케이션을 디버깅하고 개발하는데 도움을 주는 여러 기능을 사용할 수 있음

2.2 첫 번쨰 뷰 애플리케이션 만들기 

뷰 애플리케이션을 만드는 방법은 CDN ( Content Delivery Network )와 NPM ( Node Package Manager)을 방법이 있음

CDN 이란

콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장해 제공하는 시스템임

CDN 사용해보기

CDN은 HTML 기반에서 뷰 애플리케이션을 생성할 때 유용함 

스크립트 태그 한 줄로  뷰 라이브러리를 쉽게 추가할 수 있음

<script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>

1. <script> 태그로 뷰 라이브러리를 불러옴. 뷰 라이브러리를 불러오면 Vue 객체를 사용함

2. Vue 객체 속성 중에서 CreateApp() 함수를 비 구조화 할당으로 변수에 할당함 

비구조화 할당이란 ( 구조 분해 할당 이라고도 함)

배열이나 객체 속성을 해체해 개별 변수에 값을 담을 수 있는 자바스크립트 표현식임

3. createApp() 함수를 호출하면 애플리케이션 인스턴스를 생성할 수 있다 

"인스턴스(instance)"는 소프트웨어 개발에서 특정 클래스의 구체적인 객체를 의미합니다. 클래스는 객체의 구조와 동작을 정의하는 설계도와 같고, 인스턴스는 그 설계도를 바탕으로 실제로 만들어진 개별 객체입니다.

4.createApp() 함수는 전달하는 객체의 속성으로 생성되는 애플리케이션 인스턴스의 초깃값을 매개변수로 설정함

   data속성은 값으로 객체를 반환하는 함수를 가지는데 함수에 반환되는 객체는 뷰 인스턴스 데이터 data로 사용가능함

5.createApp()  함수로 생성된 뷰 인스턴스를 DOM과 연결해야 함 

  이를 위해 뷰 라이브러리에서 제공하는 $mount()  함수를 사용함

  $mount() 함수의 매개변수에는 연결할 DOM의 id 속성 값을 전달함 

  #app을 전달하므로 createApp() 함수로 생서한 뷰 인스턴스는 id속성값이 app 인 DOM과 연결됨

6. 뷰 인스턴스가 DOM과 연결되면 뷰 인스턴스에서 생성된 값을 사용할 수 있음

   뷰 인스턴스에서 데이터를 정의했으므로 DOM에서 데이터를 사용가능함

   사용하는 방법은 {{}} 안에 data 속성에서 반환한 객체의 속성을 적으면 됨

NPM 사용해 보기

NPM은 터미널을 사용함

익숙해지면 윈도의 명령 프롬프트나 맥 OS터미널이 더 편할 수 있겠지만 VSCode에서도 자체적으로 터미널을 제공함

터미널에 명령어를 프로젝트 루트 경로에서 해야 함 

=> cd로 해당 폴더를 지정해주어야 함 

명령어를 입력해 초기 프로젝트를 구성하는 것을 뷰의 뼈대를 세운다는 의미로 스캐폴딩(scaffolding)이라고 함

• npm install : npm create 명령어로 생성된 package.json 명령어로 생성된 package.json 파일을 참조해 패키지를 설치하는 명령어임
• npm run dev: 뷰 애플리케이션을 실행하는 명령어임 

CDN 

장점

CDN을 사용하면 CDN 서비스로 제공되는 <script> 태그만 추가해 뷰 애플리케이션을 바로 적용할 수 있는 장점이 있음

-> 개발환경을 갖추지 않아도 됨

단점

개발에 필요한 라이브러리를 직접 추가해야 하고 의존성 관리도 직접 해야 한다는 단점이 있음

HTML과 함께 사용해야 해서 규모가 큰 프로젝트에는 적합하지 않음

의존성 관리란

애애플리케이션에서 사용한 라이브러리의 버전을 관리하는 것 

대부분 애플리케이션에서는 패키지를 1개만 사용하지 않고 많은 종류를 사용함

패키지 버전 관리, 즉 의존성관리를 개발자가 직접 하지 않고 도구를 이용함

NPM도 이러한 도구임

NPM 

장점

프롬프트(prommpt)를 이용해 애플리케이션의 세부 설정을 직접 할 수 있음

->초기 설정에서 선택의 폭이 넓음

패키지 관리 도구를 사용하므로 패키지에 대한 의존성 관리가 쉽다

확장자가 vue로 끝나는 단독 파일을 사용해 애플리케이션을 만들기 때문에 유지 보수가 쉬워 큰 프로젝트에도 적합함

단점

설치 과정이 번거롭다

1.DOM API-2

createElement

새로운 노드를 생성할 수 있음

타입 요소에 텍스트 값이 추가됨

별도의 텍스트 노드가 새로 생성됨

DOM API를 사용해 div 요소와 text 노드를 생성했지만 화면에는 '몰티즈'라는 텍스트는 안보임

-> 화면에 보이지 않는 이유는 생성만 되었을 뿐 , 아직 DOM 트리에 추가된게 아니기 때문임

1. appendChild라는 메서드를 사용해서 전달받은 노니를 원하는 요소의 마지막 자식으로 추가할 수 있음
2. DOM 트리는 노드 간의 상하 관계를 한눈에 볼 수 있는 트리구조임 
3. 상하관계는 부모 관계라고 함 
4. appendChild 는 부모 노드를 작성한 다음 부모 노드에 appendChild를 작성하고 appendChild의 괄호 안에는 부모 노드에 새로 추가할 자식 노드를 작성해야 함

버튼 태그로 이루어져 있는 노드를 추가하는 코드

1. 새로운 버튼 요소를 생성해야 하므로 버튼이라는 변수에  document.createElement를 사용해 태그의 이름인 버튼을 작성해 버튼요소를 생성
2. 버튼 요소의 id는 new 버튼으로 설정, 또한 버튼 요소의 클래스 이름도 new button 
3. 버튼 요소의 텍스트에는 textContent 사용해서 한글로 '버튼'이라고 작성 
4. 버튼요소를 클래스 이름이 animalInfo 인 자식 노드로 추가함
5. animalInfo 요소를 변수 생성 후 document.querySelector를 사용해서 클래스 이름이 animalInfo 인 div 요소를 할당
6. 부모 노드인 animalInfo의 부모 노드를 작성한 다음 appendChild 메서드를 사용해서 추가할 요소인 button 요소를 괄호 안에 작성해  animalInfo 요소의 자식 노드로 button 요소를 추가함 

DOM 은 특정 요소에 여러 가지 이벤트를 추가할 수  있는

AddEventListener라는 DOM API를 제공함

AddEventListener( 이벤트, 리스너)를 매개변수로 전달받음

• 이벤트는 어떠한 이벤트를 발생시킬 것인지 나타내고 
• 리스너는 앞에 이벤트가 발생했을 때 실행될 어떠한 함수를 전달받음
• window라는 객체에 alert라는 메서드를 사용
• window 라는 객체는 현재 사용하고 있는 웹 브라우저의 창을 나타내는 객체
• alert() 메서드

특정 요소의 내부에 HTML 요소를 추가할 수 있는 DOM API 인

InnerHTML 

InnerHTML 은

DOM API 속성 중 하나로 특정 요소의 HTML을 문자열 형태로 읽거나 설정할 수 있음

요소의 내부 HTML 을 나타내는 문자열을 반환하거나 설정된 문자열을 요소의 자식으로 해석함

요소 내부에 있는 모든 HTML 요소들이 출력됨

요소의 내부의 HTML 을 새로운 문자열로 생성해 보기

innerHTML을 사용해서 특정요소를 추가하면 

기존의 모든 자식 요소들은 제거가 됨 , 새로운 요소로 대책 된다는 특징이 있음

-> 성능이나 보안에 문제가 있기 때문에 주의해야 함. 가능하다면 createElement나 textContent 같은 다른 DOM API를 사용해서 개발하는 게 좋음

2. 여러 가지 폼 조작 

폼(Form)이란

웹 페이지에서 사용자로부터 데이터를 수집하거나 사용자와의 상호작용을 가능하게 하는 HTML 요소

자주 사용하는 태그는  <input> <select> <textarea>

label 태그

일반적으로 특정 폼 요소의 라벨을 정의할 때 사용하는 태그

select태그

여러 개의 옵션 중 하나를 선택할 수 있는 드롭다운 목록을 제공

• label의 for 속성을 select id 값으로 설정해 주면 label 태그는 select 태그의 라벨로써 동작함
• select 태그의 내부에 있는 option 태그들에는 value라는 속성은 실제 서버에 전달되는 option 태그의 값으로 폼 데이터를 조작할 때 해당값을 이용함 / 사용자들은 한글로 작성된 과일 이름이지만 자바스크립트 파일에서는 option 태그 내부의 value 속성값으로 폼 요소를 조작할 수 있음 
• option에 slected를 작성하면 기본값을 설정할 수 있음

1. document에 getElementById를 사용해서 select 요소를 가져온 다음 $fruitselect에 할당함
2. 가져온 요소에 이벤트를 처리함
3. 이벤트 리스너를 사용하면 사용자가 select 요소의 옵션을 변경할 때마다 이벤트를 감지해 옵션을 변경할 때마다 이벤트를 감지해서 작업을 처리할 수 있음
4. 이벤트는 값이 변경될 때마다 실행되어야 하기 때문에 'change' 이벤트를 작성
5. 해당 이벤트를 발생할 때마다 실행될 콜백함수에는 매개변수로 event를 전달받아서 전달받은 이벤트라는 값을 사용해서 이벤트. 타깃. 벨류 출력하면 select태그 내부의 값을 변경할 때마다 변경된 값에 해당되는 벨류 값을 출력함 

- select 요소를 가져온 다음 옵션 태그에 있는 특정  값을 삭제해보기

- input 태그 사용해 보기

특정 값을 입력하기 위해 사용되는 태그 

• input 태그에 type 속성을 알맞게 작성하면  유효성 거사를 자동으로 수행해 준다는 장점이 있음
• 사용자가 어떠한 데이터를 입력할 것인지에 대한 데이터 타입을 명확하게 알 수 있음
• 초기값을 주고 싶다면 value를 작성 

- 버튼을 사용하지 않고 input 태그의 값을 가져오고 조작해 보기 

• userName의 값을 수정하고 싶다면 value 속성을 사용하고 
• 버튼이 아니라 입력폼에 값이 입력될 때마다 입력된 값을 가져오고 싶다면 input요소의 eventListener를 사용해서 input 이라는 이벤트가 발생할때마다 callback 함수의 매개변수로는 이벤트의 타겟에는 value 값을 출력해준다면 비밀번호를 입력하는 input에 값이 입력될때마다 작성되어 있는 값을 출력할 수 있음