프로젝트¶

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 <package> npm i <package>	npm 패키지를 설치 <package> 미 입력시 package.json의 패키지를 참고하여 설치 플래그 -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)

역할
1. 모듈화(import/export)
2. 트랜스 파일링 및 번들링
3. 소스 최적화
설명

의존성 그래프 시작점 파일(.js)을 통해 import되는 파일을 추적하여 해당 파일들을 하나의 js파일로 번들링 제공

항목

설명

비고

Entry

의존성 그래프 시작점

Output

publicPath: 번들된 리소스가 참조할 contextRoot 예: /res/www)

path: 생성될 번들링 결과물 위치

filename: 생성될 파일 명

chunkFilename: chunk된 파일 이름

filename 내 치환 목록 예: js/[name].js

속성	설명
name	Chunk 이름
hash	Hash 값
contenthash	내용에 따른 hash값

Chunk란,

코드 또는 모듈을

묶은 하나의 단위

Loader

test: 로딩할 파일 지정

use: 적용할 로더 설정

로더 종류

이름	설명
babel-loader	Babel을 통한 트랜스파일링 시 사용(.js 파일 처리)
url-loader	Binary File을 base64로 변환 시
file-loader	Binary File 처리 시
style-loader	css 소스를 head 태그내 style태그로 삽입 처리 시
css-loader	.css 파일 처리 시
vue-loader	.vue 파일 처리 시

Plugins

로더에서의 처리 이후 추가 작업

플러그인 종류

이름

설명

mini-css-e xtract-plugin

번들링시 css 소스를 .css 파일로 만들어 처리하는 경우 사용

html-w ebpack-plugin

.html 파일 사용시 사용

1) template: 생성할 html 파일 템플릿

2) filename: 생성된 html 파일 이름

3) c hunks(Array): 적용할 chunk

Mode

배포/개발용 처리

value	설명
production	운영용(난독/압축 지원)
development	개발용

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

babel 지원 범위에 대한 설정

preset-env: 대부분 지원하는 일반적인 세팅

targets: 지원할 브라우저 범위

plugins

적용할 babel 플러그인 선언

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)
extends	Rule 확장 선언
plugins	사용할 plugins 선언
globals	전역 객체 선언
parser	사용되는 parser
parserOption	Parser 옵션
settings	세팅 환경 Import/resolve 내에 webpack 선언 필요	소스 참고
rules	적용할 rule 선언

커맨드 명령어

플래그	설명
-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/

항목	링크	비고
Webpack4	https://v4.webpack.js.org/
Webpack	https://webpack.js.org/