E-commerce Vanila JS [3편] 벡앤드 설정

1 벡앤드 구조 

1) backend/폴더 생성하기

- root\backend\

 

 

2) npm init 실행하기

- root\> npm init

 

 

3) express 설치하기

- root\> npm install --save express

 

root\>express설치

 

 

4) Cors 설치하기

- root\> npm install --save cors

root\> cors설치

 

5) data.js 복사하기

- \frontend\src\data.js 파일 복사한 뒤, backend\폴더 아래 붙여넣기

- \frontend\src\data.js 파일은 삭제하기

- 아래와 같이 `module exports`로 변경하기

 

module.exports ={     products: [         {    // 중략...

[ backend/data.js ]

 

 

6) server.js 생성하기

- root\backend\server.js

 

const express = require('express');     const data = require('./data.js');     const app = express();     const cors = require('cors');     app.use(cors());     app.get('/api/products', (req, res)=>{         res.send(data.products);     });     app.listen(5000, ()=>{         console.log("server at http//localhost:5000")     });

[ server.js ]

 

 

7) package.json수정하기

 - root\package.json 파일에서 start항목 추가하기

 

root\package.json

 

 

8) 서버 테스트하기

 

 

- root\> npm start 실행한 뒤, localhost:5000/api/products 접속시 아래와 같은 data.js파일 확인하기

 

 

 

 

2 프런트앤드 수정

1) HomeScreen.js 수정하기

- root\frontend\src\screens\HomeScreen.js 에서 data.js모듈을 삭제한다.

 

data모듈 삭제

 

- data는 fetch를 활용해서 'localhost:5000/api/products' 경로의 json파일을 이용한다. 그러므로 임시로 생성한 data.js파일은 더이상 필요없다. HomeScreen.js파일을 아래와 같이 수정한다.

 

const HomeScreen = {       render: async() => {           const response = await fetch("http://localhost:5000/api/products",{               headers:{                   'Content-Type': 'application/json',               },           });              if(!response || !response.ok){ //fetch로 데이터 불러오기에 실패한 경우               return '<div> Error in getting Data </div>'           }                         const products = await response.json(); //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\screens\HomeScreen.js ]

 

- 위의 코드에서 async-await구문을 사용하는 이유는, 마크업 구문(html태그) 랜더링을 위한 서버의 데이터가 필요하기 때문이다. 서버의 데이터가 없는 상태에서 return이후의 구문이 실행된다면 데이터가 없기 때문에 에러가 발생한다. 같은 원리에서 app.js 역시 수정이 필요하다.

 

 

2) app.js 수정하기

- 각 라우터의 랜더링은 우선순위가 중요하기 때문에 아래와 같이 async-await 구문을 추가해준다.

 

[ root\frontend\src\app.js ]

 

 

* 포스팅 파일

blogTest_backendStructure.zip

2.83MB