미리보기

스타트업과 투자자 간의 원활한 연결을 목표로, 스타트업에 관한 정보 접근성에 큰 격차가 발생하는 상황을 개선하기 위해 개인 투자자들이 스타트업을 선택하여 그들의 누적 투자금액, 매출액 등을 확인하고 비교할 수 있는 모의 투자 서비스를 제공하는 웹서비스입니다.

GITHUB | 시연영상

사용된 기술 : React.js React Router AWS S3

인원 : 프론트엔드 3명, 백엔드 2명

개발 기간 : 3주

주요 기여 분야

1. 웹 애플리케이션의 UI 구현 주도

2. RESTful API 연동을 통해 클라이언트와 서버 간 데이터 통신 구현

3. 미디어 쿼리를 활용한 반응형 디자인으로 모바일, 태블릿, 데스크톱 등 다양한 디바이스에 대응

어려움을 극복한 경험

• 커뮤니케이션

  • 사람마다 작업속도가 다르기 때문에 그것을 고려하여 업무 분담을 진행했고, 어려운 문제가 있다면 다같이 논의하여 빠르게 해결할 수 있었습니다.

  • 이러한 경험을 통해 예상하지 못한 상황에서 문제를 빠르게 인식하고 해결하는 능력을 기를 수 있었으며, 부족한 부분을 보완하기 위해 적극적으로 나서면서 책임감이 더욱 강화되었고, 프로젝트의 성공적인 완수를 위해 필요한 조치를 취하는 방법을 배웠습니다.

• Module CSS

  • Module CSS를 사용하기 이전에는 모든 CSS 파일이 전역 스타일로 인식되어 분리된 컴포넌트임에도 스타일이 적용되는 이슈가 있었습니다.

  • 이를 해결하기 위해 Module CSS를 도입하여 클래스 명의 전역 오염을 방지하였고, 컴포넌트 단위의 스타일을 사용하여 유지보수성을 높이고, 스타일 충돌 또한 방지하였습니다.

기술적 성과

• Fetch API 추상화

  • 코드 중복을 줄이고, 네트워크 요청을 일과노디게 관리하기 위하여 Fetch API를 추상화하였습니다.

사용자가 요리 경험을 공유하고, 피드백을 통해 함께 성장할 수 있는 참여형 플랫폼을 제공하여, 한식 레시피와 요리 챌린지를 통해 한국 음식의 글로벌 확산을 목표로, 한식에 대한 접근성을 높이는 데에 중점을 둔 웹서비스입니다.

GITHUB | 시연영상

사용된 기술 : React Next.js App Router Typescript Github Actions AWS S3 Tailwind CSS Storybook Zustand Axios Tanstack-Query EC2 PM2

인원 : 프론트엔드 3명, 백엔드 3명

개발 기간 : 4주

주요 기여 분야

1. 팀장으로서 기획부터 개발까지 주도 및 피그마 제작 담당

2. 웹 애플리케이션의 UI 구현 주도

3. RESTful API 연동을 통해 클라이언트와 서버 간 데이터 통신 구현

4. 미디어 쿼리를 활용한 반응형 디자인으로 모바일, 태블릿, 데스크톱 등 다양한 디바이스에 대응

5. 프론트엔드 AWS 배포 담당

6. LightHouse 성능 개선 작업

7. Github Actions를 사용한 리뷰어 랜덤 뽑기 및 슬랙 알림 기능 구현

어려움을 극복한 경험

• 기획/디자인/개발을 주도

  • MVP 페이지를 선별하고 우선순위별로 작업을 나누어, Next.js와 Tailwind CSS를 활용해 효율적으로 개발

  • 기획부터 개발까지의 모든 단계를 경험하며, 전체적인 프로젝트의 흐름을 이해함

  • 사용자 경험을 고려한 디자인 설계로 재사용 가능한 컴포넌트 기반 구조를 설계하고, 개발 효율성 및 안정성을 높이며 유지보수에 용이한 코드 구조와 명확한 상태 관리 방식을 적용

