🚨주의🚨
답답할 수 있음
📍 프로젝트 소개
코드스테이츠 SEB FE 44기 중 진행한 과제로 구현한 솔로 프로젝트. 간단한 쇼핑몰 페이지를 구현했다.
📍 프로젝트 기능
- Main 상품 리스트를 확인할 수 있습니다. (4개만 보여집니다) 북마크 리스트를 확인할 수 있습니다. (4개만 보여집니다)
- Header 로고를 클릭하여 메인 페이지로 이동할 수 있습니다.
- Menu 햄버거 버튼을 클릭하여 원하는 페이지로 이동
- Footer 개인정보 처리방침, 이용 약관 북마크 기능 ( 북마크 버튼을 클릭하여 북마크 리스트에 상품을 추가할 수 있습니다. )
- 토스트 메시지 ( 북마크를 클릭할 시 북마크 추가, 해제를 알려주는 토스트 메시지가 띄워집니다. )
- Modal (cozshopping 아이템을 클릭할 시 모달 창이 띄워지며 아이템의 이미지가 보여집니다. 이 창에서도 북마크가 가능합니다 )
- 상품 리스트 페이지 모든 상품을 확인할 수 있습니다. ( 필터링 기능 적용.)
북마크 페이지 북마크가 된 상품을 필터링하여 볼 수 있습니다.
본격적인 팀 프로젝트를 진행하기 전 , 솔로프로젝트를 진행하였다. 중간에 정보처리기사 시험도 치르고 아직 리액트 초보인지라 코드를 작성할 때 세련되지 않은 부분이 많아 아쉬움이 든다. 줌에서 다른 분들의 레포를 보며 많이 배웠다. (+ vite 사용하신 페어분의 코드를 보고도 감탄했다..깔끔하고 구조화도 잘되어있었다.) git branch와 flow에 대해서도 많이 이해하게 되었다. PR 단위에 대해 고민하게 된 것 같다. 이때 전에 스프린트를 작성한게 많이 도움되었다.
🚨 개선점
📁 문제 1, 상태 관리 라이브러리
리덕스가 불편하다고 느껴 사용하지 않고 진행했는데 하다보니 props drilling이 .........직접 느껴보니 더 끔찍했다. 불필요한 코드는 늘어나고 상관없는 컴포넌트에다가도 데이터를 전달해줘야 한다는게 불편했고 가독성도 떨어졌다.
📁 문제 2, eslint, prettier 미사용
Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.
페어분이 내 코드를 보고 프리티어 쓰셨어요..? 해서 알아차림. 원래 프리티어를 몰랐었어서 그걸 사용하고 코드정리와 문법 오류를 더 잘 잡아낼 수 있게 되었다.
(ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해줌! Prettier는 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해준다.)
📁 문제 3, css
비효율의 극치로 index.css에 모든 스타일을 서술했다.(답답...) reference를 보니 CSS in JS방식으로 styled components를 이용하여 스타일링하셨다.
사실 다른 동기 분들이 보시기에는 정말 기본적인 요소일 수도 있겠다는 생각이 든다...ㅎㅎ..🙃 이 프로젝트는 추후에 계속 고쳐나갈 예정이다..
