Peep

*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임,

기초 셋팅

• Node.js 설치 (10버전 이상)

• VSCode 에디터 설치

• Yarn 설치

  • 설치 여부 상관없이 진행가능하나 속도면에서 yarn이 유리하다고 합니다.

vscode 에디터 프로젝트 여는 법

• 프로젝트를 진행 할 폴더를 바탕화면에서 생성하세요.
  • 이 폴더는 Root 폴더가 됩니다.
  • 하위에 vue 프로젝트 폴더가 생성될 것입니다.
  • 이하 Root 폴더라고 하겠습니다.
• vscode 에디터를 통해 Root 폴더를 오픈합니다.
  • 메뉴 File > Open Folder > Root 폴더

yarn 설치

• vscode 에디터로 Root 폴더를 열어 준 후에 터미널을 열어줍니다.

  • 단축키(crtl + `) 또는 메뉴 Terminal > New terminal

• 터미널에 명령어를 입력합니다.

• npm으로 진행 할 경우에는 yarn 설치를 건너 뛰시면 됩니다.

@vue/cli 설치 후 프로젝트 폴더 생성

• Root 폴더 하위에 vue 프로젝트 폴더를 만들기 위해 @vue/cli의 설치가 필요합니다.

  • 하위에 생성되는 vue 프로젝트 폴더에서 실제 작업이 진행됩니다.

• 터미널에 명령어를 입력합니다.

• @vue/cli 설치가 끝나면 터미널에 명령어를 입력합니다.

• okayoon은 폴더명이므로 각자 지정할 폴더명을 입력해줍니다.

  • 설명하자면 @vue/cli의 기능을 이용하여 okayoon이라는 폴더를 create하는 것입니다. 

  • 물론 vue create니까 vue의 기능을 사용할 수 있도록 무엇인가가 포함된 폴더겠죠?
  • Please pick a preset이라는 문구가 나오면 엔터를 쳐줍니다.

프로젝트 시작하기

• vscode 에디터에 방금  vue create로 생성한 프로젝트를 열어줍니다. 

• 터미널에서 명령어로 (cd ./프로젝트폴더명) 이동해도 되나 터미널에 익숙치 않다면 이게 제일 간단한 방법입니다.

• 터미널을 열어줍니다.

  • 단축키( crtl + ` ) 또는 메뉴 Terminal > New terminal

• 터미널에 명령어를 입력합니다. 

• 로딩이 끝나면 로컬 서버가 띄워졌을 것입니다. 

• 파란색 글씨가 보이니 Local, Network 둘 중 하나의 주소를 브라우저에 입력해서 vue 페이지로 이동해보세요.

팁

• 에디터에서 < 꺽쇠를 입력하면 자동완성에 scaffold 가 뜨게되고, 선택 시 자동으로 vue 템플릿이 생성됩니다.

기초 템플릿의 이해

• html 문서가 작성되는 공간은 <template></template> 입니다.

• javascript가 작성되는 공간은 <script></script> 입니다.

• css가 작성되는 공간은 <style></style> 입니다.

학습 목차

• 데이터 바인딩

• if문 ( v-if )

• for문 ( v-for )

• eventListener

학습 상세에 들어가기 전에 App.vue의 내용을 싹- 지우고 꺽쇠(<)입력 후 자동완성에 scaffold를 적용합니다.

학습 상세

데이터 바인딩(Data Binding)

• <script> 내부에 바인딩 할 data를 만들어 줍니다. (혹은 data 내부에 바인딩할 데이터가 있어야 합니다.)

• '안녕' 이라는 데이터를 만들었습니다.

  • 안녕은 내가 html에 넣어야하는 (바인딩 해줄) key 값이고

  • ‘안녕하세요’는 html이 렌더링 되었을 때, 뿌려질 데이터의 value값 입니다.

    

• 안녕이라고 생성한 데이터를 <template>에 vue 구문으로 {{ 안녕 }} 형식으로 넣어줍니다.

