Jungle Board 프로젝트
🎯 이번 프로젝트는 왜 하게 됐을까?
크래프톤 정글에서 졸업 프로젝트를 앞두고 실력을 다지기 위해 1주일 동안 간단한 게시판을 만들라는 과제가 나왔다.
json-server로 Mock API를 만들어서 진행했다.
처음엔 "이번에는 꼭 디자인과 MSW를 통한 Mocking, 테스트 코드 작성, 디렉토리 구조 설계까지 전부 다 제대로 해보자!"라는 큰 꿈이 있었다.
그리고 Figma도 직접 써보고 싶었고, 최신 UI 라이브러리인 shadcn이 요즘 핫하다고 해서 그걸 참고해서 디자인을 해봤다!
결과적으로는 디자인 쪽에 시간을 더 많이 썼고, 기능 구현은 간단하게만 진행했다.
🏁 내가 세운 목표들
이번 프로젝트를 시작하면서 이런 목표를 세웠다:
- 체계적인 디자인 설계
- 반응형 UI 구현
- 디렉토리 구조 설계
- Figma 사용해보기
- API Mocking
- 테스트 코드 작성
- 디자인 패턴 적용
- 비즈니스 로직과 도메인 로직 분리
결론적으로 이 목표들 중 일부는 꽤 잘 달성했다. 특히 디자인 설계, 반응형 UI 구현, 디렉토리 구조 설계 같은 부분은 이번에 내가 꽤 신경을 많이 썼다.
하지만… 못한 부분도 있었다. 🫠
🤯 못한 부분도 있다
솔직히 테스트 코드는 전혀 못 썼다.
시간이 부족해서 그런 것도 있고, 그냥 기능 구현과 디자인에만 집중하다 보니 테스트는 뒤로 밀려버렸다.
그리고 API Mocking도 사실 json-server만 사용했지, 원래 쓰고 싶었던 MSW(Mock Service Worker)는 못 써봤다. 이건 다음에 꼭 써봐야 할 것 같다.
비즈니스 로직과 도메인 로직 분리도 이번엔 깊게 못 봤고, 이 부분은 앞으로 더 공부가 필요하다.
🔎 이번 프로젝트에서 배운 점
이번 Jungle Board 프로젝트를 통해 가장 크게 배운 건 디자인 시스템의 중요성이다.
처음엔 그냥 "디자인 좀 꾸며야지" 하는 생각으로 시작했는데, Figma로 컴포넌트들을 하나하나 정리하고 나니까 UI 작업이 훨씬 수월해졌다.
그리고 최신 라이브러리인 shadcn을 참고하면서, 요즘 디자인 트렌드도 알게 되었다.
내가 생각한 디자인을 코드로 옮기면서 일관성 있는 UI가 얼마나 중요한지도 느꼈다.
이제는 "어떤 프로젝트를 하든 간단하게라도 디자인 시스템을 정리해야겠다"는 생각이 들었다.
🚀 다음엔 이렇게 해볼 거다
이번 프로젝트를 하면서 아쉬웠던 부분들이 분명히 있었다. 그래서 다음엔 이 부분을 보완할 생각이다:
-
테스트 코드 작성
👉 이번엔 못 했으니까, 다음 프로젝트에서는 꼭 Jest랑 React Testing Library로 테스트 커버리지를 높여볼 거다. -
API Mocking 제대로 활용하기
👉 json-server만 쓰는 게 아니라, MSW로 브라우저 환경에서 API Mocking을 연습할 거다. -
디자인 패턴 적용하기
👉 프로젝트 디렉토리 구조는 이번에 신경 썼지만, 디자인 패턴은 제대로 적용하지 못했다.
👉 다음엔 리액트 디자인 패턴을 적용해서 코드 가독성과 유지 보수성을 향상시켜야겠다. -
비즈니스 로직과 도메인 로직 분리
👉 비즈니스 로직을 더 체계적으로 분리해서 유지 보수성을 높일 계획이다.
📝 마무리
솔직히 이번 프로젝트는 1주일 동안 시간 제한도 있어서 힘든 부분도 많았다.
하지만 그만큼 내가 직접 문제를 해결해야 하는 상황이 많았고, 덕분에 스스로 성장할 수 있었다.
특히 이번엔 디자인에 대한 자신감을 얻은 게 가장 큰 수확이었다. 앞으로는 디자인뿐만 아니라 테스트 코드 작성이나 비즈니스 로직 분리 같은 부분에도 더 신경을 써서 성장해 나가고 싶다.
