코딩과로그

2차 팀 프로젝트 (서적 정보 제공 사이트 개발) 본문

회고록

2차 팀 프로젝트 (서적 정보 제공 사이트 개발)

피리음 2022. 11. 29. 18:17

1. 프로젝트 소개  (결과물 사이트 링크)


저는 '저스트코드'라는 프로그래밍 부트캠프에서 백엔드 과정 공부를 하고 있습니다.

이론 중심으로 약 한달간 공부한 뒤 1차 프로젝트를 마쳤으며 이번 2차 프로젝트에서는 좀 더 난이도 높은 사이트를 선정하여 개발하는 것이 목표였습니다.  개발기간 (2022.11.14 ~ 2022.11.25)

 

2. 밀리의 서재 사이트 선정 계기


밀리의 서재를 클론 프로젝트로 선정하여 개발하였습니다. 밀리의 서재의 경우 지식상품을 다루는 커머스이고 찜하기 기능, 댓글 달기, 카트 담기 등의 현대 홈페이지에서 필수적으로 갖추고 있는 기능들을 포함하고 있으며 서적 관련 OPEN API를 더욱 심도있게 경험할 수 있다고 판단해 프로젝트로 선정하게 되었습니다.

 

3. 팀원 구성 및 역할


저희 팀은 프론트엔드 4명, 백엔드 3명으로 구성되었습니다.

- 프론트: 동현님, 예지님, 설화님

- 백엔드: 인찬님, 성희님, 나(상윤)

 

백엔드 역할:

- 이상윤 (본인):

  - 서적 관련 OPEN API 크롤링을 통한 내부 DB Mock Data 설정

  - 서적 가져오기 API

  - 내 서재 API

- 성희님:

  - 로그인/회원가입 API,

  - 카테고리 API

- 인찬님:

  - 댓글 API

  - 책 상세 페이지 API

4. 사용 기술 스택


백엔드

 - Javascript, Express(Node.js), Mysql

 - 그 외

   -  dbmate(DB scheme 버전관리)

   -  jsonwebtoken(토큰 발행)

   -  bcryptjs(비밀번호 암호화)

 

프론트엔드

- React(use Javcript), SCSS, HTML

5. 업무 진행 방식


초기에는 사이트를 만들기 위해서 필요한 업무들을 나열하였고

프론트엔드의 경우 Layout 별로 기능을 분배하여 신속히 업무를 진행하였으며

백엔드의 경우 DB scheme 정의 업무를 공동으로 진행하였고 그 이후에는 총 3가지 기능(상품 필터, 상품 정보, 장바구니)을 분배하며 시작하였습니다.

업무 회의의 경우 매일 오전 10시에 만나 약 30분간 금일 업무와 지연이 예상되는 업무등을 공유하여 해당 상황에 대해 의견을 나누고 해결책을 모색하였습니다.

 

업무 상황 관리

아래와 같이 티켓팅을 활용하여 진행하였습니다. (링크)

업무 관리 툴(트렐로)

API 문서 공유

Postman을 통해 API 문서(링크)를 공유하였습니다.

 - API 의 input, output 명시하여 프론트엔드에서 API 호출하였을 때에 기대값을 알 수 있도록 하였습니다.

서적 정보를 가져올 때에 쿼리로 조건을 설정할 수 있다!

실시간 소통

디스코드를 통해 공유하고 싶은 내용을 실시간으로 공유하였습니다.

디스코드를 통해 업무 소통을 자주 하였다!

 

소스 버전 관리 (프로젝트 PR 목록 링크)

github을 활용하여 관리하였으며  서로의 코드를 리뷰하고 납득이 될 경우 PR을 Merge하는 방식을 취했습니다.

함수명이 직관적이지 않아 함수명 변경을 건의드렸다.

6. 백엔드 주요 내용 공유


DB 스키마 모델링

사용한 DB 모델링 툴 (dbdiagram.io)

- 해당 툴 채택 사유

     - 실시간으로 테이블 변경상태를 팀원이 확인 가능함.

     - DBML(링크) 을 통해 스키마를 text만으로 작성할 수 있어 DB 버전관리를 github에 추가하기 용이함.

 

스키마 제작 흐름

