¶ 프로젝트
Single Page Application을 SPA 라고 부른다.
Note
이 문서는 IDE에서 제공되는 SPA 프로젝트를 기준으로 작성되었으며,
Webpack을 통한 개발환경이 익숙하지 않은 사용자에게 필요한 최소한의 내용에 초점을 맞추어 작성하였다.
각각에 대한 전체 가이드 문서는 해당 버전의 공식 문서를 통해 확인하여야 한다.
¶ 프로젝트 생성
- IDE 실행 (Version 3.0.13 이상)
- 프로젝트 생성 위저드 실행 (기존과 생성 방법과 동일)
¶ 프로젝트 구조
각각의 폴더/파일에 대한 설명
frontend : node 프로젝트(webpack)
/build: 빌드 관련 폴더
clean.js: npm run clean (www폴더 하위 파일 삭제 로직) 관련
webpack.common.js: webpack 공통 설정
webpack.dev.js: webpack 개발용 설정
webpack.prod.js: webpack 배포용 설정
/config: 설정 관련
index.js: webpack 설정 값 세팅
dev.env.js: 개발용 환경 전역 변수
prod.env.js: 배포용 환경 전역 변수
/src: 작업공간
/aseets(static): 정적 웹소스 (css, font, img 등)
/common: 공통(전역) 소스 파일
$mcore.js: MCore helper
global.component.js: 전역 컴포넌트 선언
/components: 컴포넌트 폴더
/router: vue-router 관련 설정
/store: vuex 관련 설정
/views: view 폴더
App.vue : 루트(root) 컴포넌트
main.js: webpack 의존성 시작점
plugin.js: vue custom 플러그인
index.html: 생성될 html 템플릿
.babelrc: babel 관련 설정
.eslintignore: eslint 제외 설정
.eslint: eslint 관련 설정
package.json: node 프로젝트 정보
package-lock.json: 프로젝트 패키지 의존성 트리 정보
++ install 시
node_modules: 설치된 패키지 모듈 폴더
.babelrc 파일이 안보이는 경우
project Explorer 옆 filter를 클릭한 후
.* resources를 체크 해제
¶ 스크립트(커맨드) 실행
- 기본 npm 제공 커맨드
| 커맨드 | 설명 | 비고 |
|---|---|---|
| npm -v | npm 버전 확인 | |
npm install npm i <package> |
npm 패키지를 설치 <package> 미 입력시 플래그 -g: 글로벌(전역 설치 -D: 개발용 설치 |
ht tps://www.npmjs.com/ |
| npm update <package> | npm 패키지를 업데이트 |
|
| npm remove <package> | npm 패키지 삭제 |
- package.json에서 실행 가능한 스크립트 확인
| 커맨드 | 설명 | 비고 |
|---|---|---|
| npm run start | 개발용 빌드 시 사용, 파일 변경이 감지되면 |
종료 시, ctrl + c 입력 |
| npm run clean | assets/res/www/ 하위의 빌드 된 파일을 |
|
| npm run build | 운영용 빌드 시 사용, 난독화 및 압축을 디버깅 소스를 포함하지 |
|
| npm run lint | Eslint 설정에 따른 경고 출력 |
|
| npm run lintfix | (주의!) 수정이 가능한 Eslint 설정에 따른 |
예) 공백 또는 줄바꿈 규칙은 자동으로 수정 |
- application.xml에서 커맨드 실행
IDE에서는 스크립트 실행 버튼 제공
| 버튼 명 | 커맨드 | 비고 |
|---|---|---|
| 설치(install) | npm install | |
| 운영 빌드 | npm run build | |
| 개발 빌드(watch) | npm run start | |
| <command> 그 외 | npm run <command> | 버튼 동적 생성 |
주의! 최초 1회 이상 npm install을 통해 패키지를 설치하여야 커맨드가 정상적으로 동작합니다.
빌드 전 (최초 상태)
빌드 후
¶ Webpack
- 소개
자바스크립트 정적 모듈 번들러(Static Module Bundler)
-
역할
- 모듈화(import/export)
- 트랜스 파일링 및 번들링
- 소스 최적화
-
설명
의존성 그래프 시작점 파일(.js)을 통해 import되는 파일을 추적하여 해당
파일들을 하나의 js파일로 번들링 제공
| 항목 | 설명 | 비고 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Entry | 의존성 그래프 시작점 | |||||||||||||||
| Output | publicPath: 번들된 리소스가 참조할 path: 생성될 번들링 결과물 위치 filename: 생성될 파일 명 chunkFilename: chunk된 파일 이름 filename 내 치환 목록 예:
|
Chunk란, 코드 또는 모듈을 묶은 하나의 단위 |
||||||||||||||
| Loader | test: 로딩할 파일 지정 use: 적용할 로더 설정 로더 종류
|
|||||||||||||||
| Plugins | 로더에서의 처리 이후 추가 작업 플러그인 종류
|
|||||||||||||||
| Mode | 배포/개발용 처리
|
webpack4이상 |
- 전역 객체 선언
-
ProvidePlugin을 통한 전역 객체 선언
build/webpack.common.js 파일 내 선언
plugins: [
new webpack.ProvidePlugin({
'_': 'lodash',
'moment': 'moment',
})]
-
DefinePlugin을 통한 전역 객체 선언
항목 경로 비고 배포용 config/prod.env.js 개발용 config/dev.env.js 해당 플러그인은 webpack이 빌드되는 과정에서 inject가 일어나기때문에
디버그 콘솔 내에서 참조가 불가능하다.
때문에 외부로 노출을 원하지 않는 변수를 작성한다. (예: 서비스 코드 등)
-
코드 내 선언
window.Global = {}
-
참조
프로젝트 내에서는 webpack4 적용
항목 링크 비고 Webpack4 https://v4.webpack.js.org/ Webpack https://webpack.js.org/
¶ Babel
- 소개
최신 버전의 자바스크립트 코드를 미지원 브라우저에서도 동작하는 ES5
이하의 코드로 트랜스파일링 지원
ES 지원 유무 확인(https://caniuse.com/)
- Babel 설정
.babelrc 또는 babel.config.json 작성
| 속성 | 설명 | 비고 |
|---|---|---|
presets plugins |
babel 지원 범위에 대한 설정 preset-env: 대부분 지원하는 일반적인 세팅 targets: 지원할 브라우저 범위 |
- polyfill 적용방법
main.js 내
import ‘@babel/polyfill’;
또는 사용할 함수에 대한 polyfill를 설치하여 import 한다.
- 참조
| 항목 | 링크 | 비고 |
|---|---|---|
| Babel | https://babeljs.io/docs/en/usage | Babel Document |
| CanIUse | https://caniuse.com/ | 버전별 ES 지원 유무 |
| Browserlist | https://github.com/browserslist/browserslist | 브라우저 범위 작성시 |
¶ ESLint
- 소개
Javascript 내에서 에러가 있는 코드에 대해 표시한다. (선택적으로 사용)
런타임 과정에서 발견할 수 있는 에러를 미리 표시해주거나 전반적인
코딩스타일을 지정하여 일관화 가능
- ESLint 설정
.eslintignore : lint 제외할 파일 및 폴더
.eslintrc: eslint 설정 파일
| 속성 | 설명 | 비고 |
|---|---|---|
env |
실행되는 환경 (ex: nodejs, browser) |
|
settings rules |
세팅 환경 Import/resolve 내에 webpack 선언 필요 |
소스 참고 |
- 커맨드 명령어
| 플래그 | 설명 |
|---|---|
| -c | 설정파일 경로 |
| -ext | Lint할 파일 확장자 |
| --fix | 수정 가능한 에러는 수정 |
- 예시
표시만 하는 경우,
eslint -c .eslintrc –ext .js,.vue src/
수정 가능한 에러는 수정하고 표시 할 경우 예시,
eslint -c .eslintrc -ext .js,.vue src/ --fix
- 참조
| 항목 | 링크 | 비고 |
|---|---|---|
| 설정 관련 | https://eslint.org/docs/user-guide/configuring/ | |
| 룰 관련 | https://eslint.org/docs/rules/ |
¶ Vue
- 소개
가상돔을 사용한 SPA 프레임워크로 2버전대를 적용하고 있으며, 아래의
라이브러리를 사용한다.
| 항목 | 설명 | 비고 |
|---|---|---|
| Vue | SPA 프레임워크 |
|
| Vue-router |
컴포넌트 맵핑 관련 라이브러리 | |
| Vuex | 상태관리패턴 라이브러리 |
- 공식 문서
| 항목 | 링크 | 비고 |
|---|---|---|
| Vue | https://kr.vuejs.org/v2/guide/index.html | |
| Vue-router | https://router.vuejs.org/ | |
| Vuex | https://vuex.vuejs.org/ |