6월부터 개인으로 진행했던
Link Memo Project가 마무리되었다! 프로젝트가 끝났으니 이제 프로젝트를 하게 된 이유와 회고글을 작성해보려고 한다.
프로젝트 계기 및 소개
이번 프로젝트 전에 했던 모아모아 프로젝트를 회고하면서 부족했던 점 중 하나가 컴포넌트 설계였다. 빠르게 프로젝트를 마무리해야 하는 상황이라서 컴포넌트 설계에 대한 깊은 고민 없이 동작하는 데에만 집중했던 것 같다. 이런 부족한 점을 채워보고자 리액트 컴포넌트 설계에 대한 공부도 할 겸 프로젝트를 진행했다.
프로젝트를 주제를 정할 때 거창한 주제 말고 나에게 필요한 것이 무엇일까 먼저 생각했다. 개발 공부를 하면서 구글링을 정말 많이 하는데, 이때 찾은 자료의 링크 주소를 카카오톡으로 나에게 보내거나 노션에 기록하거나 브라우저 즐겨찾기에 저장하는 편이다. 여러 곳에 링크 주소를 저장하다 보니 나중에 다시 자료가 필요할 때 찾기 힘든 경우가 많았다. 이 경험을 바탕으로 링크 주소를 카테고리별로 한 곳에 모아 저장할 수 있고, 더불어 어떤 도움이 되었는지 간단하게 기록할 수 있는 메모장을 개발했다.
회고
잘한 점
지금까지 Presentationl & Container 컴포넌트 패턴만 이용했었는데 이번에는 Component & Hooks 패턴을 사용했다. 커스텀 훅으로 어느 수준까지 로직을 분리해야 하는지 기준점을 찾기 어려웠지만, 리팩토링하면서 나름대로 기준을 정리했고, 최대한 관심사를 분리하며 커스텀 훅을 만들며 컴포넌트를 설계했다. 잘 동작하는 코드여도 전체적으로 다시 보고 기존 코드의 문제점과 개선 방안을 생각하며 신중하면서도 과감하게 리팩토링을 진행했다.
🛠️ 리팩토링 과정 보러가기
부족했던 점
처음으로 백엔드 개발을 해보았다. 백엔드 개발을 학교에서 조금 배우고, 제대로 배우진 않아서 많이 부족함을 느꼈다. 그래도 학교에서 조금 배운 거 치고는 잘 동작하는 api를 구현했고, swagger 문서도 만들어 보았다. 지금은 백엔드 개발 쪽으로 갈 생각은 없기 때문에, 부족했지만 DB 설계와 api를 만들어보았다는 것만으로 만족한다.
배운 점
프로젝트 진행과 동시에 타입스크립트를 배우기도 했고, 리액트 컴포넌트 관련 영상도 보며 배운 점들을 프로젝트에 녹여내려고 노력했다.
✍️ 배운 내용들을 정리한 velog 글들
마치면서
React는 개발자의 자율성이 높은 라이브러리라서 컴포넌트를 다양한 방식으로 설계할 수 있다. 그래서 다양한 컴포넌트 디자인 패턴이 존재하고, 개발자 입맛에 맞게 선택할 수 있다. 하지만, 자율성이 부여된 만큼 컴포넌트 설계와 성능에 신경을 써야 하고, 클린코드를 작성해야 한다는 책임감을 가져야 한다는 것을 느꼈다. 😁
