View My Startup 개인 개발 리포트

1. 프로젝트 개요 (Projcet Overview)

이번 프젝트 View My Startup 은 사용자들이 다양한 스타트업의 정보를 조회하고 비교할 수 있으며, 모의 투자 기능을 통해 시장 분석과 예측을 경험할 수 있는 플랫폼을 목표로 합니다.

사용자는 특정 스타트업의 누적 투자 금액, 매출액, 고용 인원 등을 확인하고, 이를 비교하여 투자 의사 결정을 모의로 연습할 수 있습니다.

 

2. 담당한 작업 (Task & Contribution)

기초 작업

• 기능 요구사항 분석 및 업무 분장표 작성
• 기본적인 프로젝트 디렉토리 구조 구성(팀원별 분업화된 작업 용이 하도록 예시 제시)
• 백엔드 Node.js, Express.js 를 이용하여 기본적인 package.json 구성 및 기능별 작업 디렉토리 분류를 통해 프로젝트 기초 설정

Mock 데이터 작성 및 Seeding

• 초기 개발 단계에서 실제 데이터를 대체할 수 있는 Mock 데이터를 생성하고 데이터베이스에 시딩
• 누적 투자금액, 개발 투자금액의 데이터 수치를 계산하여 mock 데이터 구성, 테스트 및 개발 과정에서 실제와 유사한 데이터 환경 제공으로 효율적인 개발 지원
• 로고 가공 작업: 각 기업의 로고를 원활하게 사용할 수 있도록 최적화 및 포맷 변환 작업 수행

백엔드 개발

• API 설계
  • GET /api/startups :기업 목록을 조회하는 API 로, 검색어, 정렬 기준, 페이지네이션 등을 파라미터로 받아 해덩 조건에 맞는 데이터 반환
  • GET /api/starups/{id} : 특정 기업의 상세 정보를 조회하는 API로, 프론트엔드 개발 편의를 위해 다른 테이블의 정보가 있는 카테고리 이름과 해당 기업의 투자자들을 정렬, 페이지네이션 가능한 조건으로 순위를 포함한 데이터 반환
  • Get /api/startups/{id}/rank :특정 기업을 기준으로 파리미터로 전달되는 항목에 따라 인접한 상위, 하위 순위의 기업 목록 제공
• 데이터베이스 설계 및 데이터 모델링
  • Startup: 기업의 기본정보, 투자 현황, 매출액, 선택횟수 등을 저장하는 테이블 설계
  • Category: 기업의 산업분류를 관리하는 테이블
  • MockInvestor: 투자자 정보를 관리하는 테이블로, 투자 내역과 관련된 데이터 저장

프론트엔드 개발

• 전체 기업 리스트 조회
  • 리액트를 사용하여 기업 목록을 효율적으로 조회할 수 있는 기능 구현
  • 페이지네이션 컴포넌트 및 검색, 정렬 기능 개발
• 전체 화면 반응형 작업 가이드 제시
  • 다양한 화면사이즈에서 일관된 사용자 경험을 제공하기 위해 반응형 디자인 적용
  • CSS 미디어 쿼리를 활용하여 화면크기에 따라 레이아웃이 유연하게 변경되고, 텍스트 버튼이나 검색창 , 드롭다운 메뉴 등이 모바일 화면에서도 깨지지 않도록 처리

 

3. 기술적 성과 (Technical Achievements)

기술 스택

• 프론트엔드: React.js, CSS Modules
• 백엔드: Node.js, Express
• 데이터베이스: PostreSQL
• 배포: Nelify (프론트엔드), Render (백엔드)

핵심 기능

• 기업 정보 목록 조회 및 검색 기능: 테이블 구조를 사용하여 체계적인 데이터 정렬로 사용자가 정보를 한눈에 파악하고 비교하기 용이하게 구현. 다양한 필터와 검색 조건을 통해 원하는 기업을 쉽게 찾을 수 있도록 구현
• 정렬 로직 최적화: 동일한 순위를 가진 기업들이 정확하고 일관되게 표시되도록 정렬 로직을 최적화

팀 공용 GitHub 활용 및 협업 경험

• 공용 GitHub 사용 및 Pull Request, 코드 리뷰를 통해 협업

 

4. 문제점 및 해결 과정 (Challenges & Solutions)

순위 계산 로직 문제