• html에 렌더링 된 결과는 ‘안녕하세요’가 됩니다.

if 문 ( v-if )

• 데이터를 생성합니다.

• 

• isMonday : false로 생성했습니다.

  

• isMonday의 값이 false이기 때문에 <p>는  html에 렌더링되지 않습니다.

   

• v-if=”boolean” 형태로 작성되며 boolean은 참, 거짓의 값이 되는 것들이어야 합니다.

• v-if문을 사용하기 위해서는 참인지 거짓인지를 가늠 할 data가 필요합니다.

• v-if문을 사용 할 영역에 넣어줍니다.

for 문

• v-for=”이름 in 이름들” 을 설명해보겠습니다.

  • in 뒤에 오는 ‘이름들’이 반복돌 객체

  • in 앞에 ‘이름’은 반복이 된 하나 하나의 객체

• 따라서 p태그 안에  {{ 이름 }} 을 넣게 되면 하나하나의 이름들이 렌더링 되는 것입니다.

• 
• 

• 사람들을 반복 돌려서 사람이라는 값을 뽑아냅니다.

• 아까는 key, value값 형태가 아니어서 그냥 {{ 이름 }} 했다면 지금은 key, value 형태이기 때문에 js의 점 문법을 사용해서 위와 같이 작성해줘야 합니다.

• {{ 사람.이름 }}, {{ 사람.나이 }} 

  

• (사람, i) 형태로 변경해주면 i라는 값에 index가 담기게됩니다.

• index는 반복문에 등록된 객체의 개수입니다.

  • 사람들에 사람이 4명이므로 i는 처음에 0, 그 다음 1, ~ 3 까지 증가합니다.

• v-bind:key=”” 또는 :key=”” 형태로 넣을 수 있다.

  

• 역시 v-for에서 사용 할 데이터를 만들어 줍니다.
• v-for문을 사용 할 영역에 넣어줍니다.
• 좀 더 나아가서 depth가 더 있는 데이터를 반복문을 통해 렌더링해보겠습니다.
  1. 또 한 번 데이터를 만들어 줍니다.
  2. v-for문을 사용 할 영역에 넣어줍니다.
  3. v-for문에는 v-bind:key=”” 값이 필수로 들어가야하기 때문에 코드를 좀 수정하겠습니다.
  4. v-for문에서 key 값을 생성해줍니다.
  5. key 값을 삽입해줍니다.

EventListener

• methods영역에 어떠한 이벤트가 일어났을 때 실행될 함수를 만들어줍니다.

• <template> 내부의 태그에 v-on:click=”” 과 같이 어떠한 행동에 내가 작성한 실행될 함수를 연결해주면 됩니다.

• hello라는 함수를 만들어주었습니다.

• 

   

• hello 함수를 어떠한 상황에서 사용할지 생각하고 html에 연결해줍니다.

• 

1. v-on:click이기때문에 버튼을 click하면 hello가 실행되도록 바인딩해주었습니다.

2. 이벤트는 js이기 때문에 <script> 영역에 작성해야 합니다.

3. vue 문법이기 때문에 export default 내부에 methods영역을 만들어서 넣어야 합니다.

4. data와는 다른 영역이며 methods라는 영역에 작성해보겠습니다.

   • 원리는 간단합니다.

   • 위에서 배운 클릭이벤트 + if문을 사용해서 문제를 풀어보겠습니다.

   • 반복문을 돌린 div를 클릭을 통해 보였다가 안보였다가 만들어보세요.

   • 답은 아래에 영역으로

상단 퀴즈 답

• if문을 통해 보이게 했다가 숨겼다가 할 것인데, 그 전에 어떤 기준으로 보이게 했다가 아니게 했다가를 할 지  data를 만듭니다.

  

  • 보여줄까라는 데이터를 이용해 show, hide를 시키도록 하기 위해 data를 작성했습니다.

• 그리고 html의 어디를 if문을 통해 보여졌다가 숨겼다가 할 지 정하고 그 영역에 v-if를 넣어줍니다.

