vue.js

사용자 인터페이스를 만들기 위한 진보적 프레임워크

Component기반 SPA(Single Page Application)를 구축가능

핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다.

Component

html + markup + css + js 파일로 진행 시 html구조가 복잡해지면서 관리가 힘들어지며 모듈 관리도 힘들어졌는데

Moder Front 라이브러리와 프레임 워크들은 컴포넌트를 도입하며 위 문제를 해결했다.

각 component들로 분리해 해당 페이지에서 조립하듯 끼워 맞추어 해당 View만 관리해 규모가 커져도 유연히 대처가 된다.

SPA (Single Page Application)

단일 페이지 어플리케이션, 하나의 html파일과 js파일로 최초 로딩 시 미리 로딩해 페이지 전환이 될 경우 페이지 전체가 로딩되는 것이 아닌 보여줘야 할 페이지 부분을 그려주며 페이지를 전환 같은 효과를 보여준다.

검색엔진이 해당 페이지를 크롤 했을 때 페이지가 그려지기 전이어서 텅빈 div태그만 노출하게 된다.

VUE-CLI

vue개발 환경 설정도구, 기본적 프로젝트 세팅을 해줘서 폴더 구조 고민, lint, build, 어떤 라이브러리로 구성할지, webpack설정, 등 고민을 덜 수 있다.

vue-cli 설치

yarn global add @vue/cli

vue-cli로 프로젝트 생성

vue create project-name

default와 Manually 조건이 있는데, Manually는 여러 필요한 라이브러리와 설정들을 추가 할 수 있다.

npm run serve시 에러가 뜬다면 package.json에 아래 코드를 추가 후 npm install을 다시 해보자.

"resolutions": {
  "ajv": "6.5.5"
},
"dependencies": {
  "ajv": "6.8.1",
},

yarn serve

.prettierrc

{
    "sami": false,
    "bracketSpacing": true,
    "singleQuote": true,
    "useTabs": false,
    "trailingComma": "none",
    "printWidth": 80
}

package.json