[node js] 4주차 -3

스파르타 쇼핑몰 마무리

• 1. 쇼핑몰 프로젝트 열기
  • 그럼 이제 쇼핑몰 프로젝트의 마무리를 위해서 CORS 프로젝트는 닫아주고 다시 쇼핑몰 프로젝트를 열어주세요.
  1. 프론트엔드 파일 붙여넣기
  • 아래 static 압축파일을 다운받거나, 코드스니펫의 주소로 접속해 파일을 다운받아 압축을 풀어주세요.
  • static.zip
  • [코드스니펫] 프론트엔드 코드 다운로드

  • <https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/node.js/week04/static.zip>
    

  • 압축을 해제해서 나온 static 폴더를 폴더 자체를 쇼핑몰 프로젝트 폴더에 옮겨주세요.
  1. 프론트엔드 파일을 브라우저로 확인
  • 프론트엔드 파일을 사용할 수 있게 static 미들웨어 를 사용해보겠습니다.
  • app.js 파일에 아래와 같은 코드를 넣어주세요

• app.use(express.static('static'));
  

  • static 미들웨어 는 정적인 파일(프론트엔드 html파일, 이미지)들을 서버에서 사용할 수 있게 도와주는 미들웨어 입니다.
  • express.static() 안에 폴더 이름을 넣어주어 정적파일의 위치를 명시합니다.
  • 이제 node app.js 명령어로 서버를 실행시킨 뒤 http://localhost:3000 에 접속해보세요.
  • 상품 목록페이지가 보이면 성공입니다!
  1. API가 잘 동작하는지 확인
  • 확인 절차
    • 이전에 CORS 에러를 확인 했던 것 처럼 검사 > 네트워크 탭에서 프론트엔드 페이지에서 API가 잘 작동하는지 확인해보아야 합니다.
    • 상품 목록 페이지, 상품 상세 정보 페이지, 장바구니에 상품 추가, 장바구니 페이지, 장바구니 상품 수량 변경, 삭제 버튼을 눌러보면서 네트워크탭에서 응답을 확인해 보세요.
    • Error가 뜨는지, Request가 잘 요청 되었는지 확인해 보며 API가 예상한데로 제대로 동작하는지 확인해주세요.
  • 어떤 기능이 잘 동작하지 않던가요?
    1. 상품 상세 조회
    2. 장바구니 조회
    3. 장바구니 담기
  • 디버깅 시간!
    1. 상품 상세 조회
    2. 알고보니 갑자기 약속(데이터 양식)이 바뀌는 상황이 발생했어요! 상품 상세 조회 API의 응답 값에서 key를 detail 으로 응답하던것을 goods 로 변경하자고 프론트엔드 개발자와 합의를 하게 된 상황에 처했습니다. 변경해주세요!
    3. 장바구니 조회
    4. 이번에도 상품 상세 조회 API의 응답 값에서 key를 carts 으로 응답하던것을 cart 로 변경하자고 프론트엔드 개발자와 합의를 하게 된 상황에 처했습니다! 변경해주세요!
    5. 장바구니 담기그리고 프론트엔드는 JSON 데이터가 아닌 URL Encoded 형식의 데이터로 Body를 보낸다고 해요! urlencoded 미들웨어를 사용해 프론트엔드로부터 데이터를 받을 수 있도록 개선해야 합니다!
    6. POST 메서드로 구현된 장바구니 담기 API를 PUT 메서드와 합치는것으로 바뀌었습니다! 이제 POST 메서드로 구현된 API는 사라지고, PUT 메서드가 장바구니에 아이템을 담는 기능까지 수행하도록 변경해야 합니다!
  • 디버깅 예시 코드
    • 1. 상품 상세 조회

      router.get("/goods/:goodsId", async (req, res) => {
        const { goodsId } = req.params;
      
        const [goods] = await Goods.find({ goodsId: Number(goodsId) });
      
        res.json({
          goods,
        });
      });
      

      1. 장바구니 조회

    • router.get("/goods/cart", async (req, res) => {
        const carts = await Cart.find();
        const goodsIds = carts.map((cart) => cart.goodsId);
      
        const goods = await Goods.find({ goodsId: goodsIds });
      
        res.json({
            cart: carts.map((cart) => ({
                quantity: cart.quantity,
                goods: goods.find((item) => item.goodsId === cart.goodsId),
            })),
        });
      });
      

      1. 장바구니 담기
    • POST 메서드로 구현된 API는 지우고, 아래 코드로 개선!
      • /routes/goods.js 예시

      • router.put("/goods/:goodsId/cart", async (req, res) => {
          const { goodsId } = req.params;
          const { quantity } = req.body;
        
          const existsCarts = await Cart.find({ goodsId: Number(goodsId) });
          if (!existsCarts.length) {
            await Cart.create({ goodsId: Number(goodsId), quantity });
          } else {
            await Cart.updateOne({ goodsId: Number(goodsId) }, { $set: { quantity } });
          }
        
          res.json({ success: true });
        });
        

      • /app.js 예시

      • app.use(express.urlencoded());
        

  1. 마무리
  • 스파르타 쇼핑몰에선 CORS 에러가 왜 발생하지 않을까요?
    • 동일한 서버 주소를 통해 프론트엔드 파일과 API를 모두 제공하기 때문이에요!
  • 왜 프론트엔드에 대해서는 자세히 알려드리지 않았을까요?
    • Node.js로 프론트엔드 코드를 작성할 수 있지만 일반적으로는 백엔드 코드를 작성하는 경우가 대부분입니다. 이러한 추세에 맞게 여러분이 백엔드 개발자라면 알아야 하는 내용에 집중을 하기 위해 불필요한 내용을 최소화 하기 위해 노력했습니다.