우선 팀원들 각자 스키마를 만들어본 뒤 각자 만든 스키마들에 대해 예상되는 장단점들을 서로 공유하며 수정하는 과정을 거쳤습니다.

이후에는 프로젝트 제작과정에서 스키마 변경이 필요하다고 판단되는 경우, 변경 필요 사유를 정리하여 다음날 오전 백엔드 회의에서 공유하면서 스키마를 개선하였습니다. (DB 스키마 모델링 결과 링크)

최종 DB 스키마

아키텍쳐 (layered Pattern)  (GitHub 프로젝트 링크)

아키텍쳐는 Layered Pattern을 가져왔습니다. 보편적으로 사용되는 패턴으로,

개발자가 이해하기 쉬운 구조를 가지고 있고 컴포넌트 별로 관리가 가능하여 컴포넌트별 업무 분담할 때 용이하였습니다.

 

layed Patten 을 적용시켰다!

7. 최종 프로젝트 결과 (사이트 링크)


백엔드에서 기본적으로 목표로 잡았던 기능들을 모두 완료하였습니다.

- 회원가입, 로그인 완료

- 서적 필터링 완료

- 댓글 CRUD 완료

- 이메일 검증을 통한 비밀번호 변경 완료

- 알라딘 OPEN API 를 활용한 자체 DB 저장 완료

 

로그인 후 페이지 (최고 평점의 서적을 보여준다.)
서적 상세 페이지 (서적의 상세 정보를 볼 수 있고 댓글 삭제, 찜하기, 내서재 담기를 할 수 있음!)
내 서적, 즐겨찾기에 들어있는 정보들을 확인할 수 있는 페이지

 

8. 공유하고 싶은 코드


mutex 를 사용한 부분이 있습니다.

카테고리를 찾은 뒤 카테고리가 없는 경우 카테고리를 생성하는 로직이 있는데, 해당 로직이 병렬적으로 동시다발적으로 실행될 경우 카테고리 생성 로직에서 에러가 발생했습니다.

원인은 아래의 다이어그램과 같이, 카테고리를 생성하는 로직에서 동시에 동일한 카테고리를 생성하려 해 발생하였습니다. 해당 부분을 뮤텍스로 처리함을 통해서 카테고리를 찾고 생성하는 부분이 마치기 전까지 다른 쓰레드게 해당 부분에 접근하지 못하도록 하여 문제를 해결했습니다.

뮤텍스 적용 코드 (적용하여 카테고리 생성 로직이 여러 쓰레드가 동시에 호출하는 것을 방지하였다!!)
쓰레드 1, 2 모두 카테고리를 동시에 찾은 뒤 없어서 생성 시도하고 있음. Thead 2에서는 카테고리 1을 생성하지 못하고 에러를 표출함.

9. 다음 프로젝트에 추가해보고 싶은 기능


OAuth

요즘 유저(나를 포함한)들은 회원가입하라고 하면 사이트를 나가버리곤 합니다. 아이디를 외우기 귀찮고 보안이 신경쓰이기 때문일 것이다. 그렇기에 OAuth를 통해 사용자가 회원가입을 하지 않아도 되도록 하는 소셜 로그인 기능을 추가해보고 싶다...!!

 

사진 업로드

사람들과 이미지를 공유할 일은 정말 많았습니다. 그래서 꼭 해보고 싶습니다.

 

10. 프로젝트를 되돌아 보며


프로젝트 과정이 생각보다 무난했다.

생각보다 계획했던 것이 순조롭게 진행되었고 프론트, 벡엔드 너나 할 것 없이 팀원분들 모두 큰 어려움 없이 마칠 수 있어서 좋았다.

포스트맨을 활용하여 인풋과 결과값을 프론트에게 미리 알려줄 수 있었던 부분이 도움이 컸던 것 같다.

한편으론 저번 프로젝트에서도 OAuth, 사진 업로드를 해보고 싶다고 말했는데 이번에도 해보지 못해서 그런 부분이 좀 아쉽다. 좀 더 열심히 해서 시간을 내었으면 가능할 수도 있었지 않나 싶다.

 

프로젝트를 같이 하신 분들 모두 수고가 많았습니다~!