Order 처리하기
- 제품 ID, 카테고리, 가격, 양
이들을 담을 테이블을 만들어주자.
- orders 테이블은
order_id email address postcode order_status created_at updated_at 컬럼들을 갖는다.
- order_items 테이블은
별도의 엔터티 ID를 UUID로 갖지 않고 AUTO_INCREMENT로 자동 증가하는 seq(sequence)로 키를 잡음.
개별 아이템에 대해서는 order_id product_id를 FOREIGN KEY로 했고, order_id로 검색이 되야하기 때문에 index를 걸어놨다.
그 외에 카테고리, 가격, 양, 생성시간과 추가시간을 컬럼으로 갖고 있다.
- 실수로 order_id와 product_id를 PRIMARY KEY로 지정해놓은 것을 그대로 두고 테이블을 생성명령을 보내니
Multiple primary key defined 에러가 출력된다. 이런 실수들을 조심하도록 하자.
OrderRepository 만들기
orders order_items은 order를 입력하면 두 테이블에 들어가야한다.- 인터페이스 OrderRepository를 만들고
해당 인터페이스의 구현체인 OrderJdbRepository를 만들어준다.
NamedParameterJdbcTemplate을 사용하자.
toOrderParamMap
- insert할 때는 paramMap을 전달해주어야하기 때문에
toOrderParamMap을 만들어준다.
toOrderItemParamMap
- 다음은 OrderItems
OrderItems은 OrderItems 정보 외에 order_id와 생성시간, 변경시간을 전달해야 한다.
그렇기 때문에 오더가 만들어지면, 같은 created_at과 updated_at를 갖게 되기 때문에, Order의 ID를 전달해주어야 한다. 또한 order의 created_at과 updated_at도 전달되어야 한다.
- 마찬가지로 테이블의 컬럼을 넣어준다. 단, seq는 AUTO_INCREMENT을 해놓았기 때문에 추가하지 않아도 된다.
insert
- insert는 작업이 여러번 이루어져야되기 때문에
@Transactional로 묶는다. → 한 군데라도 에러가 나면 롤백이 일어나도록 한다.
- 여기에 더해서. 원하는 것은 Order를 추가하고 OrderItems 만큼 인서트를 해야한다.
forEach사용, item만큼 업데이트 문을 날려줘야한다. seq를 제외한 값을 추가한다.
Service 만들기
- OrderRepo를 사용하는 서비스를 만들어보자.
인터페이스 OrderService 생성.
- ID는 자동으로 만들어져야하고, 이메일과 주소 등은 받아와야한다.
email address postcode orderItems는 받아온다.- 이것에 대한 implement를 생성하자.
DefaultOrderService
- OrderRepository를 사용해야하는데, 이를 이용해서 오더를 만들고, 그 오더를 OrderRepository에 추가해주어야한다.
Controller 만들기
- 먼저 API를 만들어주자.
- OrderService 를 생성자 주입으로 가져온다.
- orderService에 필요한 정보를 가져오기 위해 레코드를 만들어준다.
- 이메일은 String으로 해준다.
JSON을 표현하기 위한 데이터 정의나 어노테이션을 쓰거나, JSON이 아닌 다른 메시지 포맷으로 변환되기 위해 필요한 기능들을 넣을 수 있기 때문에 그것을 서비스에서 받아서 클래스를 인지하는 것보다,
서비스는 서비스 고유의 시그니처 메서드를 갖고, 컨트롤러가 서비스가 필요한 밸류 오브젝트나 파라미터에 매개변수로 변환하는 역할을 수행하는것이 좋다.
- 예시로 서비스는 Email이 필요한데, 이를 변환하는 역할을
createOrder 컨트롤러가 하는 것.
- Order와 OrderItem 테이블에 데이터가 정상적으로 들어가는지 확인한다.
productId와 category는 웹페이지에서 가져올 수 있다.
- 정상적으로 들어간다.
- productId 를 product_id로 써서 한참 해맸다..
리액트에서 API 요청을 받아 Order 처리하기
productId로 해야할 항목이 id로 되어있어 정보가 꼬였었다.
- 스프링부트 서버와 리액트가 잘 연결되지 않았기 때문에 구현에 문제가 있었다. 이런 문제가 생기지 않도록 조심하도록 하자.
summary에서 버튼을 클릭할 때
이메일, 주소, 우편번호는 order 데이터에 해당한다.
따라서 타이핑하는 것에 대한 상태를 관리해주어야 한다.
const [order, setOrder] = useState({});
userState, const로 order, setOrder를 필드로 정의.- 각각의 input 태그와 연결시켜준다.
value={order.~~~}
밸류 어트리뷰트에 order, 각각에 이어지는 필드를 연결한다.
- 변경 이벤트인
onChange를 했을 때, 변경이 발생했을 때 생기는 이벤트를 캐치해서 Order에 필드를 갖고 와서 연결해야한다.
const changeInput = (e) => {
const value = e.target.value;
- onChange 할때마다 받는 콜백을 연결해야함.
onChange={changeInput}
Input에 onChange가 발생하면 changeInput이 호출된다.
- 콘솔로그를 넣어서 타이핑한 값이 잘 입력되나 확인해보자.
개별로 정의하기
changeInput함수를 각 필드에 맞게 바꿔주고, onChange 값도 그에 맞춰 바꿔준다.
초기값이 없어 오류가 발생하는 것은 ~~: "으로 초기값을 공란으로 만들어서 해결해주자.onChange를 삭제하면 각 항목에 입력이 안되는 것을 확인할 수 있다.
React 컨트롤드 컴포넌트
- 요소가 리액트의 상태가 연결되는 것을
react controlled component
연결되지 않는 것을 react uncontrolled component라고 한다.
결제하기 버튼 구현하기
- 결제하기 버튼이 Order를 출력하도록 하자.
handleSubmit 구현하기
