[React] 멋쟁이사자처럼 해커톤 회고 - AI 추천 플랫폼 AILION

목차

📌 요약

멋쟁이사자처럼 11기 중앙 해커톤에서 진행한 해커톤 프로젝트 AILION 회고를 정리한다. AILION은 AI 정보 제공, 사용자 맞춤형 AI 추천, 커뮤니티 기능을 갖춘 웹 플랫폼이다.

 

---

📌 1. 프로젝트 주제

• 다양한 AI 도구의 정보를 한곳에서 확인할 수 있는 AI 추천 플랫폼이다.
• 회원가입 시 음악, 영상, 소설, 검색엔진에 대한 흥미지수를 입력하면 사용자 맞춤형 AI를 추천한다.
• 커뮤니티에서 다른 사용자들과 AI 노하우·수익 창출 정보를 공유할 수 있다.

📌 2. 프로젝트 개요

프로젝트 개요

프로젝트 개요

프로젝트 아키텍처

프로젝트 아키텍처

프로젝트 ERD

프로젝트 ERD

📌 3. 기술 스택

분류	사용 기술
Frontend	React 18.2, React Router DOM v6, JavaScript, Axios, react-bootstrap, styled-components, react-modal
Backend	Java 16, SpringBoot 2.7.14, Spring Data JPA, Spring Security, JWT, Lombok, Validation
DB	MySQL 8.0.31
인프라	AWS EC2
Node 버전	v18.16.0 / npm 9.5.1

📌 4. 프로젝트 기능

페이지	기능 설명
홈	서비스 소개 및 주요 페이지 진입점
AI 정보	이미지, 검색형, 글쓰기, 음악, 비디오, 기타 카테고리별 AI 목록 조회
AI 추천	인기 AI TOP 5 표시, 로그인 사용자 맞춤형 AI 추천
커뮤니티	게시글 목록/상세 조회, 좋아요, 댓글 작성·삭제, 조회수
글 작성	로그인 사용자 게시글 작성
로그인/회원가입	JWT 기반 인증, 아이디 중복 체크, 흥미지수(1~5) 입력, 유효성 검사
마이페이지	닉네임·이메일·비밀번호·생년월일·관심분야 수정, 내가 쓴 글·댓글 단 글 조회
이용방법	사이드바 내 모달로 단계별 서비스 사용법 안내

📌 5. 구현 특이 사항

- JWT 기반 인증 및 로그아웃

로그인 성공 시 서버에서 받은 JWT 토큰과 userId를 localStorage에 저장한다. 이후 모든 인증이 필요한 API 요청에 Authorization: Bearer {token} 헤더를 포함한다. 로그아웃 시 localStorage에서 토큰과 userId를 제거하고 홈으로 이동하는 방식으로 구현했다.

 

- 사용자 맞춤형 AI 추천

회원가입 시 음악, 영상, 소설, 검색엔진에 대한 흥미지수(1~5)를 입력하면 백엔드에서 해당 관심사 기반으로 AI를 추천한다. 비로그인 사용자에게는 기본 추천 목록을 제공하고, 로그인 사용자에게는 개인화된 추천 목록을 제공하는 두 가지 API를 분기 처리했다.

 

- 이용방법 단계별 모달

사이드바의 이용방법 버튼을 누르면 AI 정보, AI 추천, 커뮤니티, 회원가입 순서로 단계별 안내 모달이 표시된다. 이전·다음 버튼으로 단계를 이동하고, 마지막 단계에서는 닫기 버튼으로 모달을 종료한다.

 

- 좋아요 토글

게시글 상세 페이지에서 좋아요 버튼을 클릭하면 좋아요 상태에 따라 POST 또는 DELETE 요청을 분기 처리한다. 비로그인 상태에서 좋아요를 누르면 로그인 페이지로 이동한다.

 

- Git 브랜치 전략

FE와 BE 코드를 각각 독립적인 브랜치(FE/main, BE/main)에서 개발한 뒤 develop 브랜치에서 통합하고, 최종적으로 main에 병합하는 방식으로 운영했다.

 

Git 브랜치 워크플로우

Git 브랜치 워크플로우

📌 7. KPT 회고

7.1 Keep - 잘한 점

• FE/BE 브랜치를 분리하여 병렬 개발이 가능했고, develop 브랜치에서 통합 후 main에 병합하는 브랜치 전략을 운영했다.
• 비로그인, 로그인 사용자를 API 레벨에서 분기 처리하여 두 사용자 유형 모두에게 적절한 콘텐츠를 제공했다.
• 공통으로 사용하는 Sidebar 컴포넌트를 분리하여 모든 페이지에서 재사용했다.

7.2 Problem - 아쉬운 점

• JWT 토큰을 localStorage에 저장하는 방식은 XSS 공격에 취약하다. httpOnly 쿠키 방식으로 개선이 필요하다.
• 마이페이지에서 닉네임·이메일 등 수정 기능이 UI만 구현되고 실제 API 연동이 미완성 상태이다.
• 댓글 단 글 페이지(MyCommentsPage)가 더미 데이터 상태로 실제 API 연동이 되어 있지 않다.

7.3 Try - 앞으로 할 것

• 마이페이지 수정 기능과 댓글 단 글 조회 기능의 API 연동을 완성한다.
• JWT 저장 방식을 httpOnly 쿠키 방식으로 변경하여 보안을 강화한다.
• 해커톤 특성상 시간이 부족했지만, 다음 프로젝트에서는 README 문서화와 역할 분담을 초반에 구체적으로 정리할 것이다.

📌 8. 커밋 컨벤션

태그	설명
Init	프로젝트 초기 설정
Feat	새로운 기능 추가, 디자인 변경사항
Fix	버그 수정
Docs	문서 추가 및 수정 (README, templates, Assets)
Refactor	코드 리팩토링 (성능 개선만 해당)
Style	코드 의미 및 성능에 영향을 주지 않는 수정
Chore	빌드, 설정 파일 등의 수정
Comment	주석의 수정

커밋 메시지 형식: [작업태그] #이슈번호 - 작업내용
예) [Fix] #6 - fix css conflict
커밋 메시지는 영어로 작성하며 동사로 시작한다.