깃헙주소: https://github.com/wecode-bootcamp-korea/justcode-7-2nd-millieIslibrary-front
베포주소:http://15.164.216.64:3000/
Project Overview
작업기간
2022.11.14-2022.11.25
기술스택
프론트 3명
- HTML/CSS
- JavaScript(ES6+)
- React
- SCSS
- Axios
백엔드 3명
- Node.js
- Express
- typeORM
- Mysql
- Axios
협업도구
- Git
- Github
- Trello
- Slack
- 디스코드
주요구현사항
하이라이트 => 내가 구현한 기능!!
페이지별로 나눠서 기능구현=>welcome,로그인,메인,검색,내서재,상세
- welcome페이지
스크롤 에니메이션 구현
자동케러셀 구현 - 로그인페이지
로그인,회원가입,비밀번호 변경 구현 - 메인페이지
nav, footer 구현
자동캐러셀 및 드레그슬라이드구현
다크모드기능 구현
top버튼 기능구현
장르 카테고리 구현 - 검색페이지
검색 기능 구현
카테고리 필터 기능구현 - 내서재페이지
내 서재 페이지 구현 - 상세페이지
도서 상세페이지 구현
도서 찜, 서재 담기,댓글기능, 링크복사 구현
결과화면
1.welcome페이지
new IntersectionObserver를 이용해서 화면의 스크롤을 감시하여 스크롤이벤트를 넣었고
slick 라이브러리를 사용해서 무한 케러셀을 구현했다
2.자동캐러셀 및 드레그슬라이드 구현
드레그 슬라이드를 구현하기 위해서는 마우스의 움직임을 제어하기 위해 마우스 이벤트에 대한 공부와 스크롤 이벤트로 인한 성능 저하를 막기 위한 스로틀과 디바운스에 대한 이해가 필요했다
기능자체는 단순해 보였지만 처음 접하는 이벤트와 변수가 많아서 가장 구현이 어려웠다
이후 slick 케러셀 라이브러리를 사용했을때 라이브러리의 편리성도 더 와닿았다
3.top버튼 및 다크모드기능구현
프로젝트 중에 가장 즐거웠던 기능을 꼽으라면 사용자의 편의를 생각하면서 만든 top버튼과 다크모드기능이다
1차 프로젝트에서 끝도없이 타고내려가는 props를 보고 useContext를 사용해 전역으로 다크모드기능을 사용할 수 있도록 하였다
4.장르별 카테고리구현
쿼리파라미터를 사용해서 각 장르에 맞게 데이터가 6개씩 나타날 수 있도록 제한을 걸었다
Project Review
이번 프로젝트를 통해 얻은 것
“아는 만큼 보이고 한 만큼 성장한다” 개발의 가장 매력적인 부분이라고 생각한다. 1차와 비교했을때 3일을 끙끙 거렸던 fetch를 한번에 성공했을 때 백엔드와 더 잘 소통했고 짧은 2주 만에 더 성장했다고 느껴서 행복했다
새로운 기능이나 에러를 보면 두렵더라도 당장의 막막함 보다는 이후의 성장이라는 긍정을 심어준 프로젝트였다
내가 부족한 점
많은 기능을 구현하고 싶다는 욕심이 앞서서 기능의 깊이와 디테일 보다는 구현 자체에 욕심을 더 낸거 같다
완성에 급급해서 더 좋은코드, 더 간결한코드를 생각하는 시간이 가장 중요하다는 것을 알면서도 그 시간에 크게 투자하지 않았던거 같다. 배우고 성장해나가는 기간인 만큼 조급함을 내려놓고 한 코드에 대해 생각할 시간을 더 많이 가질 수 있도록 노력하고 리팩토링도 열심히 할 것이다
