[React/Node] 마켓컬리 클론코딩 7 - node.js express 연결

프론트엔드의 가장 기본적인 부분들을 만들어놨기 때문에 이제는 DB의 연결에 도움을 줄 백엔드를 생성하려고 한다.

 

초기에는 java spring를 이용해서 해볼 생각도 했지만, 아직 배우지 않은 프레임워크를 사용하기 보단 이미 익숙한 프레임워크와 언어로 제작을 하고, 손도 못대본 쿠키나 세션 등을 다뤄보았으면 한다. (파일의 구조나 코드들의 업그레이드 역시 신경써보려고 한다.)

 

• express 연결

이미 사용한 경험이 있는 express를 이용할 것이다.

기존에는 index.js라는 한 파일안에 다 모아두었었는데, 이번에는 데이터량이 많기도 해서 관리가 어려울 것 같아 분리시켜보았다.

 

(전부 server폴더 내부의 파일이다.)

<index.js>

const express = require('express');
const app = express();
const cors = require('cors');
const PORT = process.env.PORT || 8000;
const router = require('./router/routes');

app.use(cors());
app.use(express.json());

app.use('/api', router);

app.listen(PORT,()=>console.log(`port: ${PORT}`));

 

 

<routes.js>

const express = require('express');
const router = express.Router();

const getItemList = require('../handlers/itemHandler');

router.get('/item', getItemList);

module.exports = router;

 

 

<itemHandler.js>

const items = require('../elements/items.js');

const getItemList = (req, res) => {
    res.json(items);
};

module.exports = getItemList;

 

 

<items.js>

const items = [
    {
        id: 1,
        title: "[추천특가][] ****** 1L (대용량)",
        price: "29,000",
        discount: "65",
        disc_price: "9,900",
        src: "https://product-image.kurly.com/cdn-cgi/image/fit=crop,width=360,height=468,quality=85/product/image/1c44e530-b055-4c6c-beaa-d842c40c0613.jpg"
    },
    ...
];


module.exports = items;

 

 

이 라우터 기능이 분할을 가능하게 해준다.

기능만 설명하자면, router객체는 index.js파일에서 '/api'경로로 시작되는 모든 요청을 관리한다.

예를 들어, '.../api/item' 이라는 경로로부터 요청이 들어오면 /api 하위에 있는 routes.js파일에서 '/item' 경로와 일치하는 핸들러를 동작시키는 것이다.

 

간단해 보이는 과정이기는 하지만, 두가지 문제가 겹쳐 오래 헤맸다.

 

1. 서버와 클라이언트 간의 포트 값이 달라서 발생하는 cors 에러

2. Node.js의 환경에 대한 이해

 

1 >> 기존에는 한개의 파일로 백엔드를 완성시켰다보니 이번처럼 여러 파일로 분할된 형태에서 어느 곳에 cors를 적용시켜야할 지 몰랐다. 사실 생각해보면 그냥 메인인 파일에 적용시키면 되는 문제였다.

 

2 >> items.js파일은 기존에 있던 WeekItem.js의 내용을 가져온 것이다. 그렇다보니 이걸 export할때 이미 작성해둔대로 export default를 사용하였는데 이 것이 문제가 되었던 것이다. Node.js는 CommonJS모듈 시스템을 사용한다. 반면 작성해둔 export방식은 ES6모듈의 것이다. CommonJS모듈은 module.export를 사용하기 때문에 export default 구문을 인식할 수 없었던 것이다.

 

아무래도 node.js로 해보길 잘한 것 같다. 깊이 알고 있는게 아니다보니 조금만 변형을 해서 사용하면 온갖 에러가 다 뜨는 듯하다.

 

CRUD기능 중에 R의 기능은 이제 구현이 가능하지만, 쇼핑몰의 특성상 판매자가 아니고서야 CUD는 적어도 상품에 있어서는 구현하는 것이 한정적일 것 같다. 그렇기에 일단 그동안 제작하면서 보류해두었던 부분을 해결하고자 하는데, 이게 아무래도 DB의 구조를 잘 만들고 이걸 이용해야 해결이 될 듯 싶어서 이후로는 DB 생성과 연동부터 진행해보려한다.

 

 

 

 

https://memo-code.tistory.com/43

마켓컬리 클론코딩 8 - Redux 추가