vue.js 기초- 인스타그램 만들어보기 01 (코딩애플 세미나 후기)

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

 

기초 셋팅

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

• VSCode 에디터 설치

• Yarn 설치

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

vscode 에디터 프로젝트 여는 법

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

yarn 설치

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

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

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

npm install -g yarn

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

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

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

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

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

yarn global add @vue/cli npm install -g @vue/cli

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

vue create okayoon

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

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

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

프로젝트 시작하기

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

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

• 터미널을 열어줍니다.

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

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

yarn serve npm run serve

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

• 파란색 글씨가 보이니 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로 항상 반대 값을 넣어주게 됩니다.