[Main-Project] 개발 회고 1️⃣

2022.09.17(토)~20(화) 4일 동안의 BearMello 플젝 개발 회고 ✍️

🗓 22.09.17~18(토일)

🔥 TODO

• atomic design pattern으로 폴더 구조 재구성
• 마이페이지 레이아웃 구성~ing

🐼 MEMO

• storybook 실행: npm run storybook

• 컴포넌트 재사용 참고 자료

  • Component 재사용
  • React | react-router-dom을 이용한 sidebar

• Router Outlet 참고 자료

  • 리액트 라우터 v6(React Router v6) 딥 다이브

⚡️ DIARY

컴포넌트 재사용하려고 이것저것 찾아보고 컴포넌트를 잘게 쪼개보려구 했는데 생각대로 잘 되지 않았다,,🥲
관리자와 고객용에서 레이아웃을 모두 재사용하려고 고민하다 보니까 진도가 더더욱 잘 안 나간달까나.. 😵‍💫

내가 원하는 것은 마이페이지의 공통된 레이아웃 내에 sidebar는 고정으로 있구 내용 부분만 바뀌는 것이었는데 생각보다 잘 안 되서 이 부분에서 시간을 꽤나 보냈다,, 😭
이 고민을 어떻게 해결할지 구글링해보던 중에 프리 플젝때 잠깐 사용해봤던 Router의 Outlet 속성을 다시 적용해보기로 했다.
Outlet를 사용하여 마이페이지의 레이아웃 내에 라우터에 따른 여러 페이지들의 내용을 보여주는데 성공~!

---

🗓 22.09.19(일)

🔥 TODO

• 19:00~20:30 2주차 FE 멘토링
• 고객용 리뷰 등록 컴포넌트 틀 구현
• 관리자용 마이페이지 화면 틀 구현
  (내정보, 캠핑장 등록, 예약 관리, 리뷰 관리 화면)
• 마이페이지 사이드바 탭 처리

👀 해결해야 할 이슈들

• 마이페이지 사이드바 - 관리자용과 고객용 탭 이름 따로 처리하기
• storybook 적용한 버튼 onClick 이벤트 안 먹는 오류 해결하기
• 각 리뷰 버튼 클릭시 해당 리뷰 아래에만 리뷰 등록 폼 나오도록 설정하기

⚡️ DIARY

오늘 약 1시간 반동안 멘토링 시간을 가졌는데 유익했던 시간이었따 👍
이제부터 해결하는데 오래 걸렸던 문제나 에러에 대해 블로그에 해결 과정 작성해놓쟈!

Storybook 적용한 Button에 onClick 이벤트가 안 먹혀서 오전 시간 내내 삽질했다; Storybook 적용 안 한 버튼에는 이벤트 연결이 잘 되는데 storybook 적용한 Button에서는 아예 이벤트가 먹히질 않아서 일단 임시적으로 버튼 하나를 다시 만들어서 연결해놨다.
리뷰 남기기 버튼 클릭했을 때 해당하는 리뷰에만 리뷰 등록 폼이 등장해야 하는데 한번에 다른 리뷰까지도 한번에 리뷰 등록 폼 등장ㅜ 추후 해결해야 함 ~.~

위의 오류들 내일 다시 해결 도전해보쟙 💪

---

🗓 22.09.20(화)

🔥 TODO

• 어제 해결하지 못한 에러들 해결하기
  • storybook 적용한 버튼 onClick 이벤트 안 먹는 오류 해결하기
    • onClick 변수 내려주고, Button.stories.js의 argTypes 내에
      onClick: { action: "clicked" } 설정해주니까 해결 완료!
  • 각 리뷰 남기기 버튼 클릭시 해당 리뷰 아래에만 리뷰 등록 폼 나오도록 설정하기
    • isOpen을 id와 비교해서 해결쓰 😵‍💫
• Review POST & GET api 통신 구현 (일단 json-server로 구현) (axios & async await)
• API URL .env 설정

🐼 MEMO

• 리뷰 버튼 클릭시 해당 리뷰 아래에만 리뷰 등록 폼 나오도록 설정하는 문제해결 참고 자료
  • [stackOverFlow] How to show/hide an item of array.map()?

⚡️ DIARY

오늘은 어제 해결하지 못한 에러들로 끙끙대는 시간이 꽤 길었다,, 내가 원하는대로 동작할 때 짜릿하달까나✨👍
에러 핸들링을 정리해서 기록하려니 은근 시간이 오래걸린다.. 이슈가 생겼을 때의 화면도 모두 캡쳐해놓는 습관을 가져보쟈!

❗️이슈 해결 과정에 대해서는 따로 기록해두기❗️