🐝 디저비 프로젝트 회고

팀 프로젝트 경험을 쌓고자 인프런을 통해 지원을 해서 하게 된 프로젝트였다. 한 5군데 이상 지원을 했었고, 그 중에서 이 팀에서 제일 하고 싶다는 생각을 했었는데 운 좋게도 나와 같이 하고 싶다고 연락을 주셔서 팀에 합류할 수 있었다. 내 생각보다 규모가 컸던 프로젝트였고, 백엔드 분들 뿐만 아니라 PM, 디자이너 분들과도 함께 할 수 있어서 좋은 경험이 됐다. 내가 다른 웹 프론트엔드 분을 대신해서 중간에 들어간 거라 프로젝트 구조나, 이미 완성돼있는 코드를 이해하는 데는 좀 어려움이 있었지만, 인수인계 해주시는 분이 질문할 때마다 너무 친절하게 답변을 해주시고, 상세하게 알려주셔서 금방 적응할 수 있었던 것 같다.

🛠️ 사용 기술

• React : 컴포넌트 기반으로 재사용성과 유지보수가 용이해 선택
• Next.js : 서버 사이드 렌더링과 정적 사이트 생성을 지원해, 초기 페이지 로딩 속도를 높이고 SEO 최적화에 유리하기 때문에 선택
• TypeScript : 코드 안전성과 가독성을 높여 대규모 프로젝트에서 버그 발생을 최소화하고 유지보수를 용이하게 하기 위해 선택
• TailwindCSS : 유틸리티 클래스 기반으로, 별도의 CSS 작성 없이 빠르게 스타일을 적용할 수 있어 개발 생산성을 높이기 위해 선택

 

👩🏻‍💻 맡은 역할

 

사장님 전용 대시보드 개발을 담당하여, 디자이너가 제공한 UI 시안을 실제 서비스 화면으로 구현했다. 가게 기본 정보, 메뉴 관리, 통계 등 약 20여 개의 페이지를 설계하고 구현했으며, 각 화면별로 CRUD 기능을 직접 설계해 REST API와 연동하여 실시간 데이터 반영과 처리가 가능하도록 했다. 또한, 입력값 검증과 에러 처리에 신경 써 사용자 경험을 향상시켰고, 백엔드 및 디자이너와 긴밀히 협업하여 기능을 상세화하고 UI 완성도를 높였다.

 

🗝️ 개선하고 싶은 부분

1️⃣ storeUuid 의 전역상태 관리

 const searchParams = useSearchParams();
 const storeUuid = searchParams.get('storeUuid');

• 모든 api 를 호출하기 위해서는 storeUuid 가 필수적으로 필요했는데, URL 파라미터로 받은 storeUuid 를 전역 상태로 관리하지 않아, 여러 하위 컴포넌트에서 계속 props 로 전달해야 하는 점이 불편했다.
• 이로 인해 컴포넌트 간 의존성이 커지고, 코드 유지보수가 어려워지는 등의 문제가 발생할 수 있다는 것을 알게 됐다.
• storeUuid 를 전역 상태에 저장해서 필요할 때마다 직접 가져다 쓰도록 개선하면 좋을 것 같다.

2️⃣BasicInfoEditForm 부분

위와 같은 화면을 구성한 부분이다

• 코드가 한 파일에 너무 많은 기능과 로직을 담고 있어서 가독성이 떨어진다. (약 1200줄)
• 각 영역을 각각 독립 컴포넌트로 만들면 가독성, 유지보수성, 확장성이 향상될 것 같다.

이걸 개발하던 당시에, 다른 사람에게 전달 받은 코드를 그대로 유지해야된다는 생각도 있었고, 갈아엎을 용기도 없었고,, 뭔가 빠른 시간 안에 해야 됐었기에 문제를 만들고 싶지 않은 마음이 컸던 것 같다. 근데 지금 보면 1200 줄이나 되고, 만약 이거를 수정한다고 하면 엄두가 나지 않는다 ㅋㅋㅋㅋㅋ ..

 

그리고 나는 컴포넌트를 재사용 목적이 있는 경우에만 만들려고 했던 것 같은데, 개선할 점을 찾다보니 재사용 목적이 없어도, 각각의 주요 영역을 모두 컴포넌트로 쪼개는 것 (하지만 하나의 컴포넌트가 한 가지 역할만 담당할 정도로, 의미 있는 단위로 쪼개기) 이 리액트 개발에서 권장되는 패턴이라고 한다. 컴포넌트를 쪼갤 때에는 재사용 가능성보다 유지보수성을 우선으로 생각해야된다는 것을 배웠다. 

 

✍🏻 배운 점

이번 프로젝트를 통해 Next.js 를 처음 경험해봤다. 하지만 리액트 훅을 사용할 때 'use client' 를 사용한다거나 자동 라우팅 같은 기본 기능 외에는 아직 내부 동작 원리나 차이점에 대해 깊이 이해하지 못해 앞으로 더 공부가 필요할 것 같다. 

 

가장 크게 배운점이라고 하면 백엔드, 디자이너, PM 등 다양한 팀원들과 협업하는 방법을 배웠다. 예를 들자면, 피그마의 시안이 정확하게 어떤 것을 요구하는지 모르겠을 때나 시안에서 원하는 바와 백엔드에서 전달해주는 값의 차이가 있을 때 이런 부분에서 백엔드 분과 디자이너 분과 정말 많은 대화를 했던 것 같다. 내가 원하는 바를 정확하게 말하되, 상대가 기분 나쁘지 않게, 정중하게 말하는 법을 배웠다. 개발이라는 분야는 서로 소통이 굉장히 중요하다는 것을 다시 한 번 알게 된 것 같다.

 

프로젝트 중간에 합류하면서 짧은 시간에 해야할 일들이 많아 초반에는 스트레스를 많이 받았다. 하지만, 통계 기능 구현과 계층별 역할 분리를 통한 API 연동 등 내가 해보지 않았던 것들을 많이 경험해보고 배울 수 있어서 나에게 너무 좋은 성장의 기회였던 것 같다. 

 

🔗 깃허브 링크

https://github.com/swyp-season8-4-team/frontend