[💻 코드스테이츠 FE 44기] 솔로 프로젝트 - 1 (프로젝트 요구 분석 및 플래닝)

✔️ 시작

오늘 부터 5일간 솔로 프로젝트가 진행된다.
다행히 코드스테이츠 측에서 디자인이 되어있는 피그마 파일을 제공해 줘서
그나마 다행이다. 이번 시간에는 바로 작업 들어가지 않고
프로젝트에 요구 분석 및 플래닝 하는 시간을 페어 분과 함께 진행했다.

---

📍 프로젝트 요구 분석 및 플래닝

✔️ 대략적인 기능 선정 단계

깃허브 레포지토리 생성, 프로젝트 폴더링 구성 및 생성, 초기 README 도큐먼트 작성 , 코딩컨벤션 정리 및 문서화 등

사실... 전부 파악하지 못 한 거 같다.

우선 기능을 세분화하게 나눴다...
나눴다 생각 했지만 분할을 잘못했다 생각한다.

큰 틀을 먼저 선정해 주었다.

각 카드를 클릭해 세부 사항을 정리했다.

여기서 놓친거라면

10H이라 정한 카드를 좀 더 세분화로 나누지 못 한 점이 아닌가 싶다.

여기서 좀 더 세분화하게

• 각각의 아이템
• 모달 창 구현 (클릭 시 상품 사진, 상품 명, 북마크 버튼, 닫기 버튼)
• 북마크 버튼 구현 (클릭 시 토스트 노출)

이렇게 나눠 정리했어야 했는데
하나로 뭉태기로 정리해서 10H이 된거 같다...

이 부분에서 1차 잘못을 느꼈다.

✔️ 컴포넌트 나눠 보기

메인페이지, 상품 리스트 페이지, 북마크 리스트 페이지, 모달창, 토스트 토글
큰 단위로 컴포넌트를 나눠 보았다.

아마 이게 정답은 아닐 거라 생각 한다 또한 작업 하다 보면서
변경되지 않을까 싶기도 한다.

그래도 컴포넌트를 나눠두니 작업하는데 좀 더 수월하다 생각한다.

❓어떠한 구조인지?

header, footer는 고정이고 MainPage, ProdectListPage, BookmarkListPage가 nav 메뉴 클릭에 따라 변경 되는 구조이다.

Router를 이용해 이부분을 해결할 수 있지 않을까 생각한다.

폴더 구조도 일단 정리해 보았다.
이또한 정답이 아니다. 코드스테이츠에서 어느 경로로 이동해 달라는 자세한 요청이 있어
그부분을 참고해서 진행하지 않을까 싶다.

그래도 이렇게 폴더를 분리해서 진행하면 이후 어떠한 작업을 해야하는지 쉽지 않을까 싶다.

✔️ 시간 분배해 보기

아까도 말했듯이...

4개의 타입에 대한 컴포넌트 개발 영역을 좀 더 세분화나누지 못했다.
시간 분배는 같이 진행한거라 갑자기 바꿀 순 없다 생각한다.

대신 개인적으로 한 번 더 세분화를 나눠 진행할까 한다.

- 각각의 아이템

• 이부분은 데이터를 연결해 보여주면 될 것 같다.

- 모달 창 구현 (클릭 시 상품 사진, 상품 명, 북마크 버튼, 닫기 버튼)

• 이부분 또한 데이터를 연결해 보여준다.
• 상품 사진, 상품 명 - 데이터 연결하기
• 닫기 버튼은 useState이나 Redux이용해 상태 관리하기
• 북마크 버튼은 아래 기능 하나 구현해 컴포넌트 재사용하기

- 북마크 버튼 구현 (클릭 시 토스트 노출)

• 북마크가 아닌걸 클릭 시 토스트 창이 나오고 북마크 리스트로 이동된다.
• 북마크인 상품을 클릭 시 토스트 창이 나오고 북마크 리스트에 삭제된다

useState, useEfect를 사용해 관리하면 된다 생각은 하고 있다.
또한 토스트도 구현을 해야한다는 점이다. 여기서 구현해야하는 항목은

• 버튼 클릭 시 on, off 아이콘 변경
• 버튼 클릭 시 토스트 창 on, off
• 북마크 여부에 따라 북마크 상품 리스트 리렌더링하기

이렇게 봤을 땐 북마크 구현에서 많은 시간 소요가 예상 된다.

---

✏️ 마치며

아직 갈 길이 멀다.
이렇게 프로젝트를 진행해본 경험이 없어 지금 잘 하고 있는게 맞을까?
첫 단추를 잘못 찼으면 어쩌지? 이런 생각이 든다...

나의 실력도 어느 정도 인지 파악하기 어려운데
어떻게 기능 구현하는데 몇 시간이 걸릴지 알 수 있는거지..? 등
많은 생각을 하게 되었다.

이번 과제를 진행하면서 프로젝트는 어떤 방향으로 흘러가는지
꼭 알고 갔으면 좋겠다. 그래야 현업에 갔을 때도 바로 파악할 수 있지 않을까 싶다.