실습을 통한 Vue.js 학습

목차

1. 학습 배경

2. 학습 계획 및 일정

3. 학습 내용

4. 학습 후기

1. 학습 배경

• Final Project 개발 당시 , Vue 를 활용하여 화면단 구성에 아쉬움이 남았음
• Vue 이론을 탄탄하게 다시 공부하고, 여러가지 실습을 통해 익숙해지기
• 부트스트랩 적용, Rest API 활용 등

2. 학습 계획 및 일정

• 학습 첫째주 (3일간) : 환경 설정 및 Vue 이론에 대한 학습
  • 참고 사이트
    • Vue.js 공식 홈페이지 ( kr.vuejs.org)
    • Vue.js 입문서 - 프론트엔드 개발자를 위한 ( Captain Panyo) 블로그
• 학습 둘째주 (4일간) : 간단한 실습을 통하여 이론 학습 부분 적용
  • 게시판 CRUD
  • Todo List
  • 계산기 만들기

3. 학습 내용

• 웹팩 설치 (Webpack)

  • 웹팩이란? 뷰 컴포넌트를 자바 스크립트로 모듈화 하여 브라우저에서 실행 가능하도록 도와주는 프레임워크 , 로더 ,빠른 컴파일의 장점이 있다.

    1) npm install -g vue-cli
    2) vue init webpack vue-calculator
    -respond to the (y/n)
    3) cd vue-calculator
    4) npm run dev

• 게시판 CRUD 간단 구현

  • DB에 저장하는것이 아니라 배열에 저장한 방식사용

  • 라우터 부분 ( C + U, R ,D )

• Update부분은 따로 Vue 컴포넌트를 만들지않고 Create부분을 재사용.

     - /create/:contentId? (물음표를 넣음으로써 파라미터를 넣을때와 넣지않을때 구분가능)
  
     - index가 넘어가면 해당 index의 게시글 정보를 불러와서 수정페이지로 이동
  
     - index가 넘어가지 않으면 일반 첫 게시글 생성 페이지로 이동
  
       ```vue
       <template>
         <div>
         <input v-model ="writer" placeholder="글쓴이" /><br>
         <input v-model ="title" placeholder="제목" /><br>
         <textarea v-model ="content" placeholder="내용" /><br>
       <button @click ="write">작성</button>
         </div>  
       </template>
       <script>
       import data from '@/data'
       
       export default {
         name :'Create',
         data() {
           return{
             data : data,
             writer:"",
             title : "",
             content:""
           }
         },
         methods: {
           write(){
             this.data.push({
               writer:this.writer,
               title:this.title,
               content:this.content
             })
             this.$router.push({
               path:'/'
             })
           }
         }  
       }
       </script>
       ```
  
  - **Router와 Route 의 차이**
  
     - 

  

     - Router란 특정 페이지를 접근할때 접근할 페이지 정보와 주소를 설정할수 있는것
       Vue-router를 적용하게되면, $route 객체를 통해 브라우저에서 현재 url에 대한 정보를 가져올 수 있습니다. 
     - Router에서 Route를 설정한다고 보면된다.

• TodList 구현하기

  • 부트스트랩 적용
  • RestAPI 활용
    • todo api 제공해주는 사이트 사용
      

• 계산기 구현하기

  • mac 계산기 => Vue 를이용하여 CSS 구현

    

  • => 화살표 함수 적용

    일반적인 사용법
    새로운 함수 정의 방식으로 기존보다 더 짧은 코드로 선언할 수 있다는 장점이 있음.

    // 일반적인 자바스크립트 함수(ES5)
    function (인자) {
    	함수 로직
    }
    
    // 화살표 함수(ES6)
    (인자) => {
    	함수 로직
    }

• `` (백틱)을 이용하여 템플릿 스트링 적용 (javascript)

  console.log("Hello " + a + " I'm " + b + " year's old")

  보는것과 같이 띄어쓰기도 일일이 해야하고 +로 이어줘야 하므로 번거롭다.
  하지만 ES6는 아주 편하게 할 수 있음.

  console.log(`Hello ${a} I'm ${b} year's old`)

  이처럼 ``에 넣어주고 변수는 ${}`사이에 넣어주면 위와 같은 결과를 얻을 수 있다.
  1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있다!

  • 단일 문자열로 연결

  this.current = this.current + number; 	// 일반적인 String append 방법
  
  this.current = `${this.current}${number}`;

4. 학습후기

• vue 수업에서 배우지 못한 심화 부분을 학습할수 있었고 적용할수 있었다.
• 다양한 실습프로젝트를 통해 vue에대한 흥미가 생겼음
• 공부하면서 알게 된 유용한 블로그나 유튜브 채널 공유
  • opentutorials - vue.js 기초다지기 https://www.opentutorials.org/module/3859/23240 => vue webpack 설치해서 초기 설정하는것부터 vue 실습 예제 존재
  • freeCodeCamp.org 유튜브 채널 : vue 간단실습 따라하기 좋음 (외국 개발자)
  • 개린이르라나 유튜브 채널 : vue 외에 프론트엔드 자료 동영상 강의