• 
  • 위에서 show,hide시킬 목적으로 만든 데이터 보여줄까를 넣어줍니다.

• 일단 보여줄까가 false이기 때문에 영역이 감춰지게됩니다.

• v-if에는 true가 들어가야 영역이 보이므로 보여줄까를 true로 변경할 방법을 생각합니다.

• 클릭을 통해 보여줄까를 true로 변경하면 영역이 보일테니까 methos에 클릭 시 실행될 함수를 만들어줍니다.

• 

• 클릭 할 때 마다 방금 만든 toggle 함수가 실행될 수 있도록 v-on:click=””에 넣어줍니다.

• 

• 자 이제 클릭마다 toggle이라는 함수가 실행될 것이고 toggle안에 보여줄까를 true, false로 변경되게 만들 함수만 작성해 넣습니다.

• 

  • 데이터에 접근하기 위해서는 this.데이터명 으로 접근해야합니다.

  • 먼저 클릭을 하면 toggle함수가 실행되고 함수가 실행되면 this.보여줄까 = !this.보여줄까 가 실행됩니다.

  • 기존의 보여줄까가 false이지만 !(not) 연산자로 인해서 true로 됩니다.

  • 물론 true일 때는 flase로 항상 반대 값을 넣어주게 됩니다.

Vue.js single file components 방식으로 개발해보기 02

Vue Project 시작, 페이지 띄워보기

Vue.js 페이지 브라우저에서 열어보기

실행 할 프로젝트 폴더를 생성하거나 선택하여 에디터에서 열어줍니다.

- 이 폴더에 vue.js를 다운로드 받아 사용할 것입니다.

저는 vue 폴더를 만들어서 VScode에서 Open Folder 했습니다.

에디터에서 cmd 창을 열어줍니다.