• 문제점 : 동순위인 기업들에 대한 페이지 이동에서 순위가 잘못 표시되는 경우가 발생
• 해결 과정:
  • 프론트엔드에서 처리하려 하였으나, 성능 이슈로 API 요청시 페이지네이션 기능이 포함되어 있어, 이전 페이지와 현재 페이지에 동순위자가 포함되면 (한페이지 이상의 동순위가 있을 경우) 순위 표시 오류가 발생하는 경우가 생김
  • 백엔드에서 전체 기업에 대한 정렬을 진행 후 해당 페이지에 대한 정보를 제공하도록 수정
  • 1차 정렬 외에 동순위에 대해 2차, 3차 정렬을 추가하여 API 호출시마다 동일한 결과를 제공하도록 구현

투자 정보 생성시 오류 발생

• 문제점: Mock 데이터 시딩시 시퀀스가 포함된 경우, 이후 데이터 생성 과정에서 오류 발생
• 해결 과정:
  • 오류 원인을 파악하기 위해 상세 로그를 출력한 결과 unique constraint 오류임을 확인
  • Mock 데이터 시딩시 prisma 에서 제공하는 deletMany() 메소드 대신 TUNCATE 명령을 사용하고, 삽입된 데이터의 최대값을 재설정하는 방식으로 수정

 

5. 협업 및 피드백 (Collaboration & Feedback)

• 적극적인 협업: 코드 리뷰를 통해 서로의 코드를 점검하고 개선점을 공유함으로써 코드 품질을 높임
• 지식 공유: 각자의 스타일과 최적화 방안을 공유하며 서로의 기술적 역량을 향상 시킴
• Git 브랜치 전략: 효과적인 브랜치 전략을 통해 충돌 없이 효율적으로 협업할 수 있었습니다.
• 문제 발생시 신속한 의사소통: Zoom 회의실을 비롯하여 Nortion과 Discord를 통해 서로의 의견을 즉시 교환하고, 올바른 방향으로 수정(특히, 비지니스 로직에 대한 토론 진행시)

 

6. 코드 품질 및 최적화 (Code Quality & Optimization)

가독성 향상

• React 컴포넌트 모듈화: 컴포넌트를 모듈화하고, SearchInput, Pagination 컴포넌트 등을 별도로 분리
• CSS Modules 적용: 각 컴포넌트 별로 CSS Modules를 적용하여 스타일 충돌을 방지하고, 코드의 명확성 유지

성능 최적화

• 페이지네이션 구현: 대량의 데이터 처리 시 성능 이슈를 해결하기 위해 페이지네이션 도입, 한번에 로드되는 데이터 양을 줄임
• 순위 계산 백엔드 처리: 복잡한 순위 계산 방식을 프론트엔드가 아닌 백엔드에서 처리하여 프론트엔드에서의 처리 부담을 줄임

 

7. 향후 개선 사항 및 제안 (Improvements & Recommendations)

쿼리 최적화

• 현재 prisma ORM 을 사용하여 전체 데이터에서 순위를 계산하는 과정에 일부 반복 로직이 포함되어 있어 성능 저하가 발생할 가능성이 있음
• 직접 SQL 쿼리를 최적화하여 성능을 향상 시킬 필요가 있음
• 복잡한 순위 계산 로직을 데이터베이스 레벨에서 처리함으로써 데이터 조회 및 순위 계산의 효율성을 높이고, 응답 시간 단축
• 인덱스를 적절히 활용하여 쿼리 성능을 더욱 향상 시킬 수 있음

보안 강화

• 사용자 데이터의 보호는 플랫폼의 신뢰성을 높이기 위해 필수적
• 민감한 데이터를 암호화아여 유출 시에도 정보가 보호되도록 함
• 사용자 비밀번호를 안전하게 저장하기 위해 해싱 알고리즘을 적용 필요

데이터 시각화 강화

• 투자내역과 기업 성장률을 더욱 직관적으로 파악할 수 있도록 데이터 시각화 강화
• 다양한 차트와 그래프를 추가하여 데이터를 시각적으로 표현, 사용자가 정보를 보다 쉽게 이해하고 분석할 수 있도록 지원

사용자 맞춤형 기능 추가

• 개인화된 사용자 경험을 제공하여 사용자 만족도 향상
• 사용자의 투자 성향과 선호를 분석하여 맞춤형 스타트업을 추천하는 기능 도입
• 이를 통해 사용자가 더욱 효율적으로 투자할 수 있도록 지원

 

8. 본인이 잘했다고 생각하는 PR, 코드 리뷰

PR

https://github.com/season2-3team/season2-View-My-Startup-3team-BE/pull/30

https://github.com/season2-3team/season2-View-My-Startup-3team-BE/pull/28

코드리뷰

https://github.com/season2-3team/season2-View-My-Startup-3team-BE/pull/4#discussion_r1777170338

https://github.com/season2-3team/season2-View-My-Startup-3team-BE/pull/3#discussion_r1776972722

 

 

 

코드잇 FS 2기 (part 2) 3팀 소재희