📕 밀리의 서재 클론 프로젝트
독서를 쉽고 재밌게 즐길 수 있는 국내 최대 독서 플랫폼 밀리의 서재 사이트를 클론했습니다.
- 저는 공통 Navigation, MyBooks 페이지, MyBooksManager 페이지 구현을 담당했습니다.
- 이 게시글의 기술스택 및 구현내용은 본인이 사용했거나 경험 해 본것들을 기준으로 작성했습니다.
- 현재 밀리의 서재의 내서재 페이지 레이아웃과 많은 차이가 있습니다.
사이트의 모든 기능을 구현 할 수 없어서 부분적으로 레이아웃을 수정하여 작업했습니다.
👉 GitHub
💬 프로젝트 회고
이번 프로젝트에서는 React Hooks 와 Styled Component 를 공부하면서 바로 프로젝트에 도입해야 했기때문에 처음에는 걱정을 많이 했지만 그동안 위코드에서 해왔던 자기주도 학습 덕분에 빠르게 습득하여 코드에 적용할 수 있었습니다.
백엔드와 데이터를 주고받을때 get, post, patch, delete메서드를 사용하여 장바구니와 유사한 기능을 구현했던것이 가장 기억에 남았었고, 아쉬웠던 점은 기획했던 것중 AWS S3를 사용해서 URL이 아닌 파일로 서버에 저장하고 프로필 이미지를 수정하는 기능을 진행하지 못해서 아쉬웠습니다.
👨👧👧 구성원 및 기간
- 기간 : 2020. 11. 02 ~ 2020. 11. 13 (2주)
- 프론트엔드 : 백은진, 이동훈, 최하늘, 홍효정
- 백엔드 : 김성태
✍ 기술스택 및 툴
- 기술스택 : HTML, CSS (Styled component), JavaScript, React (Router, Hooks)
- 툴 : Git, Github, Trello
🔥 구현한 기능
MyBooks - 도서 조회
- 도서를 내 서재에 담으면, 마이페이지에서 도서목록을 확인 할 수 있습니다.
- 내 서재의 데이터를 가져올 때는 로그인 한 유저의 token을
header에 담아서 요청을 보냅니다.
MyBooks - 도서 검색
- 담은 도서들을 타이틀 기준으로 검색 할 수 있습니다.
- 인풋에 검색어를 입력하고 엔터를 치면, 기존 도서 데이터에서 검색어를
include하고 있는 데이터만filter한 뒤, 필터링된 배열로 리랜더링 합니다.
MyBooks - 도서 정렬
- 도서의 순서를 타입에 따라 정렬합니다.
- 정렬 할 타입(서재 등록순, 제목순...)을 선택하면 선택한 타입을
state에 저장합니다. - 확인을 누르면 해당
state를 쿼리스트링에 담아서get요청을 보내고 받아온 데이터로 도서 리스트를 리랜더링 합니다.
MyBooksManager - 책장 추가
- 책장은 도서를 담은 리스트 입니다.
- 책장 이름, 책장에 담을 도서를 선택한 뒤 책장 만들기 버튼을 클릭하면,
책장이름과 선택한 도서의id가 담긴 배열을body에 담아서post메서드로 요청을 보냅니다. - 만들어진 책장을 클릭하면 모달로 도서목록을 확인 할 수 있습니다.
MyBooks - 책장 삭제
- 만들어진 책장을 삭제 할 수 있습니다.
- 삭제를 클릭한 책장의 아이디를
pathname으로 전달하고delete메서드를 사용해서 요청을 보냅니다. - 응답코드가 204로 돌아오면 동시에 책장의 총 개수를 -1 하고 책장 목록을 리랜더링 하여 보여줍니다.
MyBooksManager - 책장 수정
- 책장이름과 책장에 담긴 도서들을 수정할 수 있습니다.
- 책장 수정은 책장 추가 컴포넌트를 재활용합니다. 책장 수정으로 접근할때는
history.push에 책장 데이터를 함께 넘겨줍니다. 받아온state가 있을때와 없을때를 구분하여 조건부 랜더링을 해주었습니다. - 책장
id, 책장 이름, 수정된 도서목록의id가 담긴 배열을body에 담아서patch메서드로 요청을 보냅니다.
HHJ velog 🍔