닥터모짜 팀프로젝트 front-end repository
닥터모짜 팀프로젝트 back-end repository

Project Overview

대망의 첫번째 프로젝트가 끝났다! 프로젝트가 시작되기 전에는 긴장되어서 잠도 못자고, 팀원들에게 민폐를 끼칠까봐 걱정의 연속이었다. 그러나 다행히 팀원 모두가 열심히 한 덕분에 목표한 바를 잘 완성할 수 있었다.

React를 활용한 닥터자르트 웹페이지 클론 프로젝트!

Dr.Jart+ original website main
본래는 한국의 닥터자르트 웹사이트를 클론하려 했지만, 구현하기에는 과한 애니메이션과 다소 복잡한 레이아웃 때문에 팀원들과 논의 끝에 보다 깔끔한 미국 닥터자르트 웹페이지를 구현하기로 결정했다.

이러했던 웹페이지를..!

Dr.Mazza+ main
요렇게 탈바꿈했다! 닥터모짜는 이미지도 충분하고, 카테고리화하기 좋은 치즈로 아이템을 바꾸면서 지어진 이름이다. 뭔가 신박해서 이름을 정하고 다같이 기뻐했던 기억이 난다.

작업기간

2021.7.5 - 2021.7.16

기술스택

• HTML/CSS
• JavaScript(ES6+)
• React
• SASS

주요구현사항

👍표시는 내가 기여한 구현사항들!

• Nav bar, Footer 레이아웃 및 기능 구현
• 메인페이지 이미지 슬라이더 기능 구현
• 메인페이지 기본 레이아웃 구현
• 상품 카드 컴포넌트 레이아웃 구현
• 상품 카드 컴포넌트 기능 구현👍
• 제품 상세 페이지 레이아웃 및 기능 구현👍
• 제품 리스트 페이지 레이아웃 및 기능구현👍
• 제품 리스트 페이지 sorting 기능 구현👍
• path parameter를 활용한 filtering 기능 구현👍
• 로그인, 회원가입 레이아웃 및 기능 구현
• 장바구니 페이지 레이아웃 및 기능 구현

결과화면

1. 제품 리스트 페이지 - filtering 기능 구현

제품 리스트 페이지의 filtering과 sorting 기능은 백엔드에서 만들어 준 query parameter를 통해 작동하도록 구현했다. 처음으로 fetch를 통해 백엔드와의 통신을 하여 기뻤던 기억이 난다. ㅎㅎ

2. 제품 리스트 페이지 - sorting 기능 구현

3. 제품 리스트 페이지 카드 컴포넌트 기능 구현

옵션이 있는 상품은 장바구니에 추가하기 전에 옵션 선택을 필수로 하게끔 해야했다. 버튼을 나타내고 사라지게 하는 작업이 상당히 까다로웠지만 막상 구현하고 나니 가장 뿌듯한 작업물 중 하나였다!

4. 제품 상세 페이지 - 기능 구현

카드 컴포넌트와 마찬가지로 상세페이지에서도 옵션선택이 가능해야했다. 무조건 작은 사이즈의 상품이 디폴트값으로 설정되어 있어야했고, 선택된 크기 옵션에 따라 나타나는 가격도 달라져야 했다.

5. 제품 상세 페이지 - 레이아웃 구현

Project Review

잘한 점

모르는 건 적극적으로 물어봤다.

위코드에 들어와 초반 한달만해도 나는 질문하는 것을 굉장히 쑥쓰러워했다. 남들 다 아는 걸 물어보면 어쩌지 할 때도 많았다. 그런데 막상 프로젝트를 시작하니 모르는 걸 적극적으로 묻지 않으면 프로젝트 진도가 나가지 않는 상황이 벌어지면서 쑥쓰러움을 무릅쓰고 멘토님들께 적극적으로 질문을 했다. 질문을 할때는 해결책을 찾기보다는 접근법을 물으려고 애썼다.(잘 됐는지는 모르겠지만..)

성공적인 컨디션 관리

퍼포먼스 코치님과의 1:1 면담에서 말씀을 나눴던 것 처럼 안정적인 아웃풋을 내기 위해 8 to 10 코딩루틴을 지키고, 최소 12시 전에는 잠들려고 노력했다. 2차 스프린트에 들어가면서 5시에 눈이 떠지는 상황이 발생하기도 했지만, 코딩하는 시간만큼은 최상의 컨디션으로 임했던 것 같다!

로직을 잘 정리하자

이건 잘한점과 개선하고 싶은 점 사이에 있는 항목인데, 나름 잘 한 것 같으니 잘한 점에 올려본다! 처음 프로젝트를 진행하면서 모르는 점 투성이에 새로운 개념들이 속수무책으로 들어오다보니 당황하여 아무것도 손을 못대고 있기도 했다. 그런데 무작정 코딩을 하기 보다는 차분히 앉아 로직을 적어가며 코드를 짜니 질문하기도 순조롭고 보다 명확한 코딩을 할 수 있었다!

개선하고 싶은 점

프-백 소통은 처음이라 미안해...

둘 다 처음으로 하는 공통 프로젝트라 서로 모르는게 당연하긴했으나, 프론트에서 보다 적극적으로 어떠어떠한 데이터가 필요할 예정이다. 이러이러하게 만들어달라고 요청을 드렸어야 했다는 생각이 든다. 다음 프로젝트에서는 mock 데이터를 초기에 만들어서 백엔드와의 보다 원활한 커뮤니케이션을 가능하게끔 해야겠다고 다짐해본다!(백엔드는 누르면 데이터가 나오는 자판기가 아니다..ㅠㅠ 처음부터 원하는 데이터 양식을 정확하게 전달해주자!)

그리고 프로젝트 초기부터 헷갈릴만한 용어들은 서로 통일하여 정해두는 것이 좋겠다는 생각이 들었다. 이번 프로젝트의 경우 제품 리스트 페이지를 카테고리 페이지, 제품페이지, 제품 리스트 페이지 등으로 명칭하여 서로 헷갈렸던 경험이 있다.

철저한 일정관리가 있었다면 욕심을 부려도 됐다.

사실 처음하는 프로젝트이고 처음 구현하는 기능도 많아(사실 전부 처음하는 기능들이었다...) 내 능력으로 구현이 가능한지 몰라 포기한 부분이 많았다. 그러다보니 처음에 계획을 세울때부터 약간 느슨하게 짜여진 느낌도 없지 않았다. 그런데 하다보니 검색과 멘토님들과 함께라면 충분히 가능한 부분이 많았고, 계획을 잘못세워도 한참 잘못 세웠다는 느낌이 들었다. 앞으로 프로젝트를 진행할 때는 멘토님과도 충분한 상의를 하고 계획단계에서부터 잘 해야겠다는 생각을 했다! 2차 프로젝트가 끝나면 혼자 진행해볼 추가기능 사항은 아래와 같다.

• 페이지네이션 or 무한 스크롤 기능
• 리액트를 활용한 애니메이션 기능
• top 버튼 기능
• 반응형 웹