나만의공간

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

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로 끝나는 단독 파일을 사용해 애플리케이션을 만들기 때문에 유지 보수가 쉬워 큰 프로젝트에도 적합함

단점

설치 과정이 번거롭다