TIL [0626] - 클론 코딩 1주차

클론 코딩

개발 환경

프론트

React : 3000 port

 

백엔드

Spring RestAPI : 8080 port

 

개발하기

1. 테스트코드 작성

2. Postman

 

3주차까지 로컬에서 개발, 깃허브 CI(지속적 통합)

 

카카오 크램폴린 IDE

가상화 컴퓨터 : 코드 배포 (.jar)

mysql : 3306 ports

hub : 깃허브와 코드 동기화 -> 빌드+테스트 -> .jar 서버에 전송 -> 실행

 

D2Hub

깃허브 코드 다운로드

             ⬇️

빌드 파일 만들기(.jar)

             ⬇️

Kargo로 배포

 

데이터베이스 테이블 설계

✅ 어떤 테이블이 필요한지 너프하게 생각해보기

• 회원가입
  • request dto, user table
• 전체 상품 목록 조회
  • product table(상품)
• 개별 상품 상세 조회
  • option table - 상품 조합
  • 배송비, 별점은 사용X - 프론트에서 렌더링 ❌
  • 상품 총 수량은 클라이언트가 만들어내는 데이터, 테이블 생성 X
• 상품 옵션 선택
  • Cart table(장바구니) - 구매 상품
• 주문 상품 정보
  • Order table(주문) - 주문 번호 등등

 

API 요청

👾 GET, POST만 사용하기 (프론트와의 약속)

API 형식

success시 true로 값을 보내고, response에 응답 결과를 보낸다.

 

json array인 response를 보면 json object들이 존재한다.

 

❕ 형식이 잘못되었을때의 메세지(에러 메세지)는 백엔드에서 보내주어야 한다.

프론트에서 잘못된 요청을 잘 막고, 백엔드에서도 혹시 모를 상황을 대비하여 잘못된 요청을 막아야한다.

 

 

Error

• error 메세지는 response에 말고 error 안에 적기. (일관성 지키기)
• 상태코드도 함께 적으면 좋다. (어떤 오류인지 알 수 있음)
• 어떤 필드에서 에러가 났는지 적기(:필드명)

참고

• check api : 중복체크 기능 필요하지 않으므로 필요 없음
  • ✅ 아이디 중복 체크시에는 화면(프론트엔드) 내에서 1번, 서버에서 1번 수행하기

 

Authorization

☑️ JWT 토큰이 없을때

인증 실패

☑️ JWT 토큰이 존재할때

인증 성공

Authorization에 JWT 토큰을 넣어주어야 인증이 되어 로그인 성공을 한다.

✅ 전송된 클라이언트 데이터는 신뢰할 수 없음을 원칙으로 한다.

 

JWT 토큰 서명값

아래 사이트에서 서명값에 대한 정보를 확인할 수 있다.

https://jwt.io/

JWT.IO

 

Postman - Authorization

 

포스트맨에 Authorization 필드 사용시 Bearer로 type을 설정하면 요청시마다 포함되어 전송된다.

 

가격 정보를 포함하지않는 이유

서버 내에서 계산하여 db에 저장할 것이다.

🤔 가격을 낮게 수정해서 클라이언트가 요청을 보낼 수 있다.

✅ 신뢰할 수 없는 클라이언트 데이터를 바로 DB에 적지 않기

 

 

장바구니 업데이트 수정하기

동일한 옵션 id이면 서버쪽에서 장바구니를 업데이트하게 해야함, 500을 던지면 안됨.

-같은 장바구니 아이템 만드는 요청으로 오해하여 에러가 발생됨

우리가 해결하기(업데이트 API로 리다이렉트?)

REST API 기준

프론트가 화면을 렌더링할 데이터만 주는 것

 

장바구니 업데이트

 

업데이트 API

 

장바구니-주문 관계

장바구니에 item 넣기

              ⬇️

주문시 장바구니 모든 아이템이 주문

              ⬇️

주문이 끝나면 장바구니 item들 사라짐

 

⭐️ 장바구니 아이템을 주문 아이템으로 옮기고 장바구니를 비운다.

주문 결과 확인

id와 이름만 알면 된다.. 화면에 보이지 않는 불필요한 정보는 수정하기! (구조는 바꾸지X, 바꾼 구조는 프론트 개발자와 공유하기)

 

⭐️ id인 primary key는 화면에 없어도 꼭 보내주기!

 

 

숙제

- 도커 강의 보고 오기 (1-23강)
 https://www.youtube.com/playlist?list=PL93mKxaRDidGMzIllhYKx1d6aMg6_5wW3 
- AWS 강의 보고 오기 (1-36강)
 https://www.youtube.com/playlist?list=PL93mKxaRDidFjQjPAzi9UxCdo2gtR-fue 
- 테이블 설계해오기 (진짜 숙제)

 

😊 도커는 요즘 필수

 

연관관계 설정하기

테이블 필드 

user (유저)

• PK
• username
• email
• password
• 날짜

product (상품)

• PK
• 제품명
• 제품사진
• 제품가격
• 날짜

option (옵션)

• PK
• 옵션 이름
• 옵션 가격
• 날짜
• 옵션개수는 우선 제외(무한대라고 생각)

cart (장바구니)

• PK
• 옵션 FK(외래키)
• 옵션 개수
• 유저 FK

order item (주문 아이템) 

• PK
• 옵션 FK(외래키)
• 옵션개수
• 주문 번호

✅ 장바구니 아이템 주문시 장바구니 데이터들을 주문 완료까지 잠깐 옮겨놓음

✅ 주문 아이템 테이블이 존재하지 않을 경우 장바구니 상품들을 구매했는지 안했는지 false,true 확인 필드 필요

 

order(주문) 

• PK
• 유저 FK

✅ 장바구니 업데이트시 사용