/traditional-liquor-recommendation-service

Spring React Project

Primary LanguageJavaScript

전통주 추천 서비스 (Traditional Liquor Recommendation Service)

0. 목차

1. 프로젝트 소개
2. 사용 기술 스택 및 버전
3. 구현 기능
4. 유저 인터페이스
5. 배운점
6. 보완할점
7. 소감

1. 프로젝트 소개

  • 역할 및 구성원
    • 인프라 및 총괄: 배용현
    • 백엔드: 김동선
    • 프론트엔드: 김지성
    • 데이터: 정민혁
  • 프로젝트 진행 날짜
    • 2022-11-23 ~ 2023-01-15
  • 프로젝트 설명
    • 사용자의 취향을 파악해 사용자가 좋아할 만한 전통주를 추천해주고, 전국 전통주점의 위치와 다양한 전통주의 정보까지 한 눈에 알아볼 수 있는 웹 서비스
  • 프로젝트 동기
    • 술을 좋아하지는 않고 잘 마시지 않는 사람에게도 어울릴만한 술이 있는지 알고싶었고, 이왕이면 흔한 술이 아닌 전통주에 접근해서 조금 더 깊게 알고 싶었습니다.
  • 프로젝트 목표
    • Spring Boot와 React를 사용한 CSR(Client Side Rendering) 방식의 SPA(Single Page Application) 개발
    • REST API를 이용한 Client-Server 통신 구현
    • AWS 클라우드 서비스를 이용하여 배포

2. 사용 기술 스택 및 버전

Front-End Back-End Database Server




  • Front-End
  • Back-End
    • Java 17.0.5
    • Spring Boot 3.0.0
    • Gradle 7.5.1
    • Tomcat 10.1.1
    • Slf4j 2.0.4
    • Lombok 1.18.24
  • Server
    • AWS EC2
      • t2.micro
      • Ubuntu Linux 20.04
    • AWS RDS
      • db.t3.micro
      • MySQL 8.0.28
    • 가비아 DNS

3. 구현 기능

  • Version 1.0

    • 메인 페이지 접속
    • 랜덤 데일리 전통주 추천
    • 전통주 검색
    • 전통주 상세 정보
    • 전통주 취향 테스트
    • 지역별 전통주점 찾기
    • 초보자를 위한 주종 설명

  • Later

    • 로그인
    • 회원가입
    • 선호 전통주 저장
    • 검색시 정렬 기능
    • 인공지능 취향 테스트
    • 지도에 표시되는 전통주점

4. 유저 인터페이스

1. 메인 페이지

메인페이지

2. 전통주 검색

전통주검색페이지 전통주검색페이지2 전통주상세페이지

3. 전통주 취향 테스트

취향테스트페이지 취향테스트결과페이지

4. 전통주점 검색

전통주점지역선택페이지 전통주점리스트페이지

5. 배운점

배용현

  • 완성된 프로젝트를 빌드하는 방법
  • 클라우드 컴퓨팅을 이용하여 배포하는 방법
  • 스프링과 리액트가 proxy를 통해 연동되는 방식
  • Json으로 통신하는 CSR 방식의 이해
  • 상태 코드 사용 및 예외 처리 방법
  • JPA 및 정규표현식의 편리성

정민혁

  • BeautifulSoup, Selenium을 활용한 정보 자동 크롤링 방법
  • Orange3 툴을 통한 데이터마이닝
  • DBSCAN, K-means 군집화 사용
  • KonlyPy 클래스로 한국어 형태소 분석
  • 유클리드 알고리즘 등 추천 알고리즘 학습
  • 전반적인 데이터분석 사이클에 대한 인사이트

김지성

  • SSR방식과 CSR의 차이(ejs템플릿 엔진을 전 프로젝트에 사용함으로서 리엑트의 필요성을 얻음)
  • 자바스크립트에 대한 중요성 => 가장 중요
  • 컴포넌트 설계에 대한
  • 리엑트 페이징 처리방식

