-
2인으로 이루어진 팀 스터디를 통해 카카오프렌즈샵을 예시로 구현한 쇼핑몰입니다.
-
기간 : 22.09.02 ~ 22.11.14
-
1차 리팩토링 기간 : 23.01.26 ~ 23.03.03
-
2차 리팩토링 기간 : 23.03.27 ~ 23.04.23
-
정찬욱: 프론트엔드 기능 담당 및 백엔드 보조, 배포
-
박민규 : 백엔드 기능 및 데이터 파이프라인, 배포
-
메인페이지
-
홈 화면 (특정 상품을 캐러셀 형식으로 광고)
-
베스트 화면 (조회수 순으로 전체 상품 나열)
-
장바구니 화면
-
-
상품 상세페이지
-
정보출력
-
조회수
-
장바구니
-
구매하기
-
리뷰 작성
-
-
마이페이지
- 구현 예정
-
로그인 화면
- 로그인 버튼을 누르면
/oauth/callback/kakao리다이렉트 링크를 통해 카카오 로그인 api 호출을 하고 응답 성공 시 로그인
- 로그인 버튼을 누르면
비회원일시 - 로그인창 보내기
-
IntelliJ
-
Visual Studio Code
-
HeidiSql
-
Sourcetree
-
GitHub
- Postman
접기/펼치기
-
JAVA 11 -
Spring MVC -
Spring Boot Security -
Spring Data JPA -
JWT -
Oauth -
thymeleaf -
lombok -
devtools -
mysql-connector-java -
gson -
springsecurity5
- Gradle
-
Mysql
-
RDS
- Typescript
-
React
-
React-Router
-
Apollo-client (로컬에 저장된 데이터를 전역 적으로 상태관리 하고 apollo 서버의 정의 된 리졸버를 클라이언트에서 사용하기 위해 사용)
-
axios (kakao api를 호출하기 위해 사용)
-
kakao login api & kakao Pay api
-
Styled-Component & Material UI 라이브러리 (스타일링을 위해 사용)
-
react-bootstrap (캐러셀을 구현하기 위해 사용)
-
react-daum-postcode (구매하기 시 배송 주소를 받아오기 위해 사용)
- GraphQL
-
git repository 다운로드 후 로컬환경에서 서버 실행 테스트 및 유저 데이터 검수 작업<박민규>
-
Web Server 구성
-
기존
- AWS EC2의 아마존 Ubuntu 기반 위에 Spring의 파일을 jar로 배포 및 React와 Apollo 서버 실행 <박민규>
-
리팩토링 후
- AWS EC2의 아마존 Ubuntu 기반으로 Apollo 서버 실행 & AWS S3 기반으로 클라이언트 배포 <정찬욱>
-
-
GraphQL
하나의 엔드포인트만을 사용하여 요청하는 쿼리에따라 다른 응답을 반환할 수 있도록 설정 <정찬욱>
-
Apollo-Cient
state 관리를 위해 사용 <정찬욱>
접기/펼치기
-
기존 자바 스프링으로 구현한 server와 apollo server 통합
-
로그인
-
여러명이 접속해 있을때 마이페이지에서 다른 유저의 정보가 출력되는 문제 발생을 수정
-
카카오 로그인 통신 방식 : REST API --> Javascript JDK
-
-
폴더 구성 및 컴포넌트 분류 미흡
-
Page폴더와 Component 폴더가 있음에도 Page폴더 안에 또 다른 Component가 존재
-
한 컴포넌트에 300줄이상 코드가 작성되어 가독성이 떨어지고 하위 컴포넌트로 분리 미흡으로 인해 수정할 예정
-
-
결제화면 페이지
- 구매하기 누르면 주소입력이 들어간 등 결제화면 페이지가 존재하지 않아 아쉬움이 남았고 이를 수정할 예정
-
리뷰 작성
- 리뷰 수정기능 추가 및 리뷰 입력이나 수정/삭제 시 한번 더 확인시켜주는 Modal창을 보여주게 수정할 예정
-
디자인 수정
-
장바구니에 상품을 담을 시 확인 시켜주는 SnackBar 형태의 알림창 출력이 되게 수정할 예정
-
useParams를 이용하여 필터기능 수정할 예정
-
상품 데이터 크롤링 작업
- 카카오 프렌즈의 상품 중 약 100개의 상품을 크롤링 하여 상품 테이블에 저장
-
apollo 폴더
-
폴더 구조는 기존과 차이없음
-
코드의 가독성과 타입 정의의 반복을 최소화 하기 위하여 graphql 스키마와 리졸버 파일을
TypeGraphQL라이브러리로 재정의
-
-
client 폴더 (2차 리팩토링 때 최종 수정하였음 )
-
service 폴더 추가: graphql 스키마 정의 파일이 담긴
graphql폴더와 커스텀 훅 폴더, apollo서버에서 정의된 쿼리와 뮤테이션이 담긴 폴더들을 추가 -
기존엔 컴포넌트 안에 styled-componets로 작업한 css 코드들을 넣었는데 코드의 가독성을 위해
.style.tsx로 분리, 그리고styles폴더를 생성하여 공통적인 스타일링 요소를 관리 -
store 폴더 추가 : apollo-client로 로컬의 전역 상태 관리 파일을 모아둔 폴더
-
utils 폴더 추가 : 공통으로 사용되는 함수를 분리 시킨 파일을 모아둔 폴더
-
📦src
┣ 📂asset
┃ ┗ 📂image
┃ ┃ ┣ 📂category
┃ ┃ ┣ 📂etc
┃ ┃ ┗ 📂loading
┣ 📂components
┃ ┣ 📂AlertPage
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┗ 📜AlertPage.Common.style.tsx
┃ ┃ ┣ 📜EmptyCart.tsx
┃ ┃ ┣ 📜Error.tsx
┃ ┃ ┣ 📜Login.tsx
┃ ┃ ┗ 📜PreparingPage.tsx
┃ ┣ 📂Avatar
┃ ┃ ┣ 📜CategoryAvatar.tsx
┃ ┃ ┗ 📜HeaderAvatar.tsx
┃ ┣ 📂Button
┃ ┃ ┗ 📜ScrollTopButton.tsx
┃ ┣ 📂Dialog
┃ ┃ ┣ 📜DeleteCartDialog.tsx
┃ ┃ ┣ 📜DeleteReviewDialog.tsx
┃ ┃ ┗ 📜UpdateReviewDialog.tsx
┃ ┣ 📂Footer
┃ ┃ ┗ 📜Footer.tsx
┃ ┣ 📂Header
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┣ 📜Header.style.tsx
┃ ┃ ┃ ┗ 📜SearchBar.style.tsx
┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┗ 📜SearchBar.tsx
┃ ┣ 📂Loading
┃ ┃ ┗ 📜Loading.tsx
┃ ┣ 📂Modal
┃ ┃ ┗ 📜BuyOneProductModal.tsx
┃ ┣ 📂Preparing
┃ ┗ 📂SnackBar
┃ ┃ ┗ 📜FeedBack.tsx
┣ 📂constant
┃ ┣ 📜category.ts
┃ ┣ 📜map.ts
┃ ┣ 📜oAuth.ts
┃ ┣ 📜reg.ts
┃ ┗ 📜storageKey.ts
┣ 📂pages
┃ ┣ 📂Main
┃ ┃ ┣ 📂Best
┃ ┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┃ ┣ 📜BestProducts.style.tsx
┃ ┃ ┃ ┃ ┗ 📜ProductReviews.style.tsx
┃ ┃ ┃ ┣ 📜BestProducts.tsx
┃ ┃ ┃ ┣ 📜Product.tsx
┃ ┃ ┃ ┣ 📜ProductReviewList.tsx
┃ ┃ ┃ ┗ 📜ProductReviews.tsx
┃ ┃ ┣ 📂Cart
┃ ┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┃ ┣ 📜Cart.style.tsx
┃ ┃ ┃ ┃ ┣ 📜CartList.style.tsx
┃ ┃ ┃ ┃ ┣ 📜DeliveryFee.style.tsx
┃ ┃ ┃ ┃ ┗ 📜Receipt.style.tsx
┃ ┃ ┃ ┣ 📜Cart.tsx
┃ ┃ ┃ ┣ 📜CartList.tsx
┃ ┃ ┃ ┣ 📜DeliveryFee.tsx
┃ ┃ ┃ ┗ 📜Recceipt.tsx
┃ ┃ ┣ 📂Contents
┃ ┃ ┃ ┗ 📜Contents.tsx
┃ ┃ ┗ 📂Home
┃ ┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┃ ┣ 📜BannerSlide.style.tsx
┃ ┃ ┃ ┃ ┣ 📜Category.style.tsx
┃ ┃ ┃ ┃ ┣ 📜Home.style.tsx
┃ ┃ ┃ ┃ ┗ 📜NewProducts.style.tsx
┃ ┃ ┃ ┣ 📜BannerSlide.tsx
┃ ┃ ┃ ┣ 📜Category.tsx
┃ ┃ ┃ ┣ 📜Home.tsx
┃ ┃ ┃ ┗ 📜NewProducts.tsx
┃ ┗ 📂Sub
┃ ┃ ┣ 📂BuyCheckout
┃ ┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┃ ┗ 📜BuyCheckOut.style.tsx
┃ ┃ ┃ ┣ 📜BuyCheckout.tsx
┃ ┃ ┃ ┣ 📜OrderCustomer.tsx
┃ ┃ ┃ ┣ 📜OrderProducts.tsx
┃ ┃ ┃ ┣ 📜Payment.tsx
┃ ┃ ┃ ┗ 📜ShippingAddress.tsx
┃ ┃ ┣ 📂Mypage
┃ ┃ ┃ ┗ 📜Mypage.tsx
┃ ┃ ┗ 📂Search
┃ ┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┃ ┗ 📜Search.style.tsx
┃ ┃ ┃ ┣ 📜Search.tsx
┃ ┃ ┃ ┗ 📜SearchFilterButton.tsx
┣ 📂routes
┃ ┗ 📜Router.tsx
┣ 📂services
┃ ┣ 📂auth
┃ ┃ ┣ 📂graphql
┃ ┃ ┃ ┗ 📜schema.ts
┃ ┃ ┣ 📂hooks
┃ ┃ ┃ ┗ 📜useLogin.ts
┃ ┃ ┣ 📜KaKaoLoginRedirect.tsx
┃ ┃ ┗ 📜KaKaoLogoutRedirect.tsx
┃ ┗ 📂products
┃ ┃ ┣ 📂graphql
┃ ┃ ┃ ┣ 📜bestProductsSchema.ts
┃ ┃ ┃ ┗ 📜HomeSchema.ts
┃ ┃ ┗ 📂hooks
┃ ┃ ┃ ┣ 📂custom
┃ ┃ ┃ ┃ ┣ 📜useFeedback.ts
┃ ┃ ┃ ┃ ┣ 📜useFilterParams.ts
┃ ┃ ┃ ┃ ┣ 📜useGetCartData.ts
┃ ┃ ┃ ┃ ┣ 📜useLocalStorage.ts
┃ ┃ ┃ ┃ ┗ 📜useOrderData.ts
┃ ┃ ┃ ┣ 📂mutations
┃ ┃ ┃ ┃ ┣ 📜useCountView.ts
┃ ┃ ┃ ┃ ┗ 📜useReviews.ts
┃ ┃ ┃ ┗ 📂queries
┃ ┃ ┃ ┃ ┣ 📜useGetBestProducts.ts
┃ ┃ ┃ ┃ ┣ 📜useGetHomeProducts.ts
┃ ┃ ┃ ┃ ┗ 📜useGetProductById.ts
┣ 📂store
┃ ┣ 📜cart.ts
┃ ┣ 📜dialog.ts
┃ ┣ 📜modal.ts
┃ ┣ 📜oneProductBuy.ts
┃ ┣ 📜order.ts
┃ ┣ 📜search.ts
┃ ┗ 📜snackbar.ts
┣ 📂styles
┃ ┣ 📜Common.style.tsx
┃ ┣ 📜Global.style.tsx
┃ ┣ 📜modal.ts
┃ ┣ 📜styled.t.ts
┃ ┗ 📜theme.ts
┣ 📂types
┃ ┣ 📜Cart.interface.ts
┃ ┣ 📜Category.interface.ts
┃ ┣ 📜IProps.interface.ts
┃ ┣ 📜Products.interface.ts
┃ ┣ 📜Reviews.interface.ts
┃ ┗ 📜User.interface.ts
┣ 📂utils
┃ ┣ 📜getCreatedIndex.ts
┃ ┣ 📜getFormatDate.ts
┃ ┣ 📜getKakaoPayReady.ts
┃ ┗ 📜getProductsPrice.ts
┣ 📜App.css
┣ 📜App.tsx
┣ 📜client.ts
┣ 📜index.tsx
┣ 📜react-app-env.d.ts
┣ 📜reportWebVitals.ts
┣ 📜setPoxy.ts
┗ 📜setupTests.ts
- 기존 서버 구조는 백엔드 개발자가 자바 스프링으로 구축한
백엔드서버 와 프론트엔드 개발자가 구축한아폴로서버로 이루어짐- 백엔드서버 : 카카오 소설로그인 JWT를 처리하기 위해 사용된 서버
- 아폴로서버 : 데이터베이스와 연동하여 데이터 CRUD 할수 있는 서버
- 성능상의 이슈는 없지만 서버를 두개를 켜야한다는 점이 불편했고 백엔드 서버에서는 단순히 로그인 JWT만 처리하는 서버였기 때문에 아폴로 서버와 통합하고자 시도
- client에서 REST API를 이용해 카카오 서버로 로그인을 요청하고 'apollo'서버와 통신하면서 JWT를 구현하고자 하였으나
client서버와apollo서버를 같은 포트를 써야하기 때문에 구현이 어려워서 대안으로client에서 REST API가 아닌 Javascript JDK를 이용하여apollo서버와 통신하지 않고 다이렉트로 카카오 서버와 통신하는 방식으로 변경하였습니다.
- 기존엔 git 커밋 메세지 컨벤션이 따로 정하지 않아 이번 리팩토링 때 git 커밋 메세지 컨벤션에 맞춰 진행함
feat : 기능 추가, 삭제, 변경 등 기능 관련 - 코드 수정 발생
fix : 오류 개선 혹은 버그 패치 - 코드 수정 발생
docs : 문서화 작업 - 코드 수정 없음
test : test 관련
refactor : 코드 리팩토링
style : 코드 포맷팅, 디자인, 코드 변경이 없는 경우
chore : 빌드 업무 수정, 패키지 매니저 수정
- 기존엔 git 브렌치 명이 각 팀원들의 이름 이니셜로 따와서 브렌치에서 무슨 작업을 하는지 파악이 어려웠고 이번 리팩토링 때 다음과 같이 브렌치명을 수정함
- main
- develop
- refactor-client : client에서 작업하기 위해 사용한 브렌치
- refactor-apollo : apollo 서버에서 작업하기 위해 사용한 브렌치
- refactor-kakaomap : 카카오 지도 api를 이용하여 매장위치를 제대로 출력할 수있는지 테스트해보기 위해 사용한 브렌치
-
전반적으로 관심사 분리와 사용자 경험 개선에 중점을 두고 진행함.
-
기존에 컴포넌트 파일안에 styled 코드를 작성하여 코드길이가 길어져 각 폴더안의
styles에 분리시켰고 공통적으로 자주쓰이는 요소는src폴더 하위의styled폴더로 분리시켜 전역으로 사용할수 있게 수정함. -
hook이나 유틸 함수들도 분리시켰음.
-
mysql의 User 테이블의 pk값을 카카오 로그인 api에서 응답 성공 시 받아온 'kakaoId'값으로 설정
-
클라이언트에서는 'kakaoId'을 로컬스토리지에 저장하여 현재 로그인 중인 유저의 데이터만 확인할 수 있게 구현
[Apollo,Client] 카카오 소셜로그인 리팩토링
[Client] 메인 페이지 디자인 수정 & 상품 리뷰하기 리팩토링 외 기타수정 PR
-
기존 10개 데이터가 있는 상품 데이터에서 크롤링으로 수집한 100개 상품 데이터로 교체
-
헤더와 메인화면 디자인 수정
-
새로나온 상품 화면에 각각 상품마다 장바구니 버튼 추가
[Client] 메인 페이지 디자인 수정 & 상품 리뷰하기 리팩토링 외 기타수정 PR
-
리뷰 작성 시 SnackBar형태의 알림 메세지 출력 (성공 / 실패 시 각각 다른 문구 출력)
-
상품 리뷰 시 별점 기능 추가
-
상품 리뷰 시 입력된 input값과 별점 value값을 로컬 스토리지에 저장시켜 새로고침시에도 입력된 값이 유지될 수 있도록 수정
-
상품 수정 / 삭제 시 Dialog 알림 창 출력
-
컴포넌트와 Hook, 함수, 스키마, 등을 각각 관심사에 맞게 분리화
[Client] 메인 페이지 디자인 수정 & 상품 리뷰하기 리팩토링 외 기타수정 PR
-
장바구니 담기 / 삭제와 같은 기능을
apollo-server에서 뮤테이션을 정의하여 관리하였으나 불필요한 서버를 사용하는 것이라 판단하여apollo-client로 자체적으로 클라이언트에서 장바구니 데이터를 상태관리함. -
장바구니 데이터는 로컬스토리지에 저장되어 새로고침 시에도 데이터가 유지될 수 있게 수정
-
각 상품화면 마다 장바구니 버튼을 추가하였고 두 번클릭시 장바구니에 담긴 상품을 삭제할 수 있게 수정 (버튼 클릭 시 SnackBar형태의 알림 메세지 출력)
-
구매하기 버튼 클릭 시 구매 페이지로 이동
[Client] 장바구니 리팩토링 외 폴더 구조 변경 PR
-
기존에는 구매하기 버튼을 누르면 단순히 데이터베이스 테이블에만 추가되게 구현하였으나 카카오페이 api를 이용하여 실제 구매한것 처럼 구현하고 싶어 클라이언트에서 카카오페이 api를 결제 준비 api를 호출하여 결제 준비 단계까지 구현하였음
-
주문 페이지로 이동되면 배송정보를 입력할 수 있게 사용자 이름, 전화번호, 주소, 배송 메시지를 입력할 수 있게하고 값이 누락 시 구매버튼이 비활성화 됨. 버튼이 활성화 되면 카카오 페이 api를 호출시키기 위해 필요한 파라미터를 보내주면 결제를 가능할 수 있게 해주는 리다이렉트 링크값을 응답 받아와 결제 링크로 이동할수 있게 구현
-
각 입력 값들은 로컬스토리지에 저장되어 (전화번호 제외) 새로고침 되어도 입력 값이 유지될 수 있도록 구현
-
장바구니에 상품이 담겨져 있는 상태에서 상세 상품 페이지에서 구매하기 버튼을 누르면 장바구니에 담긴 상품이 아닌 해당 상품만 구매할수 있도록 하였습니다.
-
결제 승인은 클라이언트에서 처리하기에 어렵다고 판단하여 미구현
[Client] 카카오 페이 결제 준비 구현 및 번들사이즈 축소 PR
- 카톡 결제 선택 시 확인 메세지
- 결제 준비화면
-
기존에는 검색 버튼 클릭 시 바로 검색할 수 있는 화면으로 이동이 가능하게 구현되었으나 네이버나 옥션처럼 검색어 입력 후 필터링 된 결과값만 받아올수 있게 구현하고자 헤더의 위치한 검색창을 이용해 검색할 수 있도록 수정
-
검색된 데이터들을 가격순 또는 인기순으로 필터링 되도록 수정
-
쿼리스트링을 이용하여 검색 기능 리팩토링
- Suspense와 lazy를 이용하여 번들 사이즈를 축소시킴으로써 초기 로딩속도가 0.2초 이상 개선
[Client] 카카오 페이 결제 준비 구현 및 번들사이즈 축소 PR
- 리팩토링 하면서 변형된 컴포넌트의 반응형 수정
- git clone으로 다운 받은 후
cd client
npm install
npm start
-
카카오 API를 사용하려면 JS_SDK_KEY와 ADMIN_KEY가 필요하므로 https://developers.kakao.com/console/app 에서 애플리케이션 추가
-
추가 과정에서 JS_SDK_KEY와 ADMIN_KEY를 발급 후 client폴더의 상위 디렉토리안에 .env파일 생성 후 아래 양식에 맞춰서 넣어주면 됨
** .env
REACT_APP_JS_SDK_KEY="사용자의 JS_SDK_KEY"
REACT_APP_ADMIN_KEY="사용자의 ADMIN_KEY"
REACT_APP_CLINET_BASE_URL=http://localhost:3000
서버 비용 문제로 데이터 서버 및 클라이언트 서버 삭제 후 배포 중단