개발 리포트 작성 항목
1. 프로젝트 개요
- 대다수의 개발 시장 콘텐츠가 영어로 작성되어 있어, 영어를 잘하지 못하는 한국인들이 해당 기술을 습득하는데 어려움을 겪고 있습니다. 따라서 개발 관련 영어 문서를 함께 번역하는 챌린지를 진행하고, 번역 작업 에디터에서 번역을 진행하며 번역문에 대한 피드백을 주고받을 수 있는 서비스를 제작합니다.
2. 담당한 작업
- 백엔드
- 데이터베이스 설계: 유저, 챌린지, 번역문, 피드백, 신청 내역 등 주요 엔티티 구조 설계 및 관계 설정 (PostgreSQL)
- API 개발:
- 챌린지 관리: 챌린지 생성, 수정, 삭제, 목록 조회, 검색 및 필터링 기능 구현
- 번역 작업: 번역문 작성, 수정, 삭제 API 및 번역 상태 관리
- 피드백 시스템: 번역문에 대한 피드백 추가, 수정, 삭제 기능
- 사용자 인증 및 권한 관리: JWT 기반 로그인, 회원가입, 토큰 갱신 및 어드민 권한 확인 미들웨어 구현
- 참여 및 신청 관리: 챌린지 참여 신청, 승인 및 거절 API 개발
- 추천 기능: 번역문 추천(좋아요) 기능 및 최다 추천 번역문 조회 API 구현
- 예외 처리 미들웨어와 유효성 검사 미들웨어 구현
- 배포 및 운영: Render(백엔드), PostgreSQL 환경 구성
- 프론트엔드
- 회원가입 및 로그인: JWT 인증을 활용한 로그인 및 사용자 상태 관리
- 작업물 생성/수정 및 임시 저장: 번역문 작성 시 임시 저장 기능을 구현하여 사용자가 작업 도중 데이터를 잃지 않도록 함
- 작업물 상세 페이지 피드백 기능: 번역문에 대한 피드백을 작성하고 수정/삭제할 수 있도록 UI 및 인터랙션 구현
3. 기술적 성과
- Backend (백엔드): JavaScript, Node.js, Express, PostgreSQL, JWT
- Frontend (프론트엔드): Next.js, React, CSS Modules, Zustand (상태 관리)
- Database (데이터베이스): PostgreSQL, Prisma ORM
- 협업 및 운영: Git, GitHub, Notion, Render (백엔드 배포), Vercel (프론트엔드 배포)
4. 문제점 및 해결 과정."
- 백엔드 알림 기능 구현 고민
- 문제: 특정 이벤트(예: 챌린지 승인, 피드백 작성 등) 발생 시 사용자에게 알림을 제공해야 했지만, 어떤 방식으로 구현할지 고민이 많았음.
- 해결 과정:
- 여러 방법(WebSocket, 이메일, DB 기반 알림 등)을 고려한 후, 프로젝트 요구사항과 운영 부담을 고려하여 DB에 알림 데이터를 저장하는 방식으로 결정.
- 관련 API를 설계하여 클라이언트가 특정 시점에 알림을 조회할 수 있도록 구현.
- 프론틍 엔드 특정 페이지에서 Layout 적용 제외
- 문제: 일부 페이지(예: 로그인, 회원가입)에서는 기존 Layout을 적용하지 않고 독립적인 화면으로 구성하고 싶었음.
- 해결 과정:
- Next.js의
usePathname를 활용하여 특정 경로에 대해 Layout을 제외하는 로직을 적용.
5. 협업 및 피드백
- 컨벤션을 꼼꼼하게 정할 필요성을 느낌
- 네이밍 컨벤션을 명확하게 정하지 않으면 코드 가독성이 떨어지고 유지보수가 어려워질 수 있음을 깨달음.
- 꼼꼼한 코드 리뷰의 중요성을 느낌
- 같은 컴포넌트를 여러 곳에서 재사용하기 때문에, 어떻게 설계해야 확장성과 재사용성이 높아질지에 대해 많은 논의가 필요했음.
- 기능 개발 전 팀원 간의 사전 조율이 중요함을 배움
- 예상과 다르게 구현되는 경우가 발생할 수 있어, 개발을 시작하기 전에 팀원들과 충분한 논의를 거치는 것이 중요하다고 느낌. 또한 이를 통해서 컨플릭트를 최소화 알 수 있음을 깨달음.
6. 코드 품질 및 최적화
- 백엔드:
- 폴더 구조를 세분화하여 역할을 명확하게 분리함. 예를 들어,
controller, service, validate 등으로 나누어 각 폴더의 역할을 직관적으로 이해할 수 있도록 구성.
- API의 응답 시간을 줄이기 위해 필요한 데이터만 조회하도록 쿼리 최적화 수행.