14 마무리

source: categories/study/vue-beginner-lv1/vue-beginner9-05.md

14.1 수업 정리 및 향후 학습 방향 안내

  • Vue.js 공식 문서 : 한국어보단 원문(영어)으로 보시는 것을 추천드립니다. 한글은 누군가 해석해놓은 것이기 때문에 원문 내용을 조금 훼손시키는 경우도 있고, 두번째론 이러한 공식문서는 거의 매일같이 업데이트되는데, 그런 업데이트되는 공식문서 내용들을 보통 커뮤니티 같은 곳에서 자원해서 번역을 하는건데, 그렇기 때문에 시간차가 있을 수 있습니다. 원문을 보시면 항상 최신 내용, 최신 코드를 보실 수 있습니다.
  • Vue.js 스타일 가이드 : 코드를 어떤식으로 작성해야되는지 vue.js core팀에서 정리해놓은 내용입니다. 올바르고 더 효율적인 코드 작성을 위해 나름대로의 규칙을 정리해서 올렸다고 보시면 됩니다. 이 스타일 가이드도 꼭 정독을 해보시는걸 추천드립니다. 스타일 가이드는 한국어로 보셔도 괜찮을 거 같습니다.
  • Vue.js Cookbook : 공식문서 이외에 실제로 구현하면서 부딪히는 실용적인 문법들이라던지, 실용적인 고민들, 그런 것들에 대해서 정리를 해둔 곳입니다. 여기있는 내용들도 좋은 내용들이 많기 때문에 꼭 읽어보시는 것을 추천드립니다.
  • Vuex 공식 문서 : vue.js 생태계 라이브러리 중 하나인 vuex.
  • VueRouter 공식 문서 : vue.js 생태계 라이브러리 중 하나인 VueRouter.
  • Vue CLI 공식 문서 : vue.js 생태계 라이브러리 중 하나인 Vue CLI.

이번 강의를 통해 배운 내용들입니다.

  • Reactivity: vue.js가 추구하는 중심 사상이자 핵심 기능이라고 보시면됩니다. 데이터에 대한 변화를 vue에서 감지해서 화면에 바로 반영하는 것부터 화면 조작에 대한 API라던지 속성 들을 vue에서 제공하고 있습니다. 예전엔 직접 처리를 했던 웹 개발 부분을 라이브러리가 자동화해주고 라이브러리에서 더 편하게 관리해주는 것이 Reactivity의 핵심이라고 보시면 됩니다.
  • 인스턴스: vue를 개발할 때 필수로 생성해야되는 단위입니다. 인스턴스 안에 옵션값들을 정의함으로써 화면을 조작해나갈 수 있습니다.
  • 컴포넌트: 화면의 영역을 구분해서 개발해나가는 방식. 컴포넌트 개발이 현재 웹 프레임워크, 프론트엔드에서 가장 중요한 개념이라고 보시면됩니다. 대부분의 UI가 컴포넌트 단위로 개발이 되고있고, 컴포넌트 기반으로 개발했을 때,.. 실제로 서비스 개발하시면서 많이 느끼는 부분이, 컴포넌트로 개발했을 때 재사용성이 있는지 없는지에 대한 부분입니다. 재사용성을 고려하여 컴포넌트 개발을 하시면됩니다.
  • 컴포넌트 통신: 컴포넌트로 개발했을 때 데이터의 흐름을 제어하기위한 데이터 규칙입니다. 데이터 규칙에 제한을 둠으로써 여러명의 개발자가 같이 개발을해도 서로 같이 데이터에 대한 흐름을 예측할 수 있다라는 것이 바로 컴포넌트 통신입니다.

    • props: 상위 컴포넌트에서 하위 컴포넌트로 통신하는 방법. props를 내리는 것.
    • event emit: 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방법. event를 올리는 것.
  • HTTP 통신 라이브러리 (axios): axios라는 라이브러리가 가장 대중적으로 사용되는 라이브러리입니다. axios를 통해 개발하실 때 axios github 레포에서 API 관련 설명들을 보시면됩니다.
  • 템플릿 문법: 화면을 조작하기위한 vue의 문법을 의미합니다.

    • 데이터 바인딩: 앞에서 말씀드린 Reactivity와 비슷한 개념입니다. 데이터의 변화에 따라서 바로 화면에 반영하는 것이 Reactivity이자 그 데이터를 화면에 연결해 출력하는 것이 data binding입니다.
    • 뷰 디렉티브(v-): 화면을 조작하기 위해서 뷰가 추가적으로 제공하는 문법이라고 보시면 될거같습니다.
  • Vue CLI: vue 프로젝트를 생성하실 때 명령어를 활용해 생성하도록 도와주는 도구입니다.
  • 싱글파일 컴포넌트(.vue): .vue 파일이 어떻게 돌아가는지는 웹팩 공식문서를 참고하시면 좋을 거 같습니다. 웹팩의 기능 중에 vue-loader라고 하는 로더가 이런 싱글 파일 컴포넌트 내용들을 컴파일해서 브라우저가 이해할 수 있는 형태로 바꿔줍니다.