[Final Project] Spring 팀 프로젝트 개발 후기

📆 제작 일정

2024년 11월 04일 ~ 2024년 12월 24일

7월부터 시작한 자바프로그래밍 국비 지원 프로그램의 대장정의 끝을 마무리하며 프로젝트의 후기를 정리해본다.

🤝 팀원 역할소개

🧑‍💻 내가 맡은 역할은?

소셜로그인을 포함한 로그인 및 회원가입 가능구현과 마이페이지 화면 UI 디자인을 구현하는 것입니다.

🔎 주제 선정 및 프로젝트 설계

트립자바는 국내 여행자들을 위한 숙박 예약을 도와주는 웹사이트 서비스입니다. 숙박 예약 사이트를 주제로 선정한 이유는 최근 숙박 예약 플랫폼은 여행, 출장 등에서 필수적인 서비스로 자리 잡았습니다.

• 여기어때 사이트를 참조하여 제작하였습니다.

📌 주요 기능

• 사용자 친화적인 인터페이스를 통한 다양한 숙소를 검색 및 예약 기능
• 소셜 로그인을 통한 간편한 회원가입
• 리뷰 기능
• 지도 기반 위치 서비스를 제공
• 실시간 예약 및 결제 시스템, 예약 및 결제 정보의 실시간 동기화
  

📌 개발환경 및 사용기술

• 개발 환경 : Eclipse, Visual Studio Code, Spring Boot, JPA Hibernate, React
• 사용 언어 : JavaScript, HTML5, CSS3, Java, JPQL, QueryDSL
• 협업 : Github
• 서버 : Apache Tomcat
• 데이터베이스 툴 : DBeaver
• API : 카카오 로그인 API, 네이버 지도 API, 토스 결제 API, 한국관광공사 공공데이터 API

📌 내가 담당한 기능의 플로우 차트

📌 ERD 설계

🖥️ 기능 구현

웹사이트의 회원정보를 관리하는 역할이라 보면 된다.

• 완성된 전체 프로젝트 다음 링크와 같습니다.

✅ 로그인/회원가입 기능

이메일에서 로그인

• 리액트 컴포넌트 구성 : 입력박스 태그의 재사용 가능성이 많으므로 input 태그를 컴포넌트로 구성하였습니다.
• 각 입력요소에 커서가 벗어날 때 마다, 입력된 값에 대해서 입력값의 형식, 빈 값 여부, 글자수 등을 확인하는 유효성 검증을 진행하여 로그인을 위한 기본 조건을 만족하는 값들만 데이터를 전송할 수 있도록 하였습니다.
• JPQL을 통한 로그인 정보 조회 : 유저 테이블에 저장된 email, password 값과 입력한 이메일, 비밀번호 값의 일치하는 검색 쿼리를 만들어서 일치여부에 따라 로그인이 진행될 수 있도록 하였습니다.

이메일로 회원가입

• 위의 로그인 페이지와 동일한 방식으로 input 컴포넌트를 사용하여 페이지 컴포넌트를 구성하였습니다.
• 위의 로그인 페이지와 동일한 방식으로 유효성 검증을 진행하여 회원정보 데이터를 전송했습니다.
• Spring에서 DB처리를 하는데 유용한 JPA를 사용하여 회원정보를 데이터베이스에 반영하였습니다.

✅ 마이페이지 기능

내정보관리

• 페이지 이동 기능 : 리액트 라우터에서 사용가능한 기능으로 jsx 코드 내에 NavLink를 사용하여 해당 페이지로의 이동과 그에 따른 동적 스타일링을 진행하였습니다.
• 리스트 출력 기능
  ① 사용자가 회원가입시 작성한 정보가 나타나도록 input jsx 코드로 나열하였습니다.
  ② 회원 정보 테이블의 인덱스 값인 user_id으로 회원정보를 조회하여 데이터베이스의 검색 성능을 개선하면서 처리하였습니다.
• 리스트 수정 기능
  ① useState hook함수를 사용하여 편집 가능 여부에 따라 동적으로 데이터 처리하여 조회되는 회원정보 입력을 하도록 처리하였습니다.
  ② 변경된 회원정보를 입력후, 저장버튼을 누르면, 회원가입 시 데이터 저장 방식과 동일하게 데이터 베이스에 저장 처리하였습니다.

예약내역

• 페이지 이동 기능 : 마이페이지의 내 정보 관리에서 동일한 방식으로 기능합니다.
• 예약 리스트 출력 및 삭제 기능
  ① useEffect 훅을 사용하여 컴포넌트가 마운트될 때 또는 userId가 변경될 때 예약 데이터를 가져왔습니다.
  ② 예약 취소 버튼을 통해서 State변수에 저장하고 확인 모달창을 거쳐 서버에 취소 요청 처리를 하였습니다.

위시리스트

• 페이지 이동 기능 : 마이페이지의 내 정보 관리에서 동일한 방식으로 기능합니다.
• 위시리스트 출력 기능 : useEffect 훅을 사용하여 위시리스트 데이터를 가져왔습니다.
• 위시리스트 삭제 기능 :
  ① 삭제 버튼을 사용하여, 특정 위시리스트 id 값을 삭제했습니다.
  hoveredItemId 상태 변수를 이용해서 마우스 상태를 업데이트하고, 삭제 버튼을 표시했습니다.
  ② 삭제 버튼이 클릭시, 클릭이벤트가 부모로 전달되지 않도록 하여 accomId에 해당하는 숙소 상세페이지로 이동하는 기능을 제한 하였습니다.

🤔 소감

프로젝트를 진행하면서, 여행을 하고 샆은 사용자들에게 중요한 숙소정보를 웹사이트로 제공할 수 있는 서비스를 직접 제작했습니다. 이러한 과정이 실제 사용자에게 유용한 서비스가 될 수 있다는 생각에 보람을 가질 수 있어 즐거웠습니다.
이번 프로젝트에서는 웹서비스의 가장 기본적인 회원관리 기능을 주도적으로 담당하였는데, 다음 프로젝트를 진행할 기회가 된다면 웹서비스의 가장 핵심적이고 특징적인 기능에 참여하여 개발자로서 더 성장할 수 있는 기쁨을 누리고 싶습니다.

🥺 아쉬운 점

프로젝트를 하면서 아쉬웠던 점은 로그인, 회원가입 기능을 담당하였는데, 프로젝트 말미에 통합 중 각 회원정보에 대해서 리뷰와 예약 및 결제 정보, 찜하기 정보 데이터가 실제 담는 과정에서 회원정보를 삭제 시, 데이터의 무결성이 충족되지 않는다는 것을 알게되었습니다. 이를 해결하기 위해 테이블간 연결된 외래키 컬럼값에 cascade 제약조건을 추가하여 데이터의 무결성이 되도록 해결하였습니다.