0. GitHub 링크
(링크를 클릭하면 해당 문서로 이동된다.)
백 엔드 : https://github.com/yangwonmo910319/creer_back
프론트 엔드 : https://github.com/yangwonmo910319/creer_front
백, 프론트 엔드 통합 : https://github.com/ydj1215/Creer
파이썬 크롤링 :https://github.com/ydj1215/Creer_Pyhton
리액트 네이티브 (모바일 앱) : https://github.com/ydj1215/React_Native_Web_Viewer
1. 프로젝트 소개
프로젝트 명 : Creer (créer : 불어로 "창조하다" 라는 뜻을 가진 단어로, 웹 사이트와 어울리는 예쁜 이름이라고 생각하여 작명하였다.)
수행 기간 : 2023/12/06 ~ 2024/01/03
설명 : 기존의 아이디어스나 솜씨당 같은 핸드메이드 작품, 원데이 클래스를 구매하는 사이트에 경매 기능을 넣어 차별성을 가지는 새로운 웹 사이트를 만들어보고 싶어 시작하게 된 프로젝트이다.
2. 역할 분배
프로젝트는 총 두명이서 진행하였다.
나는 회원 쪽 기능인 카카오 로그인을 포함한 로그인, 이메일 인증을 거치는 회원 가입, 마이 페이지(아이디 변경, 비밀번호 변경, 주소 변경 등)와 사이트의 보안을 담당하는 JWT를 사용한 인증과 인가의 구현과, AWS를 통한 실제 서비스 배포, https 인증서 발급, React Native의 Web View 기능을 사용한 모바일 앱으로의 변환을 맡았고,
같이 프로젝트를 진행한 팀원 분께서는 상품 쪽 기능인 상품 구매, 장바구니, 경매 등의 기능과 파이썬의 BeautifulSoup 라이브러리를 사용한 크롤링을 통한 데이터 삽입과 결제 기능의 구현을 맡아주셨다.
프로젝트 기간인 24년 1월 3일 이후에는 개인적으로 프로젝트를 수정 및 보완중이다.
3. 개발 환경
백 엔드는 스프링 부트, 프론트 엔드는 리액트, 데이터 베이스는 MySQL를 사용해서 프로젝트를 구성하였다. 그리고 파이썬의 BeautifulSoup 라이버러리를 사용하여 크롤링을 시도하여, 데이터를 채워넣어보았다.
구현 과정에서는 스프링 부트는 인텔리제이 커뮤니티 에디션(IntelliJ IDEA)을 사용하였고, 프론트 엔드는 VsCode를, 파이썬은 파이참 커뮤니티 에디션(PyCharm)을 사용하였다.
그리고 프론트 엔드와 백 엔드를 통합하여 하나의 프로젝트로 만들 때에는 인텔리제이를 사용하여 통합하였다.
4. 포함 기술
해당 기술들은 필수적으로 넣어야 한다는 것을 전제로 프로젝트를 진행하였다.
ㄱ. 인증 및 인가 (JWT)
ㄴ. 약관 동의
ㄷ. 모바일을 고려한 반응형 웹
ㄹ. 외부 데이터와의 연동
ㅁ. 이메일 인증
ㅂ. 결제 기능
ㅅ. 제 3자 인증 (카카오톡, 네이버 아이디 등을 사용가능)
ㅇ. 페이지네이션 / 무한 스크롤
ㅈ. 웹소켓을 활용한 채팅 기능
ㅊ. 리액트 네이티브
5. 프로젝트 진행 과정
23.11.21 ~ 23.11.22 : 주제 선정
23.11.23 ~ 23.11.27 : 레이아웃 사전 조사 및 JWT, 웹 소켓 공부
23.11.28 : 계획 회의
23.11.29 ~ 23.11.30 : 파이썬을 사용한 웹 페이지 크롤링 공부
23.12.01 ~ 23.12.04 : 로고, 테마 색깔 지정, 주제 상세화, 사전 기능 테스트
23.12.05 : 역할 분배
23.12.06 : 프로젝트 시작
23.12.07 : git 규칙 지정
23.12.08 ~ 23.12.10 : 상품 등록, 수정, 삭제 구현
23.12.11 : 회원가입 시 이메일 인증 구현
23.12.12 : 카카오 로그인, 상품 이미지 등록, 수정, 삭제 구현
23.12.13 : 웹소켓을 활용한 채팅 구현 시작, 상품 리뷰 등록, 수정, 삭제 구현
23.12.14 : JWT 공부, Recoil 공부, 메인 페이지 CSS
23.12.15 ~ 23.12.17 : 상품 필터, 상품 별 옵션 구현, 마이페이지 구현 시작
23.12.18 : 마이페이지 구현, 장바구니 구현 시작, 카카오톡 로그인 오류 수정
23.12.19 : 크롤링을 통한 데이터 삽입, 장바구니 완성
23.12.20 : 메인 페이지 무한 스크롤 구현
23.12.21 : 전반적인 CSS 보완, 구매자 페이지 구현
23.12.22 ~ 23.12.26: 판매자 페이지 구현 시작 (판매 상품 목록 확인, 수정, 삭제)
23.12.27 : 버튼 CSS 수정,
23.12.28 ~ 24.01.02 : 구매 확인 및 결제 페이지 구현
24.01.03 : AWS 배포, HTTPS 적용, 프로젝트 발표
24.01.08 ~ 24.01.10 : 리액트 네이티브 웹 뷰 기능을 통한 모바일 앱 구현
6. 구현 기능 및 화면 설명
(링크를 클릭하면 해당 문서로 이동된다.)
① [PC] Creer 구현 기능 및 화면 설명
② [MobileApp] Creer 구현 기능 및 화면 설명
7. 도전과제 및 극복 과정
(링크를 클릭하면 해당 문서로 이동된다.)
아래는 프로젝트를 진행하며 맞닥뜨린 문제 상황들과, 해당 문제 상황들을 해결하기 위해 고찰했던 과정을 정리한 문서들이다.
- 스프링 부트에서 객체 생성을 위한 여러 방법들 간의 고찰
- 스프링 부트에서 객체 수정을 위한 여러 방법들 간의 고찰
- MVC 구조의 스프링 부트에서 서비스(Service) 클래스의 대한 고찰
- 스프링 부트의 엔티티(Entity) 클래스의 DTO 클래스로의 변환에 대한 고찰
- 스프링 부트의 순환 참조의 해결에 대한 고찰
- 클라이언트에서 서버로 GET / DELETE 요청을 보낼 때 데이터 전송 가능 여부에 대한 고찰
- 프로젝트에 JWT 를 적용하며 탐구한 내용들에 대한 정리
8. 프로젝트 결과 및 성과
도메인을 구매하고, AWS를 통하여 서비스 중인 실제 사이트 주소 : https://creer.kr
사이트는 인증서를 발급받아, 무조건 https 으로만 접속이 되게 설정했다.
(주기적인 금액 발생의 문제, 혹은 프리티어(무료) 서비스를 사용중이기에 서버의 폭주로 인하여 접속되지 않을 수도 있습니다. 또한 프로젝트를 주기적으로 개선 및 보완 중이기에 최신 버전의 프로젝트로 업데이트가 되지 않아있을수도 있습니다.)
9. 반성 및 개선점
① 기존에 가칭 A라는 AWS EC2 인스턴스를 사용 중이었다. 인스턴스 A를 사용하던 도중 서버에 과부하가 걸려, 부득이하게 인스턴스를 강제 종료시켰다. 이로 인해 A 인스턴스는 단독 실행이 불가능한 상태가 되어버렸었다.
A 인스턴스를 고치기 위해 몇 가지 방법들을 시도해 보았으나 전부 실패하여, 새로운 인스턴스, 가칭 B를 생성하였다. 그러나 이전 인스턴스 A에서 진행한 작업들을 전부 다시 B에서 재작업하는 것을 피하기 위해, A 인스턴스의 볼륨을 B 인스턴스에 마운트하는 방식을 채택하였다. 그러나 이 때문인지, AWS 서버가 굉장히 불안하다는 문제점을 현재 가지고 있다.
마운트하는 방식에서 벗어나, 새롭게 인스턴스를 구성하여 문제를 해결할 생각이다.
② 리액트 네이티브의 웹 뷰 기능을 사용하여 모바일 앱으로도 구현하였는데, 구글 플레이 스토어에 등록하기 위해서는, 앱을 체험해줄 스무 명의 테스터가 필요하다는 사실을 미리 인지하지 못하였다. 이 때문에 구글 플레이 스토어에 등록은 하지 못하였다.
③ 소수의 인원으로, 정해진 기간 동안 진행한 프로젝트이며, 백 엔드 쪽에 공을 들였기 때문에 CSS 적으로 아쉬움이 남아 꾸준히 수정 및 개선할 예정이다.
④ 로컬 호스트에서 실행을 하였을 때는 발생하지 않으나, aws 에 올리고, 무조건적으로 https 만 접속이 되게 설정을 하니 발생하는 오류들이 몇 가지 존재한다.
