on
E-commerce Vanila JS [4편] 웹팩 & 바벨 & ESLint 적용
E-commerce Vanila JS [4편] 웹팩 & 바벨 & ESLint 적용
1 웹팩 :: 간결한 코드
웹팩을 설치하는 이유는 전체 코드를 압도적으로 줄일 수 있기 때문이다. 이번 포스팅부터 개발자 모드로 진행했던 'live-server' npm모듈을 삭제하고, 웹팩을 사용해보자. 웹팩 설치는 /frontend 폴더에서 진행한다.
1) 설치
- root\frontend\> npm install --save-dev [email protected] [email protected] [email protected]
웹팩 설치
2) live-server삭제
- npm uninstall live-server
3) frontend/package.json 시작 변경
- "start" : "live-server src --verbose" 삭제
- "start" : "webpack-dev-server --content-base --open"
라이브서버 삭제 & 웹팩 설정
4) 웹팩으로 랜더링되는 파일 이동하기
- root\frontend\src\폴더에 있는 'index.html', 'style.css', 'images폴더'를 root\frontend\ 아래로 이동.
5) app.js 이름 변경
- root\frontend\src\폴더에 있는 'app.js'네이밍 변경 => 'index.js'
6) index.html수정
- head태그에 있는 script태그 제거
- 하단에 main.js 스크립트 추가(웹펙 실행후 main.js파일에 내용이 자동으로 채워짐)
< html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "style.css" > < title > JSAMAZONA < body > < div class = "grid-container" > < header > < div class = "brand" > < a href = "/#/" > Webdoli < div > < a href = "/#/signin" > Sign-In < a href = "/#/cart" > Cart < main id = "main-container" > < footer > All rights reserved @2021 < script src = "main.js" >
[ root\frontend\index.html ]
7) 서버 실행
- root\> npm start
8) axios 설치하기
- root\frontend\> npm install --save axios
9) HomeScreen.js 수정하기
- axios모듈 추가하기
- axios로 데이터 응답하기
import axios from 'axios' ; const HomeScreen = { render : async () => { const response = await axios ({ url : "http://localhost:5000/api/cgsources" , headers : { 'Content-Type' : 'application/json' , }, }); if ( ! response || response . statusText !== 'OK' ){ //데이터 응답 실패 return ' Error in getting Data ' } const cgsources = await response . data ; //fetch Data 저장 return ` ${ cgsources . map ( cgsource => ` ${ cgsource . name } ${ cgsource . format } $ ${ cgsource . price } ` ). join ( '
' ) } ` ; }, } export default HomeScreen ;
[ root\frontend\src\HomeScreen.js ]
10) 웹팩 실행테스트
- root\frontend\> npm start
2 Babel :: 구버전 자바스크립트 호환
1) babel 설치하기
- root\> npm install --save-dev @babel/core
- root\> npm install --save-dev @babel/cli
- root\> npm install --save-dev @babel/node
- root\> npm install --save-dev @babel/preset-env
2) babelrc 생성하기
- root\.babelrc
{ "presets" : [ [
"@babel/preset-env" , { "targets" :{ "node" : "current" } }
] ] }
[ root/.babelrc ]
3) nodemon설치하기
- root\> npm install -D nodemon
4) package.json 수정
- root\package.json
// 중략... "scripts" : { "start" : "nodemon --watch backend --exec babel-node backend/server.js" , "test" : "echo \" Error: no test specified \" && exit 1" },
// 중략...
[ root/package.json ]
5) \root> npm start 실행 & 테스트
- localhost:5000/api/products 접속해서 json파일 확인하기
6) server.js 수정하기
- require()방식의 모듈방식을 'import'로 변경하기
7) data.js 수정하기
- data.js파일도 최신 ES방식을 적용하기
export default { // modue. 제거하고 default방식 사용 cgsources : [ { _id : '1' , name : 'tree01 3d model' , category : 'Nature' , // 중략...
[ data.js ]
3 ESLint :: 문법 체크
* eslint는 설치하지 않더라도 프로젝트 진행과 무관함
1) 설치하기
- \root>npm install -D eslint
2) Visual Studio에서 EsLint 플로그인 설치
3) .eslint.rc.js 생성
- \root> .eslintrc.js
module . exports = { env : { browser : true , node : true , es2020 : true }, extends : [ 'airbnb-base', 'prettier' ], parserOptions : { sourceType : 'module' , ecmaVersion : 11 , },
rules : { 'no-console' : 0 , 'no-underscore-dangle' : 0 , 'no-nested-ternary' : 0 ,
'import/prefer-default-export' : 0 , }, }
[ root\.eslintrc.js ]
4) 「airbnb-base & eslint-config-prettier」 npm 설치하기
- \root> npm install -D eslint-config-airbnb-base eslint-plugin-import
- \root> npm install -D eslint-config-prettier
- 빨간 부분 모두 수정하기
5) 자바스크립트 오류체킹 관련 visual studio 설치목록
- javascript code snippets
- Prettier
- grammar injections
from http://webdoli.tistory.com/595 by ccl(A) rewrite - 2021-12-04 06:02:16