[공통프로젝트] 플랫폼 제작 일지 2
총 개발기간 : 01월 08일 ~ 02월 16일
요약하면 백엔드 측은 ERD, API, 기능 명세서 작성에 들어갔고
프론트엔드 측은 그동안 React 공부 및 기본 템플릿 코드를 작성을 하기로 했다.
즉, 2주차 스프린트는 아래와 같다.
- React, GSAP 공부
- API 명세서 작성 (백엔드와 같이 진행)
- UI 배치를 위한 기본 템플릿 코드를 작성
React, GSAP 공부
본격적으로 React를 공부하는데 나는 아래 강의를 참고하였다.
- 패스트캠퍼스 프론트엔드 개발 초격차 패키지
- 코딩애플 리액트 강의
UI 배치를 위한 기본 템플릿 코드를 작성하는 과정에서 실수
React 프로젝트를 구성하고, 우선 패스트캠퍼스 강의를 따라치면서 폴더를 구성해보았다.
그런데 올바르게 쳤다고 생각했는데 홈페이지가 제대로 작동이 되지 않았다.
알고보니 store 문제였다.
프로젝트를 구성하는 과정에서 src 폴더 내에는 components, pages, store이 있는데
아무래도 쇼핑몰을 구성하는 프로젝트였다보니 강사님께서 임의로 store라고 지으셨다고 생각했다.
그래서 난 store를 다른 이름으로 지었었는데 그게 실수였다.
store.js가 있다는 것도 이제 알았고, store가 고유명사라는 것을 알아버렸다.
그래서 store로 다시 고쳐주니까 올바르게 작동되었다.
React의 SCSS 적용
놀랬던게 scss를 적용하기 위해서는 css로 컴파일을 해야한다고 생각했다.
그런데 sass가 잘 설치 됐다면 그럴 필요 없이
import "./App.scss"
바로 scss파일을 import 시키면 된다. 이렇게 하면 자동으로 scss를 적용시켜준다.
ERD 작성 및 검사
백엔드 측에서 ERD를 작성했고, 컨설턴트님께 검사를 받았다.
검사를 받은 뒤에는 굉장히 고려할 것이 많다는 것을 깨달았다.
- 포인트 충전 및 소비 로그를 세세하게 기록을 해줘야 한다는 점
- 포인트 충전 일시, 소비 일시
- 포인트 충전 수단
포인트 소비 유저
- 경매 진행 로그
- 입찰 유찰 여부
- 예정 시간
- 실제로 시작된시간
- 끝난 시간
누가 얼마에 샀는지?
- 수수료 테이블
상품 목록 및 상세 페이지 구현
패스트캠퍼스 강의를 참고하면서 구현을 실시하였다.
우선은 상품이 올바르게 나타나는지 확인하기 위해서 fakestoreapi에서 상품을 따왔다.
그렇기 때문에 카테고리 명도 우선은 클론을 실시했지만 나중에는 General, Auction 등으로
바꿔주어야한다.
이제 할 일은 백엔드 서버가 구축이 되면 상품의 사진을 불러오는 등 연결을 실시하는 것이다.
상품 목록 상세 페이지도 아래와 같이 구현하였다.
리뷰 목록 및 상세 페이지 구현
패스트캠퍼스 강의를 참고하면서 구현을 했고,
좋아요 기능을 구현하기 위해서 Prisma로 가 데이터베이스를 만들어서 구현해보았다.
Prisma에 대한 간략한 내용은 이 동영상을 참고하면 좋을 것 같다.
하지만 나중에는 MySQL을 사용할 것이고, API라던지 DB라던지 이 내용은 백엔드 파트 몫이기 때문에
해당 기능은 곧 삭제될 예정이다.
그저 프론트엔드에서 어떻게 백엔드에게서 받아와야 할 지 알아두는 용도로 사용하고자 한다.
그래야지 연동이 쉽지 않겠는가?
