[Toss Portfolio] 회고

👍 Liked

• 메가테라를 수강하면서 배운 코드 구조대로 관심사 분리, 테스트 코드를 작성해볼 수 있어서 좋았다.
• 혼자 기획, 디자인, FE, BE 모두 맡아서 해서 각 파트별로 어떻게 해줘야 다음 사람이 일을 편하게 할 수 있는지 경험해볼 수 있어서 좋았다.
• 반응형 디자인을 구현하면서 PC화면, 모바일 화면에서 모두 동일하게 화면을 보일 수 있게 구현할 수 있어서 좋았다.

📗 Learned

• Supabase 라는 Postgre SQL을 사용하는 데이터베이스를 사용하여 SQL 쿼리문도 작성해보고 CRUD도 배웠다.
• Zustand 라이브러리르 사용하면서 상태관리를 최대한 캡슐화하면서 코드를 작성하는 법을 배웠다.
  • 그 결과 디버깅 속도가 빨라졌다.
• Figma를 사용하면서 Auto Layout과 Frame, Component 기능에 대해 배웠다.

😅 Lack

• 개발하면서 막혔던 부분을 일일히 기록하지 못한게 아쉽다.
• 데이터베이스에 테이블을 생성하고 어떻게 데이터 구조를 가져갈 지 작성하는게 어려웠다.
  • 그 결과, 데이터를 여러번 변환하는 utils 함수가 많아져서 헷갈렸다.
• store를 만들어서 사용하는데 hooks을 통해서만 사용하려고 했던 고정관념에 있었다.
  • 예를 들어 store에 fetch 로직이 포함된 경우, useEffect에 fetch를 담아서 hook를 만들어서 사용했는데, 이곳에서 store 관련 상태값도 같이 반환해서 사용해주고 있었다.
  • 이 경우 상태값만 가져오기위해 hook을 사용하게되면 fetch도 실행되는 문제가 있으므로 이를 늦게 발견했다.
• MSW를 사용하면서 API를 mocking 했었는데, supabase를 사용하면서 연동하는 방법을 찾지 못해 MSW 대신 Vitest에서 mocking을 해준 부분이 아쉽다.

느낀점

내가 토스를 사용하면서 필요하다고 생각한 기능을 개발하기 위해 혼자 기획, 디자인, FE, BE를 모두 개발했다. 나혼자 모든 것을 다한 경험은 학원을 수료한 이후로 오래간만에 경험하는 것 같다. 이번 프로젝트를 하면서 테스트 코드를 작성을 최대한 열심히 하려고 노력했다. 그 결과 애플리케이션의 구조가 탄탄해지는 것을 느낄 수 있었다. 디버깅 시간도 줄어들고 몇주 지나서 다시 코드를 보더라도 구조파악이 쉬울 것 같다는 생각이 들었다.

 

앞으로 테스트 코드 작성을 습관화 하고 더 나아가 TDD를 적용해보도록 더 노력해야겠다.