Mr. Egg Sushi
Kimpuro Docs

teTrips

2024.06 ~ 2024.09

teTrips는 제가 네이버클라우드에서 주관하는 교육 과정인 네이버클라우드캠프에 참가하여 진행한 프로젝트입니다.

여행 계획을 짤 때, Google Docs나 Figma처럼 동시 편집이 가능하면 좋겠다는 생각에서 시작되었습니다. 이 프로젝트는 팀 프로젝트로는 두 번째, 웹 개발로는 첫 번째 프로젝트였습니다. 웹 개발을 실제로 진행하면서 실무에서 사용되는 다양한 기술들을 탐구할 수 있는 좋은 기회가 되었습니다.

프로젝트 소개

GitHub

teTrips는 여행 계획을 동시 편집하고 경로를 최적화 할 수 있는 웹사이트 입니다.
아래의 버튼을 눌러서 사용 방법에 대한 설명을 보실 수 있습니다.

해결하려는 문제

여행 계획은 주로 한 사람이 계획을 세우고, 나머지는 단순히 따라가는 경우가 많습니다.
반면, 여러 명이 함께 계획을 세울 경우, 의견을 나누고 조율하는 과정에서 비효율성이 발생합니다. 한 사람이 화면을 공유하고 그 화면을 보며 여행 계획을 세운다 하더라도, 나머지 인원들이 실시간으로 아이디어를 공유하고 반영하기에는 어려움이 따릅니다.

teTrips는 이러한 문제를 해결하기 위해 동시 편집이 가능한 여행 계획 웹사이트입니다.
여행 계획을 실시간으로 동시 편집하고, 경로를 최적화할 수 있습니다.

목적

여행 계획을 동시 편집하고 경로를 최적화 할 수 있는 웹 사이트 개발

팀 구성

프론트엔드 2명 백엔드 2명
프론트엔드로 참여

기술 스택

React, Next.js, Tailwind CSS, TypeScript, Spring Boot, MongoDB, Git, Docker, Jenkins, TeamCity, NCP, Kubernetes

기여

저는 주로 웹사이트의 기본 기능에 대한 부분을 담당했습니다.

  • Tailwind CSS를 사용하여 전체 웹 사이트의 UI 개발

메인 페이지

메인

  • Java Spring 기반의 백엔드와 협업하여 프론트엔드에서 JWT 기반 로그인과 회원 관리 로직을 구현

로그인 페이지

로그인

회원가입 페이지

회원가입 이외에도 백엔드의 기능과 연관된 마이 페이지와 같은 페이지들을 제가 담당하였습니다.

  • Next.js 기반의 프로젝트에서 모든 설정을 담당
    • Next.js의 ESLint나 Prettier와 같은 기본적인 설정부터 배포와 관련된 Docker관련 설정도 진행하였습니다.
  • 팀의 Git 레포지토리를 관리하며 애자일 소프트웨어 개발 방법론, Git-flow, 커밋 컨벤션 등을 도입하였고, 팀의 Git 관리 규칙을 작성
  • TeamCity, Docker를 사용하여 프론트엔드를 NCP에 배포하는 CI 파이프라인 구축

CI/CD 파이프라인

cicd

해결한 문제

  • 이전 프로젝트에서는 명확한 소프트웨어 개발 방법론 없이 진행했기 때문에 일정이 계속 지연되는 현상이 발생한 경험

    • 애자일 소프트웨어 개발 방법론을 도입하고, 데일리 스크럼과 1주 단위의 스프린트를 바탕으로 일정 관리가 수월해짐
    • Jira, Confluence와 같은 생산성 툴을 도입해 개발자 경험 향상

  • 이전 프로젝트에서 명확한 Git Commit Convention 없는 무분별한 커밋으로 커밋 로그가 난잡해진 경험

    • Angular JS Commit Convention을 기반으로 하는 팀의 커밋 규칙을 정하고 Git-flow를 도입하여 Github에서 좀 더 원할한 협업을 진행함

  • 백엔드의 데이터에 변화가 생기면, 프론트엔드에서 fetch 요청을 다시 보낼 때 같은 결과가 반환되는 문제가 발생

    • Next.js의 캐싱 시스템에 대해 공부하고 Request Memoization 때문이었다는 것을 알게됨. 이후 기능에 맞는 적절한 캐싱 기법 사용으로 문제를 해결

회고

teTrips는 여행 계획과 관련된 웹사이트였지만, 저는 주로 웹사이트의 기본 기능을 담당했습니다. 여행 계획을 동시 편집하는 아이디어 자체는 제가 제시한 아이디어였고, 프로젝트의 구현에 대해 많은 애정이 있었지만, 여행 계획 부분을 구현하고 싶다는 다른 프론트엔드 팀원의 의견과, 처음으로 진행하는 웹 개발 프로젝트에서 기본적인 기능을 구현해보는 것이 저에게 도움이 될 것 같다는 생각이 들어, 여행 계획 부분은 팀원에게 믿고 맡기고 백엔드와 소통하는 기능들을 담당하게 되었습니다. 이후에도 크고 작은 프로젝트들을 진행했지만, 백엔드와 이렇게 긴밀하게 소통할 기회는 없었기 때문에, 지금도 좋은 선택이었다는 생각이 듭니다.

실무에서 사용하는 여러 기술을 접할 수 있었던 좋은 기회였고, 이러한 기술들에 대해 많은 생각을 해볼 수 있는 귀중한 시간이었습니다.

배운 점

  • 백엔드와 REST API를 통해 CRUD 작업 처리
  • JWT에 대한 이해
  • React와 Next.js 기반 프로젝트를 통해 실무와 비슷한 개발 환경 학습
  • GitHub 사용이 이전 프로젝트에 비해 활발해짐에 따라, 좀 더 체계적인 Git 관리 방법 학습

개선할 점

이전 프로젝트에서의 문제점이었던 일정이 밀리는 현상에 대해 많은 생각을 해보고 이번 프로젝트를 시작하게 되었습니다. 이번 프로젝트에서는 제가 팀장이 아니었기 때문에 작업 배분과 같은 역할은 하지 않았지만, 팀원들과의 원활한 소통을 통해 일정 지연을 최소화하려고 노력했습니다. 또한, 백엔드에서 해결하기 어려운 문제가 발생했을 때는 백엔드 코드를 공부하여 문제를 해결하기도 했습니다. 하지만 팀원들의 작업 진행 속도를 조율하는 부분은 여전히 어려운 과제가 되었습니다.

이 페이지가 도움이 되었나요?