1st Project 회고록... PICKEAT

1st Project 회고록

사용한 툴

• Node.js
• Express.js
• Mysql
• trello
• notion
• AWS

잘한 점

• 관심사가 있는 주제로 변경하여 기획 및 추가 기능 구현
• 사용자의 편의성에 맞춘 디자인으로 변경한 것
• stand up meeting 을 통해서 daily로 무엇을 진행해야하는지 정한 점

부족한 점

• 스프린트 미팅과 전체 계획 미팅에서 조금 더 세부적으로 계획하지 못한 점
• 소통을 통해 각자 하고 싶은 기능을 제 때 말하지 못한 점

느낀 점

• 소통능력과 아이디어, 그리고 소비자를 위한 마음이 중요하다는 것을 느꼈습니다.
• 다음 프로젝트를 진행 할 때는 좀더 타이트한 계획을 세워 빠른 시간 안에 많은 기능을 구현하고 싶습니다. (구매하기, 예매하기)

구현한 기능들

• 회원가입 API
  • 구매가 필요한 웹 페이지에는 회원가입이 거의 필수적이라고 생각됩니다. 비회원 구입도 있지만 결국 그것도 인증 절차를 거치는 것이기 때문에 비슷하다고 생각이 됩니다. 이름, 이메일 , 비밀번호, 핸드폰 번호를 클라이언트에게 body값으로 받아오고 email과 password 를 서비스 규칙에 맞게 validate 하고 비밀번호를 bcrypt 로 암호화하여 database에 저장하는 API를 구현했습니다.
• 로그인 API
  • 로그인 API는 email과 password 를 클라이언트가 body 값으로 보내면 받은 password 값을 database에 저장된 암호화된 비밀번호와 비교하는 작업을 진행하고 json Web Token에
  • payload에 이런 식으로 만료일자와 사용자의 아이디를 넣어서 token을 만들어주고 response로 토큰을 보내주게 됩니다. 보내준 token을 localstroage에 저장하여 로그인이 필요한 웹페이지를 방문할 때마다 토큰을 불러와서 인증, 인가를 하게 됩니다.

jwt.sign({ id: user.id }, process.env.secretKey, { expiresIn: "1d" });

• 메인 페이지 및 제품 필터링 페이지 API
  • 메인 페이지와 제품 필터링 페이지의 API 구현이 가장 재미나고 힘들었습니다. 기존에는 query문의 case, if를 사용해서 구현을 해야했었는데, service 단에서 데이터를 정제하여 DAO에 index 값을 보내주어 query 문에 넣으면 필터링이 되는 것을 알게 되었고, 객체를 이용하여 key 값에 상응하는 값이 오게되면 함수를 실행하게 만들었습니다.
    예를 들어 end point query parameter에 product?name='한식'&type='단과강의' 가 들어오면한식이라는 필터와 단과강의라는 주제로 필터링되게 됩니다.
  • 이런 식으로 type이라는 object 값이 오면 where query문의 일부가 작성이 되는 것을 확인 할 수 있습니다.

const makeNameFilter = (name) => {
    if (typeof name == 'object') {
      let nameClauses = name.map((x) => `C.name = '${x}'`);
      return `(${nameClauses.join(' OR ')})`;
    } else {
      return `(C.name ='${name}')`;
    }
  };

  const makeTypeFilter = (type) => {
    if (typeof type == 'object') {
      let typeClauses = type.map((x) => `PT.name = '${x}'`);
      return `(${typeClauses.join(' OR ')})`;
    } else {
      return `(PT.name ='${type}')`;
    }
  };

  const makeWhereClauseBuilder = (param) => {
    if (Object.keys(param).length === 0) {
      return ``;
    }
    const builderSet = {
      name: makeNameFilter,
      type: makeTypeFilter,
    };

    const whereClauses = Object.entries(param).map(([key, value]) => {
      return builderSet[key](value);
    });

    return `WHERE ${whereClauses.join(' AND ')}`;
  };

  const products = await productDao.getProductsByParameter(
    makeWhereClauseBuilder(param)
  );

• 상세 페이지 API
  • 이 기능은 사실 간단하다고 생각이 됩니다. 앞서 구현한 기능으로 불러온 id 값을 프론트 엔드 개발자 분들이 상세페이지 엔드포인드 path parameter에 잘 넣어주시기만 한다면 간단하게 데이터를 불러올 수 있습니다. 백틱(``)을 이용하여 보내주면 제품의 상세페이는 간결하게 불러와 줄 수 있다고 생각합니다.
  • 그리고 또 하나 이야기 드리고 싶은 것은 json array aggregation 이라는 query문을 이용하여 더 많은 이미지를 불러온다거나 할 수 있습니다. 이런 식으로 표 한칸에 여러개의 데이터를 객체화 하여 넣을 수 있습니다.

  LEFT JOIN(
              SELECT
                    product_id,
              JSON_ARRAYAGG(
                    JSON_OBJECT(
                          "id", id,
                          "image", image_url
                    )
              ) AS images
              FROM
                    product_images
              GROUP BY 
                    product_id
        ) PI 
        ON 
              P.id = PI.product_id

• 장바구니 API (CRUD)
  • 장바구니 API 는 CRUD 를 전부 구현해 볼 수 있는 좋은 기회였습니다. login 인증 인가가 꼭 필요한 페이지이기 때문에 middle ware로 토큰 확인 후 user의 아이디를 가져오는 기능을 구현했고, 장바구니 생성, 불러오기, 삭제하기, 제품 수량 변경하기 기능을 추가하였습니다. 장바구니 내에도 더 많은 기능을 구현하고 싶었지만 처음하는 프로젝트였기 떄문에 시간 관리를 못하여서 더 넣지는 못하였습니다. 다음 프로젝트를 진행하게 되면 장바구니 선택삭제나 구매하기 연동을 더 잘해봐야겠다고 생각했습니다.
• 댓글 API
  • 댓글 기능 또한 로그인 후 사용 가능한 기능이므로 middle ware로 user id 값을 받아오고 body값으로는 댓글의 내용과 별점을 받아서 database에 저장하고 각 제품에 맞는 댓글들을 위에서 언급한 json array aggregation query문으로 불러오게 만들었습니다.

---

성장하는 것이 중요하기 떄문에 다음 프로젝트에서 구현하고 싶은 것 및 해야할 것을 작성해보고 회고록을 마무리하겠습니다.

• 소통을 통해 작업 일자와 담당자를 정확히 지정하고, 중간에 필요한 기능이 생기면 바로바로 이야기 하는 문화를 만들었으면 좋겠습니다. 서로가 각자 만들고 갑작스럽게 이야기해주니까 당황스럽더라고요. (sprint 미팅 및 stand up 미팅 trello 활용)
• 기능을 고려할 때 고객의 입장에서 구현해보려고 합니다. (이 부분이 약간은 부족하다고 생각합니다. 모든 워낙 불편함을 느끼지 않고 사용하다보니... )
• git에 commit을 올리기 전 코드를 한번 확인하고 올리고, commit 내용 관련해서도 고찰해야겠다고 생각했습니다. 보고서라고 생각하고 올리기로 다짐했습니다.

 

메인페이지

 

로그인 회원가입

 

댓글 달기

 

 

장바구니

 

 

git hub 주소 : https://github.com/wecode-bootcamp-korea/39-1st-PickEat-backend

API Documentation : https://documenter.getpostman.com/view/24101014/2s8YmRNLm9