환경설정 및 템플릿 구조

환경설정

- VS code

- Node.js

- NPM

- cmder

- Vue-cli Package

 

CLI (command line interface)

: 리눅스 쉘 프로그램. 즉 리눅스 터미널과 유사하게 기본 명령어를 사용할 수 있는 터미널을 제공하는 프로그램.

 

(win) cmder

(mac) iterms2

 

NPM (Node Package Manager)

Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램.

 

=> npm 설치 후 cmder에서 다음과 같이 명령어 작성하여 vue-cli 패키지를 다운로드할 수 있음.

 

 

파일 연결 구조

큰 틀은 index.html  - main.js - App.vue

이고

main.js 에는 여러 구현 가능한 기능(config.js, util.js, axios 등) 들을 추가할 수 있음.

App.vue 밑에는 컴포넌트들의 트리가 만들어진다고 생각하면 됨.

 

main.js 에 router가 들어있음.

* 라우터란, (route + er) 경로 지정 장치.

 

index.html 는 main.js 안에 있는 라우터랑 소통.

 

 

Bundle

번들링 : 프로젝트의 자원(CSS, JS)을 모아 덩어리(bundle)로 만듦

=> 하나의 파일로 앱에 서비스를 하게 되는 것.

 

빌드 : 이미 번들링하는 작업은 CLI 명령어 만들어져 있음, 그게 빌드임

- npm run build 

- 에셋(이미지, js, css) - > 번들링 -> /dist/ 폴더에 저장됨 (distribution 배포의 약인 듯)

- 호스팅 서버에는 /dist/만 서비스하면 됨.

=> 즉 배포할 파일들을 자동생성해주는 기능으로 보임.

 

JSON 파일

JavaScript Objet Notation 파일.

일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식.

클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록

일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있음.

 

XML : 웹 초기부터 사용되어온 양식. 간결하고 통일된 양식인 JSON이 XML 대체하는 중.

그래도 표면적으로 W3C 표준은 XML이라는...