- VScode 에디터의 단축키는 [ctrl + `] 인데, 에디터마다 다르므로 검색은 필수 입니다.

(기본으로 cmd를 제공하지 않는 에디터는 플러그인이 있을 듯 합니다.)

cmd창을 자세히보면 [ PS C:\Users\사용자명\Desktop\vue > ] 라고 되어있는데, 이것은 자신의 폴더 구조입니다.

마지막에 적혀 있는 vue가 프로젝트 폴더명이며 cmd창이 열린 지점입니다.

구조가 다르다면 cmd가 다른 곳을 바라보고 있는 부분입니다.

Desktop (바탕화면) 에서 끝났으면 cmd 창은 바탕화면을 바라보고 있다는 뜻입니다.

Desktop에서 명령어를 입력할 경우 명령어를 수행하는 대상은 프로젝트 폴더인 vue가 아니라 바탕화면이 됩니다.

vue.js를 npm을 통해 다운로드 합니다.

vue 폴더를 대상으로 오픈된 cmd창에 명령어를 입력합니다.

npm을 통해 vue를 install 명령어를 입력해줍니다.

*만약 ‘npm’은 내부 또는 외부 명령 실행 할 수 있는 프로그램, 또는 배치 파일이 아닙니다와 같은 에러가 날 경우

install 명령어가 완료되면 node_modules폴더와 package-lock.json 파일이 확인됩니다.

그리고 node_modules 폴더를 열어보면 하위에 vue 폴더가 다운로드 된 것을 확인 할 수 있습니다.

vue의 개발 환경을 쉽게 설정하기 위해, vue-cli 모듈을 npm을 통해 다운로드합니다.

vue-cli 란 무엇인가?

출처 : 블로그 링크

즉, 프로젝트를 쉽게 진행하기 위해 다운로드를 진행합니다.

cmd창에 명령어를 입력합니다.

여기서 -g는 global의 g이며 -g대신 --global을 입력해도 됩니다.

vue cli의 명령어를 입력하기 위해서는 글로벌로 설치를 해야한다고 합니다.

vue 프로젝트 설정입니다.

cmd창에 명령어를 입력합니다.

vue init은 vue-cli 모듈의 프로젝트 시작 명령어이며 webpack-simple은 모듈에서 지원하는 템플릿의 종류입니다.

webpack-simple 템플릿이란?
웹팩 최소 기능을 활용한 프로젝트 구성 방식으로 빠른 화면 프로토타이핑용으로 사용됩니다.
그외에 지원 템플릿 종류는 더 있으므로 참고 링크로 들어가서 가능합니다.
참고https://blog.hanumoka.net/2018/08/22/vue-20180822-vue-Vue-CLI/

명령어를 입력한 후에는 프로젝트 설정에 대한 질문들이 줄줄이 나옵니다.

이 질문들에 대한 답변은 package.json에 저장됩니다.

첫번째 질문 이후에는 엔터만 계속 치고 넘어가도 기본으로 설정되는 부분들이 있기 때문에 init을 완료 할 수 있습니다.

질문으로 나오는 항목

(1) 현재 디렉토리에서 실행 여부, y를 등록해줘야 진행이 가능합니다.

(2) 프로젝트 이름, (3) 프로젝트 설명은 설정을 안 할 경우 기본 값으로 저장됩니다.  

(4). 작성자는 설정을 안 할 경우 package.json 파일에 저장되지 않습니다.

(5). 소프트웨어 라이센스 설정을 안 할 경우 기본 값으로 저장됩니다.

(6). sass 사용 여부, 현재 예제들에서는 sass를 사용하지 않으므로 n를 입력합니다.

질문 등록을 마치게 되면 로딩이 진행되고 아래와 같이 명령어가 나옵니다.

그리고 폴더를 확인해보면 아래와 다운로드 된 파일들이 보입니다.

위 다운로드 된 파일을 간단한 설명입니다.

package.json

로컬 서버에 vue 페이지 띄우기

vue init 명령어가 끝나고 나서 cmd 창을 보면 아래와 같이 To get started로 해서 2개의 명령어가 나오게 됩니다.

명령어 들을 순서대로 실행해보겠습니다.

cmd 창에 명령어를 입력합니다.

설정에 등록된 모듈들을 다운로드 해주는 부분이며 다운로드가 완료된 후에 다음 명령어를 입력해줍니다.

명령어 실행이 끝나면 브라우저 창이 자동으로 열리게 됩니다.

브라우저가 열리지 않으면 브라우저에서 localhost:8080를 url로 입력해 줍니다.

이렇게 localhost에 서버를 띄워서 vue 컴포넌트 페이지를 열었습니다.

과연 저 브라우저가 내 폴더의 소스를 바라보는 것인가를 알아보기 위해 소스 수정 후 테스트를 진행해보겠습니다.

* 프로젝트폴더 > src > App.vue

<template> 태그 사이에 있는 태그들을 다 지운 후 아래와 같이 작성해보겠습니다.

그 후 브라우저를 확인해보면 아래와 같이 변경 된 것을 확인 할 수 있습니다.

브라우저의 새로고침 없이도 변경된 모습이 확인 가능한데, 그 이유는 프로젝트 구성 시에 자동으로 설치된 vue-hot-reload-api 때문입니다.

이 모듈은 페이지가 다시 로드되지 않아도 자동으로 수정된 부분을 리로드 시켜줍니다.

서버 죽이는 방법은 단축키로 [ctrl + c] 후에 y를 눌러주는 방법과 cmd창에서 kill terminal 시키는 방법이 있습니다.

에디터 내에 저런 이모티콘 클릭(kill terminal)

vue 다운로드부터 브라우저 오픈까지의 명령어를 압축한 부분입니다.

cmd 창에 명령어를 입력합니다.

Vue.js single file components 방식으로 개발해보기 01

프로젝트 실행 전 Node.js를 통한 사전 작업

Node.js의 정의

출처 : 위키백과

출처 : 블로그 링크

Vue 프로젝트에서 Node.js가 필요한 이유

1. ES2015+ (ES6) 문법을 사용하였을 경우 ES5문법으로 트랜스파일(Transpile) 해주는 Babel을 사용할 수 있습니다.

(SASS 등 트랜스파일(Transpile) 이 필요한 것들을 사용할 수 있게 됩니다.)

2. Single File Components를 사용하기 위해서 빌드 도구가 필요합니다.

- 빌드 도구를 사용하기 위해서 Node.js가 필요합니다.

- Vue-loader를 통해 Vue에서만 사용되는 태그들이 HTML, CSS, JS와 같이 변환, 분리되어 실행 가능하게 됩니다.

Vue에서 컴포넌트 템플릿을 정의하는 방법

Node.js 다운로드 방법

1. 사이트에 접속하여 자신의 OS에 맞는 버전을 다운로드 합니다.

https://nodejs.org/ko/download/

- LTS버전으로 다운로드하면 됩니다.

2. 다운로드가 완료 되었는지 확인 하는 작업을 합니다. (Windows 기준의 예시)

-  명령 프롬프트(cmd) 창을 열어 확인하도록 하겠습니다. 아래 순서대로 진행해주세요.

- 검색창이 없다면 위와 같이 진행합니다.

[윈도우 버튼 클릭 후 > 마우스 우 클릭 > 실행 > cmd 입력 > 확인]

or

[실행 창 단축키(Window키 + R) > cmd 입력 > 확인]

- 명령프롬프트(cmd) 창이 오픈되면 아래와 같이 입력해줍니다.

[node -v] or [node --version]

다운로드가 완료되면 버전정보가 나오고,

실패하면 node는 내부 또는 외부 명령, 실행할 수 없는 프로그램--의 안내가 나온다.

# NPM(Node Packaged Manager)이란?

vue.js 지역 컴포넌트를 만들어보자.

-화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하기 위하여 Component로 제작한다.

-Vue 문법 특성 상 최상위 루트 태그가 1개여야만 렌더가 가능하다.

-Component는 지역(Local)과 전역(Global)로 나눌 수 있다.

자 문법을 몰라도 컴포넌트 만들어 봅시다.

일단 new Vue ({   }); 가 뭘까요? https://kr.vuejs.org/v2/guide/instance.html

Vue 인스턴스 입니다.

인스턴스란?

설계도를 바탕으로 소프르웨어 세계에 구현된 구체적인 실체

-즉, 객체를 소프트웨어에 실체화하면 그것을 인스턴스라 함

-실체화된 인스턴스는 메모리에 할당됨.

-객체에 포함된다고 볼 수 있다.

실체 실체 객체 그러죠? 메모리에 할당되는 객체?로 알면될까요??

모든 Vue 앱은 이 인스턴스로 부터 시작됩니다^^ 가이드 한 번만 읽고 오세용 (솔직히 읽어도 잘 모르겠다)

과정을 풀어보자면...

1. <div> id가 app이고, 나는 #app 영역에 vue의 모든 문법을 쓸거고, 컴포넌트도 만들거다.

그러니까 그 #app을 new Vue({ }) 안에 el로 선언해야합니다.

2. 그리고 컴포넌트를 넣어야 하니까 컴포넌트를 먼저 변수로 선언합니다.

template : 해서 선언해줍니다.

3. cmp를 #app에서 사용하기 위해 vue에 등록해줄겁니다. 그러기 위해서 영역을 만듭니다.

4. cmp변수를 html에 넣기위해 components : {   } 라고 작성했던 내부에 넣어줍니다.

여기서 'my-cmp' 는 html에 <my-cmp>로 사용이 되는 이름이고, cmp는 template를 만들어줬던 변수이름입니다!

결과는  

위의 예제로 봤을 때 ..

컴포넌트를 넣을 영역은 el로 선언

html에 내용을 넣을 것을 js 변수로 선언(cmp)

js변수를 html에서 컴포넌트로 쓰려면 components에 선언

저기서 my-cmp는 #app 내부면 얼마든지 계속 쓸 수 있어요~