JUST CODE 2차 프로젝트 회고

김예찬·2022년 7월 25일

어떤 프로젝트?

kream 사이트 클론 코딩 프로젝트

어떤 기능?

우리팀이 구현한 기능은 로그인,회원가입,메인페이지,상세페이지,구매 판매 페이지, shop 페이지, style 페이지, shop 페이지, 마이페이지 등이다.
그 중에 내가 담당했던 부분은 메인페이지 API, 관심상품 API, style페이지 API이다.

메인페이지 API

메인페이지에 많은 정보들이 있지만 우리는 그 중에 발매 상품,인기상품 , style Picks! 부분 까지만 구현 하기로 하고 API 작업을 진행했다. prisma.$transaction()함수를 이용해 한번의 요청으로 발매 상품,인기 상품,style picks 정보를 담은 각각의 배열을 이차원 배열의 형태로 return 해주도록 API를 구성했다.

관심상품 API

관심상품 Create,Read,Delete API를 작성했다. 관심상품 추가와 삭제에서 중복된 값이 추가되거나 삭제되지 않도록 중복처리 또한 해주었다.

STYLE API(기억에 남는 코드)

style API는 style 이미지,좋아요,유저 이메일(편의상), 유저 이미지 뿐만 아니라 유저가 스타일링한 상품을 추가할 경우 상품 리스트까지 보여줘야 했다. style 이미지와 상품 리스트의 상품이 여러 개일 경우 각각 style id와 product id로 묶어서 배열에 담아줘야 했기 때문에 group by를 해줘야 하는데 7개 테이블을 조인했을 때 내가 원하는 컬럼으로만 group by를 해줄 수 없었다. 그래서 방법을 고민하다가 원본 테이블을 그대로 조인하지 않고 서브쿼리를 활용해 내가 원하는 정보만 뽑아낸 테이블을 조인하여 문제를 해결했다. FROM 절이 서브 쿼리로 도배되어 가독성은 떨어지지만 STYLE 페이지에 필요한 모든 정보를 한번의 요청으로 다 보내줄 수 있어서 뿌듯했다. 가독성이 떨어지는 부분은 서브쿼리를 통해 뽑아낸 정보로 구성된 뷰를 생성하여 대체할 것이다.

협업의 즐거움

shop 페이지에서 상품을 인기순과 최신순으로 뿌려주는 api가 메인페이지 발매 상품,인기 상품 api와 유사하여 shop 페이지 api 담당 팀원과 api 작성을 함께했다. 메인 페이지 api가 먼저 나왔기 때문에 발매상품 인기 상품 api를 shop 페이지에 맞게 수정하는 방식으로 사용하기로 했다. 메인 페이지에서는 발매 상품과 인기 상품을 따로 보여줬기 때문에 발매 상품과 인기 상품 api가 따로 따로 있지만 transaction으로 한번에 처리해줬다면, shop 페이지에서는 유저의 클릭값(인기순,최신순)에 따라 상품 리스트의 정렬 방식이 바뀌어야 하기 때문에 두 API를 하나로 합치는 방법을 고민했다. 그 과정에서 원래대로라면 두 api는 참조하는 테이블이 달랐기 때문에 합칠 수 없었지만 kream의 메인페이지 발매 상품 로직과 shop페이지 최신순 상품 정렬의 로직이 조금 다르다는 것을 발견하여 shop페이지에 맞게 api를 수정하면서 두 api를 하나로 합칠 수 있었다. 그리고 prisma.queryRawUnsafe를 활용해 프론트에서 query값을 like_num으로 보내줄 땐 인기순으로 상품을 정렬해서 보내주고 created_at으로 보내줄 땐 최신순으로 정렬해서 상품을 보내줄 수 있었다. 팀원과 대화하며 사고가 확장되고 이전에는 전혀 생각지 못했던 방법을 찾아내 문제를 해결해 정말 즐거웠고 뿌듯했다.