====== 프로젝트 ====== Single Page Application을 SPA 라고 부른다. .. note:: 이 문서는 IDE에서 제공되는 SPA 프로젝트를 기준으로 작성되었으며, Webpack을 통한 개발환경이 익숙하지 않은 사용자에게 필요한 최소한의 내용에 초점을 맞추어 작성하였다. 각각에 대한 전체 가이드 문서는 **해당 버전의 공식 문서**\ 를 통해 확인하여야 한다. 프로젝트 생성 ============= 1. **IDE 실행 (Version 3.0.13 이상)** .. image:: ../_static/spa/project/1.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 4.50278in 2. **프로젝트 생성 위저드 실행 (기존과 생성 방법과 동일)** .. image:: ../_static/spa/project/2.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 3.46067in 프로젝트 구조 ============= 각각의 폴더/파일에 대한 설명 .. image:: ../_static/spa/project/3.png :width: 3.15354in :height: 7.46063in **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 파일이 안보이는 경우** .. image:: ../_static/spa/project/4.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 2.54724in :height: 4.68504in project Explorer 옆 filter를 클릭한 후 .\* resources를 체크 해제 스크립트(커맨드) 실행 ===================== - **기본 npm 제공 커맨드** +----------------------+----------------------+----------------------+ | 커맨드 | 설명 | 비고 | +======================+======================+======================+ | npm -v | npm 버전 확인 | | +----------------------+----------------------+----------------------+ | npm install | npm 패키지를 설치 | ht | | | | tps://www.npmjs.com/ | | | 미 입력시 | | | npm i | package.json의 | | | | 패키지를 참고하여 | | | | 설치 | | | | | | | | 플래그 | | | | | | | | -g: 글로벌(전역 설치 | | | | | | | | -D: 개발용 설치 | | +----------------------+----------------------+----------------------+ | npm update | npm 패키지를 | | | | 업데이트 | | +----------------------+----------------------+----------------------+ | npm remove | npm 패키지 삭제 | | +----------------------+----------------------+----------------------+ - **package.json에서 실행 가능한 스크립트 확인** .. image:: ../_static/spa/project/5.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 3.58472in +-----------------+------------------------+------------------------+ | 커맨드 | 설명 | 비고 | +=================+========================+========================+ | 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에서는 스크립트 실행 버튼 제공 .. image:: ../_static/spa/project/6.png :width: 6.26806in :height: 4.41181in ================ ================= ============== 버튼 명 커맨드 비고 ================ ================= ============== 설치(install) npm install 운영 빌드 npm run build 개발 빌드(watch) npm run start 그 외 npm run 버튼 동적 생성 ================ ================= ============== **주의! 최초 1회 이상 npm install을 통해 패키지를 설치하여야 커맨드가 정상적으로 동작합니다.** .. image:: ../_static/spa/project/7.png :alt: 텍스트, 구급 상자, 표지판, 클립아트이(가) 표시된 사진 자동 생성된 설명 :width: 5.26389in :height: 2.95833in **빌드 전 (최초 상태)** .. image:: ../_static/spa/project/8.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 3.22472in :height: 1.61236in **빌드 후** .. image:: ../_static/spa/project/9.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 3.27985in :height: 2.03371in Webpack ======= .. image:: ../_static/spa/project/10.png :width: 6.26806in :height: 3.2367in - **소개** .. 자바스크립트 정적 모듈 번들러(Static Module Bundler) - **역할** 1) 모듈화(import/export) 2) 트랜스 파일링 및 번들링 3) 소스 최적화 - **설명** 의존성 그래프 시작점 파일(.js)을 통해 import되는 파일을 추적하여 해당 파일들을 하나의 js파일로 번들링 제공 +----------+--------------------------------------+------------------+ | **항목** | **설명** | **비고** | +==========+======================================+==================+ | Entry | 의존성 그래프 시작점 | | +----------+--------------------------------------+------------------+ | Output | publicPath: 번들된 리소스가 참조할 | Chunk란, | | | contextRoot 예: /res/www) | | | | | 코드 또는 모듈을 | | | path: 생성될 번들링 결과물 위치 | | | | | 묶은 하나의 단위 | | | filename: 생성될 파일 명 | | | | | | | | chunkFilename: chunk된 파일 이름 | | | | | | | | filename 내 치환 목록 예: | | | | js/[name].js | | | | | | | | =========== ================== | | | | 속성 설명 | | | | =========== ================== | | | | name Chunk 이름 | | | | hash Hash 값 | | | | contenthash 내용에 따른 hash값 | | | | =========== ================== | | +----------+--------------------------------------+------------------+ | 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 | 번들링시 css | | | | | | xtract-plugin | 소스를 .css | | | | | | | 파일로 만들어 | | | | | | | 처리하는 경우 | | | | | | | 사용 | | | | | +---------------+---------------+ | | | | | html-w | .html 파일 | | | | | | ebpack-plugin | 사용시 사용 | | | | | | | | | | | | | | 1) template: | | | | | | | 생성할 html | | | | | | | 파일 템플릿 | | | | | | | | | | | | | | 2) filename: | | | | | | | 생성된 html | | | | | | | 파일 이름 | | | | | | | | | | | | | | 3) | | | | | | | c | | | | | | | hunks(Array): | | | | | | | 적용할 chunk | | | | | +---------------+---------------+ | | +----------+--------------------------------------+------------------+ | Mode | 배포/개발용 처리 | webpack4이상 | | | | | | | =========== ====================== | | | | value 설명 | | | | =========== ====================== | | | | production 운영용(난독/압축 지원) | | | | development 개발용 | | | | =========== ====================== | | +----------+--------------------------------------+------------------+ - **전역 객체 선언** .. 1) ProvidePlugin을 통한 전역 객체 선언 build/webpack.common.js 파일 내 선언 .. code-block:: javascript plugins: [ new webpack.ProvidePlugin({ '_': 'lodash', 'moment': 'moment', })] 2) DefinePlugin을 통한 전역 객체 선언 ====== ================== ==== 항목 경로 비고 ====== ================== ==== 배포용 config/prod.env.js 개발용 config/dev.env.js ====== ================== ==== 해당 플러그인은 webpack이 빌드되는 과정에서 inject가 일어나기때문에 디버그 콘솔 내에서 참조가 불가능하다. 때문에 **외부로 노출을 원하지 않는 변수**\ 를 작성한다. (예: 서비스 코드 등) 3) 코드 내 선언 .. code-block:: javascript window.Global = {} - **참조** 프로젝트 내에서는 webpack4 적용 ======== ========================== ==== 항목 링크 비고 ======== ========================== ==== Webpack4 https://v4.webpack.js.org/ Webpack https://webpack.js.org/ ======== ========================== ==== Babel ===== .. image:: ../_static/spa/project/11.png :width: 2.875in :height: 1.30556in - **소개** 최신 버전의 자바스크립트 코드를 미지원 브라우저에서도 동작하는 ES5 이하의 코드로 트랜스파일링 지원 ES 지원 유무 확인(https://caniuse.com/) - **Babel 설정** .babelrc 또는 babel.config.json 작성 ======= ========================================= ==== 속성 설명 비고 ======= ========================================= ==== presets babel 지원 범위에 대한 설정 preset-env: 대부분 지원하는 일반적인 세팅 targets: 지원할 브라우저 범위 plugins 적용할 babel 플러그인 선언 ======= ========================================= ==== - **polyfill 적용방법** main.js 내 .. code-block:: javascript 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 ====== .. image:: ../_static/spa/project/12.png :width: 1.45833in :height: 1.29167in - **소개** 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 수정 가능한 에러는 수정 ====== ======================= - **예시** 표시만 하는 경우, .. code-block:: bash eslint -c .eslintrc –ext .js,.vue src/ 수정 가능한 에러는 수정하고 표시 할 경우 예시, .. code-block:: bash 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/ ========== ======================================== ====