7월 22일, 2차 프로젝트 최종발표를 진행하면서 2주간의 프로젝트가 마무리되었다.
1주일간의 리팩토링 기간이 남아있지만 진행된 프로젝트에 큰 기능을 추가하지는
않을 것 같고, 반복되는 코드를 줄인다거나 더러운 코드들을 정리해보는 시간으로
쓰일 것 같다. 이제부터는 2주동안 팀원들과 만든 프로젝트를 소개해보려 한다.
🤔 어떤 프로젝트?
이번에 클론하기로 선정한 사이트는 한정판을 거래하는 KREAM이라는 사이트이고,
다양한 기능들을 시도해볼 수 있다고 생각되어 선택하게 되었다.
🧐 어떤 기능?
우리 팀이 구현한 기능에는 로그인, 회원가입, 카카오 로그인, 마이 페이지, SHOP 페이지 등이 있다.
그 중에서 내가 담당했던 부분은 로그인, 회원가입, 카카오 로그인, 제품 상세 페이지, 구매 및 판매 페이지이다.
1. 로그인, 회원가입, 카카오 로그인
일단, 정규표현식을 사용하여 이메일 주소와 비밀번호에 대한 유효성 검사 기능을 구현했다.그리고, useState와 useEffect 훅을 사용하여 이메일 state와 비밀번호 state가 변경될 때마다
validation을 체크할 수 있도록 구현했다. 코드는 아래와 같다.
useLocation을 활용하여 url에 token이 있는지 확인하고, token이 있는 경우 url에 있는 정보들을 로컬 스토리지에 저장하는 방식이다. url에 있는 정보들을 뽑아낼 때는 query-string 라이브러리를 사용했다.
로컬스토리지에 정보들을 저장한 후에는 메인 페이지('/')로 이동시켜 주었다.
2. 제품 상세 페이지
제품 상세 페이지에서는 백엔드와 통신을 통해 제품 상세 정보를 가져오고, 관심상품 기능과, 사이즈 모달,
구매 전 확인 부분 토글 기능, react-slick을 이용한 이미지 슬라이더 기능, 다른 상품 페이지로 이동하는 기능을 구현했다.
3. 구매 및 판매 페이지
구매 및 판매 기능을 구현할 때 판매가 등록된 사이즈만 구매할 수 있도록 구현하였고,
판매를 등록할 때는 등록된 사이즈 가격과 동일하게 등록할 수도 있고,
판매 가격을 입찰 방식으로도 등록할 수도 있도록 구현했다.
또한, 백엔드에서 보내주는 판매 리스트에 대한 userId와 로컬스토리지에 저장된
userId를 비교하여 자신이 등록한 상품은 구매 가능한 리스트에 보이지 않는 기능도 구현했다.
판매나 구매를 할 때 사용되는 사이즈나 가격 등의 정보들은 페이지가 이동될 때마다 state를 보내주면서
새로고침하더라도 정보가 유지될 수 있도록 구현했다.
👍 잘한 점?
개인적으로는 에러가 발생했을 때 구글링을 통해 최대한 혼자 힘으로 해결하려고
노력한 부분을 스스로 칭찬해주고 싶다.
팀적으로는 혼자 해결할 수 없는 문제가 발생했을 때 팀원들과 활발한 소통을
통해 문제를 빠르게 해결해나간 부분이 좋았다.
1차 프로젝트와 비교했을 때, 구현해야 하는 기능이 훨씬 더 많았는데도 불구하고,
프로젝트를 성공적으로 끝마친 것 같아 뿌듯했다.
😢 아쉬운 점?
프로젝트 초반에는 코드 리뷰를 비교적 열심히 했지만, 프로젝트가 진행될 수록 시간에
쫓겨 코드 리뷰를 대충 했다는 생각이 들었다. 그래서, 1차 프로젝트 때보다 코드가
정돈되지 않았다는 느낌도 든다. 리팩토링 기간에 더러운 코드들을 깨끗하게 정리해 볼
생각이다!
회고를 마치며
KREAM이라는 사이트를 클론하게 되면서, 처음에는 기능이 너무 많은 것 같아서 두려웠지만
팀원들과 함께 기능들을 하나하나 만들어 나갈 때마다 자신감이 생기는 듯했다.
그리고, 문제가 생겼을 때 팀원들끼리 서로 도와가면서 프로젝트를 진행했던 부분이
정말 좋았다. Dream 팀원분들께 감사의 말을 전하고 싶다.
내일이면 벌써 12주차가 시작된다. 12주차에는 기업 협업 이력서 작성과 매칭이 이루어지고,
리팩토링과 docker를 사용한 배포까지 진행된다.
기업협업 전 마지막 일주일을 정신 바짝 차리고 정말 알차게 보내야 겠다는 생각이 든다.
🔥🔥 Dream 팀 화이팅! 🔥🔥
🔥🔥 저스트코드 5기 화이팅!! 🔥🔥
