1 웹팩 :: 간결한 코드
웹팩을 설치하는 이유는 전체 코드를 압도적으로 줄일 수 있기 때문이다. 이번 포스팅부터 개발자 모드로 진행했던 'live-server' npm모듈을 삭제하고, 웹팩을 사용해보자. 웹팩 설치는 /frontend 폴더에서 진행한다.
1) 설치
- root\frontend\> npm install --save-dev webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0
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파일에 내용이 자동으로 채워짐)
|
<!DOCTYPE html> <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</title>
</head>
<body>
<div class="grid-container">
<header>
<div class="brand">
<a href="/#/">Webdoli</a>
</div>
<div>
<a href="/#/signin">Sign-In</a>
<a href="/#/cart">Cart</a>
</div>
</header>
<main id="main-container">
</main>
<footer>
All rights reserved @2021
</footer>
</div>
<script src="main.js"></script>
</body>
</html>
|
[ 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/products",
headers:{
'Content-Type': 'application/json',
},
});
if( !response || response.statusText !== 'OK'){ //데이터 응답 실패
return '<div> Error in getting Data </div>'
}
const products = await response.data; //fetch Data 저장
return `
<ul class="products">
${products.map(product =>`
<li>
<div class="product">
<a href="/#/product/${product._id}">
<img src="${product.image}" alt="${product.name}">
</a>
<div class="product-name">
<a href="/#/product/1">
${product.name}
</a>
</div>
<div class="product-format">
${product.format}
</div>
<div class="product-price">
$ ${ product.price}
</div>
</div>
</li>
` ).join('\n')}
`;
},
}
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
|
// 중략...
"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방식 사용
products: [
{
_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
'웹개발 자료실 > No프레임워크 쇼핑몰제작Code' 카테고리의 다른 글
| E-commerce Vanila JS [6편] Cart 제작 (0) | 2021.12.08 |
|---|---|
| E-commerce Vanila JS [5편] 랭킹, 상세페이지 제작 (1) | 2021.12.06 |
| E-commerce Vanila JS [3편] 벡앤드 설정 (0) | 2021.12.03 |
| E-commerce Vanila JS [2편] 라우팅 기초 (0) | 2021.12.02 |
| E-commerce Vanila JS [1편] 폴더 구조 (0) | 2021.12.01 |
댓글