6. 보완할점

배용현

  • 부족한 기능의 서비스
  • 미비한 유효성 체크, 에러 처리와 logging
  • Swagger같은 API 문서화 도구 이용
  • Figma같은 UI 설계 툴 이용
  • branch, project, issue, pull request 등 풍부한 깃허브 사용
  • 같은 환경에서 개발하여 통합 비용 절감
  • TDD 적용
  • 활발한 회의를 바탕으로 한 Scrum 방식의 개발

정민혁

  • 데이터 개수의 부족함으로 인한 다소 비효과적인 데이터 분석
  • 데이터 분석에만 국한된 프로젝트 참여
  • 전통주에 대한 지식 부족
  • 추천 알고리즘의 빈약함

김지성

  • 피드백이 없다보니 우리만의 시선으로 프로젝트를 만들어야 했다는 점 => 조금 더 전문적인 프로젝트 경험이 필요할 것 같음
  • REST API설계 방식 -> 설명서를 읽는 것이 필요.
  • 리엑트에 대한 내용 정리 && 견고한 복습 필요
  • 비동기 처리에 대한 작동 원리 -> await의 정확한 의미

7. 소감

배용현

오합지졸 각자 대학 스케줄 달라지면서 졸업을 따로 하게 되었는데 이 프로젝트로 유종의 미를 거둔거 같다. 다들 바쁜데도 짬내서 맡은 부분 끝내줘서 고맙고 예상 일정보다 조금 밀렸지만 Version1 포기하지 않고 완주해서 뿌듯하다.
Version2, 3에 새로 적용해보고 싶은게 되게 많은데 SSAFY 생활을 하면서 따로 프로젝트를 하는게 가능할지 모르겠다. 만약 가능하다면 이 멤버들로 다시 Version2 진행해보고 싶고, 내가 안되면 셋이서 공부해서 키워보는 것도 의미있을 것 같다.
다들 수고했고 이 프로젝트를 발판삼아 많이 성장해서 원하는 기업에 취직했으면 좋겠다.

정민혁

내가 낸 아이디어로 졸업프로젝트를 하고 이렇게 동기들과 함께 사이드프로젝트로 할 수 있었음에 뿌듯함도 느끼고 감사한 마음이 든다. 하지만 현장실습 스케줄로 인해 참여를 거의 하지 못해서 부끄러운 마음도 들고 팀원들에게 많이 미안한 마음이 들었다. 다들 고생해준 덕분에 하나의 프로젝트가 완성이 되었는데 나를 포함해서 모두 스텝업 하는 계기가 되었으리라 생각된다.

김지성

처음으로 리엑트를 사용해서 프론트엔드를 혼자 맡게 되었는데, 많이 부족한 리엑트 실력이었지만, 끝까지 나를 믿어준 오합지졸들 너무 고마웠어.. 부족한 걸 스스로 느끼던 순간마다 계속 잘한다 잘한다 옆에서 밀어준 덕에 여기까지 올 수 있었던 것 같아. 4년 아니 6년동안 가족처럼 계속 붙어다녔고, 졸업 프로젝트도 같이 했는데, 내 프로젝트 2개를 모두 오합지졸 너네들과 할 수 있어서 좋았어.. 이제 version1이 끝이 났네 음... 나도 이제 취준에 들어가고 용현이도 싸피 해야하고 민혁이도 학원일 해야하고 형도 공부하느라 바쁠텐데, 우리 또 시간 짜내서 이거 끝까지 version upgrade한 번 해보자!!! 한 번 뿐인 대학생활 처음부터 끝까지 나랑 함께 해줘서 너무 고마웠고, 꼭 다들 원하는 기업이나 하고싶은 거 하면서 즐겁게 사는 인생이 됐으면 좋겠다... 오합지졸 빠이팅!!!