과제가 아닌 실전, 파이널(기업연계) 프로젝트를 만나다!
오늘은 제가 실전 프로젝트를 경험하며 느꼈던 성장과 배움을 공유하려고 해요.
단순한 과제가 아닌 기업과 협업한 실전 프로젝트라서 더 뜻깊었던 경험이었답니다.
저희 팀이 맡은 프로젝트는 투자자와 트레이더를 연결하고 투자 전략을 공유하는 소셜 플랫폼이었어요.
주요 목표는 초보 투자자도 쉽게 접근하고, 전문 트레이더의 전략을 효과적으로 전달하는 것이었답니다.
프론트엔드 개발자로서 나의 역할
1️⃣ 서버 지연, MSW와 Axios로 효율적인 개발 환경 구축
개발 초기, 서버 개발이 지연될 상황이었어요.
이런 상황에서도 프론트엔드 개발을 멈출 수는 없었죠.
그래서 저는 MSW(Mock Service Worker)를 활용하자고 팀에 제안했어요.
팀원이 MSW 설정을 맡아 진행했고, 이후 일부 부분은 다른 팀원이 수정하며 더욱 완성도를 높였어요.
또한, API 요청과 응답 형식을 미리 정의하기 위해 Axios 인터셉터를 제안했어요.
팀원이 적용을 맡았고, 이후 서버와의 통신이 원활하게 이어질 수 있도록 대비했죠.
이런 협업 덕분에 서버 의존도를 줄이고 개발 속도를 높일 수 있었어요.
시간적 여유가 생기면서 다른 기능들도 더 꼼꼼하게 개발할 수 있었답니다.
2️⃣ 공통 레이아웃 컴포넌트 설계로 작업 효율 UP
팀원들이 반복해서 사용할 수 있도록 공통 레이아웃 컴포넌트를 설계했어요.
전체 페이지에 공통적으로 들어가는 레이아웃을 먼저 만들었고, 추가로 트레이더와 투자자 마이페이지, 그리고 관리자 페이지 전용 레이아웃 컴포넌트도 각각 설계했답니다.
덕분에 중복 코드도 줄어들어 유지보수가 훨씬 쉬워졌고, 개발 속도도 눈에 띄게 빨라졌어요.
3️⃣ TanStack Query와 컴포넌트 분리로 효율적인 개발
이번에 프로젝트에서 React와 TanStack Query를 활용해 비동기 데이터 처리와 캐싱을 최적화했어요.
문의하기 기능은 팀원들과 나누어서 작업했는데요.
- 투자자 문의하기 조회, 수정, 삭제는 다른 팀원이 맡아 구현했어요.
- 저는 트레이더 문의하기 답변 기능을 중점적으로 개발했답니다.
트레이더 문의하기 답변 구현
트레이더 문의하기 답변 기능을 구현하면서 사용자 경험과 코드 효율성을 개선했어요.
1. 새로고침 없이 실시간 반영: 답변 등록, 수정, 삭제 시 새로고침 없이 최신 데이터를 즉시 반영되도록 구현했어요.
2. 데이터 캐싱: 불필요한 서버 요청을 줄이기 위해 캐싱을 적용했어요. 같은 데이터를 반복 요청하지 않으니 성능도 한층 더 최적화되었죠.
3. 로딩/에러 상태 관리: 비동기 작업에서 발생하는 로딩이나 오류 상태를 세심하게 관리해 사용자에게 정확하고 신뢰감 있는 화면을 제공했어요.
컴포넌트 분리를 통한 유지보수성 강화
프로젝트 막바지에는 저는 팀원들이 구현한 투자자와 트레이더 문의하기 기능 전체를 정리했어요.
이 과정에서 컴포넌트 분리에 큰 고민을 하며 코드 구조를 일관되게 맞추었답니다.
작업의 효율성을 높이기 위해 기능 단위로 컴포넌트를 나누었어요.
- InquiryQuestion.tsx: 문의 내용을 보여주는 컴포넌트
- InvestorAnser.tsx: 투자자 전용 답변을 보여주는 컴포넌트
- TraderAnswerEditor.tsx: 트레이더의 답변 작성 및 수정 컴포넌트
- TraderAnswerViewer.tsx: 트레이더의 답변을 조회하는 컴포넌트
이렇게 명확하게 분리한 덕분에 코드의 재사용성과 유지보수성이 크게 개선되었어요.
나중에 기능을 확장하거나 수정할 때도 빠르게 파악하고 수정할 수 있도록 만들었답니다.
결국, 중복된 부분을 제거하고 일관된 구조를 적용하면서 프로젝트의 완성도를 한 단계 더 끌어올릴 수 있었어요.
프로젝트 진행 과정과 어려움 극복하기
프로젝트 초반, 100페이지 기획서를 두고 다양한 의견이 나와 혼란이 있었어요.
모든 기능을 다 구현하려다가는 시간 내에 완성하지 못할 것 같아, 핵심 기능에 집중하자고 팀을 설득했답니다.
또한 프론트엔드, 백엔드, 디자이너 간의 해석 차이도 문제였는데요.
기업과의 미팅을 통해 기획 의도를 명확히 하고, Figma와 Slack을 적극 활용해 실시간으로 소통하며 문제를 해결했어요.
프로젝트 막바지에는 말없는 API 변경이 가장 큰 걸림돌이었어요.
서로 막히는 상황이 많아지자, 팀 전체 슬랙에 "바뀌는 부분은 꼭 공유해달라"고 요청했죠.
이후 슬랙이 활성화되면서 소통 속도가 빨라졌고,
남은 기간 동안 개발 속도를 최대한 끌어올릴 수 있었어요.
이렇게 팀원들과의 긴밀한 소통과 협업을 통해 어려움을 극복하고,
결국 핵심 기능을 완성도 있게 구현할 수 있었답니다.
최종 결과: 핵심 기능에 집중한 프로젝트
초반부터 기능을 덜어내고 핵심 기능에 집중한 덕분에 완성도 있는 결과물을 만들 수 있었어요.
주요 결과물
[ 투자 전략 등록 및 공유 기능 ]
[ 검색 필터링 최적화 ]
[ 리뷰 및 커뮤니티 소통가능 ]
기술, 경험, 그리고 성장: 프로젝트를 통해 얻은 모든 것
1️⃣ 배운 점과 성장의 기록
이 프로젝트를 통해 기능 구현에 그치지 않고 사용자 경험을 고민하며 개발하는 방법을 배웠어요. 특히 비동기 데이터 처리 최적화, 상태 관리, 그리고 팀원들과의 협업과 소통이 얼마나 중요한지 깨달았답니다. "리더는 항상 옳다"라는 책에서 읽었던 부분이 제게 큰 위로와 방향을 주었어요. 그 문장을 읽으며 마음을 다잡고 다시 나아갈 힘을 얻었답니다.
2️⃣ 기술적 성장
- React와 Zustand: UI와 상태 관리를 체계적으로 구현
- TanStack Query: 데이터 캐싱과 성능 개선으로 최적화
- 코드 구조 최적화: 마지막 단계에서 코드 구조를 정리하고 유지보수성을 강화
이렇게 기술적으로도 한 단계 성장하며 프로젝트의 완성도를 끌어올릴 수 있었어요.
3️⃣ 소중했던 순간: 프로젝트 기간 중 맞이한 생일
프로젝트 막바지, 강의장에서 생일을 맞이했을 때 많은 사람들에게 축하받았던 그 순간이 기억에 남아요.
받았던 선물 중 하나는 더 큰 힘이 되어준 특별한 의미로 남아있답니다.
4️⃣ 함께한 팀원들에게 감사하며, 이제 부족했던 부분을 채우며
이 프로젝트를 완성할 수 있었던 건 팀원들 덕분이에요.
각자의 역할에 최선을 다해준 팀원들과 함께 고민하고 해결하는 과정에서 정말 많은 걸 배웠습니다.
어려운 순간마다 서로에게 힘이 되어주었기에, 함께 더 큰 성장을 이루어낼 수 있었어요.
이제 부족했던 부분을 채우고 한 걸음 더 나아가기 위해 노력하려고 해요.
앞으로는 더 나은 사용자 경험과 더 깔끔한 코드를 목표로 꾸준히 공부하며 성장하는 프론트엔드 개발자가 될 거예요.
여기까지 제 프로젝트 이야기를 읽어주셔서 감사합니다!
혹시 코드가 궁금하시다면 깃허브에 올려둔 소스 코드도 확인해 보세요.
더 나은 개발자가 되기 위해 꾸준히 성장하겠습니다!
👉 [깃허브 링크]
'패스트캠퍼스 데브캠프' 카테고리의 다른 글
| [패스트캠퍼스 프론트엔드 데브캠프 1기_과정 종료 회고] 데브캠프 1기에서 배운 3가지 변화 (0) | 2024.12.22 |
|---|---|
| [패스트캠퍼스 프론트엔드 데브캠프 1기_부트캠프 특강] 유저 스토리로 배우는 서비스 기획 (1) | 2024.10.04 |
| [패스트캠퍼스 프론트엔드 데브캠프 1기_부트캠프 특강] 프론트엔드 테스트의 모든 것 (0) | 2024.09.27 |
| [패스트캠퍼스 프론트엔드 데브캠프 1기_과정 중간 회고] 나는 무엇을 했는가 (0) | 2024.08.11 |
| [패스트캠퍼스 프론트엔드 데브캠프 1기_미니 프로젝트] (mbt)idle이 만든 사내 인트라넷 cubeIT 토이 프로젝트 회고 (3) | 2024.07.22 |
