여행을 예산과 함께 기록하고 관리하는 웹 애플리케이션
💡 Team Project (FE 2명 | BE 2명)
- 소개
- 기술 스택
- 느낀 점
- 기능 (페이지 구성)
- 아쉬웠던 부분
- 앞으로 학습할 것들, 나아갈 방향
- 어려웠던 부분, 해결한 과정
루체 비타(Luce Vita)
- 과거 다녀온 여행, 현재 진행중인 여행, 예정된 여행을 작성하고 관리하는 앱
- 예전에 다녀온 여행의 기록을 보며 추억할 수 있음
- 현재 진행중인 여행의 일정과 예산을 관리
- 나중에 있을 여행을 작성해 예정일을 확인하며 수정할 수 있음
- 진행중이거나 가장 가까운 예정의 여행은 3주짜리 캘린더를 통해 날짜 표시
- 각 여행은 여행 카드로 표현되며, 클릭해 해당 여행의 상세 정보 확인 가능
- 여행의 제목, 시작·종료 날짜, 국가, 장소, 숙소, 예산과 잔액, 태그 표시
- 날짜별 할 일과 각 예산 지정
- 회원가입을 통해 서비스 이용 가능
작업 기간
- 2024/12, 4주
인력 구성
- 4인 (FE 2인, BE 2인)
- 홈, 여행 목록, 일정 상세
- 사용자 인증, 로그인, 회원가입, 여행 상세·수정, 마이페이지
링크 목록
TypeScript
: 정적 타입을 도입해 안정성·가독성 향상Node.js
: npm을 통해 방대한 라이브러리 이용이 가능하며, RESTful API와 잘 맞는 데이터 형식인 JSON 형식의 데이터 처리에 적합supabase
: PostgreSQL 데이터베이스를 기반으로 하며, 인증, 스토리지, 웹 소켓, 서버리스 함수 등의 백엔드 기능을 제공express
: 소규모 프로젝트에 적합하며 빠르고 유연한 웹 애플리케이션 개발에 용이vercel
: 무료로 배포 가능하면서 supabase와의 연결성도 용이Swagger
: 프론트엔드에게 명확한 API의 엔드포인트 전달 및 프론트엔드측에서 테스트 가능ERD Cloud
: 손쉽게 테이블 설계가 가능하고 테이블 간의 연결 관계를 명확하게 보여주기에 파악이 용이
- Supabase 자체가 서버리스로 이용가능한 서비스인데, 이걸 서버를 만들어서 일부 제어권을 가져오려고 하니 생각보다 힘들었음 (어디까지 자동화가 되어있고, 어디서부터 제어를 통해 해야하는지가 불분명했음)
- 로그인
- 회원가입
- 마이페이지
- 여행 목록
- 여행상세
- 커뮤니티
시연 영상
- Postgre SQL 기반의 서버리스 DB를 이용하는것이 처음이다보니 API 명세를 프론트엔드에 전달하는 것이 상당히 늦어졌고, 이로 인해 서버와 연결 후 테스트까지의 기간이 너무 짧아 오류 수정 기간이 충분하지 못함
- 커뮤니티 기능에 있어서, 대댓글, 좋아요 등과 같은 유저 간의 상호작용을 구축하지 못한 점
- Postgre SQL 기반의 데이터 베이스에 대한 추가 학습
- 이슈1: supabase에서 제공되는 OTP를 연결하여 auth.user에 자동으로 추가되는 유저 정보를 인증이 완료된 시점에서 user_info 테이블로 데이터를 넘기도록 연결하는 것
- 해결방법: SQL을 이용하여 인증이 완료되는 시점을 기준으로 자동으로 user_info테이블로 데이터가 업데이트 되도록 Trigger 설정 추가
- 이슈2: 미인증 상태로 회원가입을 중단한 유저가 동일한 계정으로 회원가입 다시 시도 할 때의 로직 구현 (auth.user에 대한 수정 권한이 따로 설정하지 않는 한 없음)
- 해결방법: rcp 함수를 추가하고, rcp를 통해 해당 user의 계정(이메일)이 auth.user에 존재하는지 확인 후 미인증이라면 해당 데이터 삭제 후 재등록