• LightHouse 점수 개선

  • 개선 전 : 낮은 성능 점수와 느린 로딩 속도로 인해 사용자 경험이 저하

  • 해결 방법 :

    • 불필요한 자바스크립트 파일을 축소하여 리소스 로드를 효율화

    • Next.js의 next/image 컴포넌트를 활용하고, S3 Bucket에 이미지를 저장 후 디바이스와 상황에 적합한 포맷(AVIF, WebP)으로 변환하여 사용함으로써 이미지 최적화

  • 개선 후 : 평균 60점대였던 LightHouse 점수를 최대 100점까지 개선 및 사용자 경험과 페이지 로딩 속도가 크게 향상

기술적 성과

• 해당 프로젝트를 진행하며 기술스택에 관해 많은 회의가 진행되었습니다.

  이러한 경험이 각 기술스택의 장단점과 기술을 적재적소에 사용하는 방법을 깨달았으며, 이를 통해

  코드잇 풀스택 부트캠프 2기의 기술 트렌드를 이끌었습니다.

이사 시장에서 무분별한 가격 책정과 무책임한 서비스 등으로 정보의 투명성 및 신뢰도가 낮은 문제를 해결하기 위해, 소비자가 원하는 서비스와 주거 정보를 입력하면 이사 전문가들이 견적을 제공하고, 사용자가 이사 전문가를 선정할 수 있는 매칭 웹서비스입니다. 이 웹서비스를 통해 소비자는 견적과 이사 전문가의 이전 고객들로부터의 후기를 확인하며 신뢰할 수 있는 전문가를 선택할 수 있습니다.

GITHUB

사용된 기술 : React Next.js App Router Typescript Github Actions AWS S3 Tailwind CSS Storybook Redux-toolkit Tanstack-Query Cypress Jest AWS Amplify

인원 : 프론트엔드 3명, 백엔드 3명

개발 기간 : 6주

주요 기여 분야

1. 다양한 디바이스 환경을 고려한 반응형 디자인 주도

2. RESTful API를 활용한 클라이언트 데이터 흐름 최적화 및 UI 연동

3. Tanstack-Query를 사용한 무한 스크롤 구현

4. 소셜 로그인 구현

5. 웹소켓을 활용한 실시간 데이터 처리 및 UI 반영 기능 구현

어려움을 극복한 경험

• Cypress, Jest 충돌

  • Cypress와 Jest 모두에 expect 메소드가 있어서, Jest의 expect를 사용하더라도 Cypress expect로 인식하는 문제 발생

  • 해결 방법 : Cypress 폴더에 Typescript 설정 파일 추가 및 루트의 tsconfig에서 Cypress 관련 파일을 제외처리하여 테스트 환경간의 명확한 경계 설정

• Next.js의 다중 라우팅 방식 이슈

  • 문제 발단

    • 초기에 디렉토리 구조 설계 당시, pages 디렉토리와 app 디렉토리를 모두 활용하기로 결정

    • Next.js의 App Router를 사용하고 있었기에, pages 폴더에는 CSR로 동작하는 컴포넌트만 배치하기로 합의

  • 문제 해결

    • 하지만 이후 Tanstack Query와 Redux를 사용하는 부분에서 에러가 발생하는 상황을 확인

    • 트러블 슈팅 진행 결과, Next.js의 App Router를 사용하고 있음에도 불구하고 pages 디렉토리를 활용함으로써 Page Router도 함께 인식하게 되어, SSR 방식으로 Tanstack Query와 Redux를 사용하는 데서 발생한 에러임을 앎

    • pages 디렉토리를 _pages로 변경하는 것으로 해결

  • 느낀 점

    • 이러한 경험을 통해, Next.js의 다중 라우팅 방식이 복잡한 상황을 초래할 수 있음을 깨달았고, 디렉토리 구조를 많은 서치와 신중을 가하고 설계해야 함을 다시 한 번 느낌

2023년 학생SW 해커톤 챌린지 장려상