1016, 1017 주말 자습

cmarket_database

models > index.js

해당 유저의 주문 요청을 데이터베이스에 생성하는 함수를 작성하세요

post: (userId, orders, totalPrice, callback) => {
    let queryString = `INSERT INTO orders(user_id, total_price) VALUES(?,?)`;
    let params = [userId,totalPrice]

    db.query(queryString,params,(error, result)=>{
      if(result){
        // console.log(result)
        const queryString2 = `INSERT INTO order_items (order_id, item_id, order_quantity) VALUES ?`;
         console.log(orders)
        const params2 = orders.map((order)=> [ // orders: [{},{},{}] 
          //map을 사용해서 이중배열이 된다
          result.insertId, //order_id가 order에 없어서 쓰는거
          order.itemId,
          order.quantity
      ])
         console.log(params2)
        return db.query(queryString2, [params2], (error,result)=>{ 
// [params2] 삼중 배열로 전달하게 되고, 이렇게 해야 여러개의 레코드를 한꺼번에 저장할 수 있게 된다
          callback(error, result)
        })
      }
      callback(error, result)
    })
  }

DESC order_items

order_items테이블을 보면

id는 자동생성이되고, order_id, item_id, order_quantity가 있다.

그런데 order에는

{
  "orders": [
    {
      "quantity": 1,
      "itemId": 2
    }
    // ...여러 개의 주문 아이템
  ],
  "totalPrice": 16900
}

item_id와 order_quantity는 있지만 order_id가 없다.
그래서 order_id를 넣어주어야한다.

result를 console에 쳐보면

{
  fieldCount: 0,
  affectedRows: 1,
  insertId: 2,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0
}

이런게 나온다.
result.insertId를 사용하면 order_id에 id를 새로 만들어줄 수 있다.

map을 이용해서 orders의 요소들을 배열로 바꾸어준다.
[{},{},{}]이런 모양의 orders가 [[],[],[]]이렇게 저장된다.

지난 시험 복습

export default function CurrentMovie({movie}) {
  if(!movie){
    return '영화를 선택하세요'
  }
  const {title,medium_cover_image,rating,runtime,description_full} = movie

  return (
    <>
 //영화정보
    </>
  );
}

테스트를 자꾸 돌려도 맞는데 도대체 왜 틀렸다는거지? 고민했었다.
구조분해할당을 조건문보다 먼저썼어서 테스트가 틀린것 이었다.
구조분해할당을 한다는것은 movie객체의 key가 있다는 전제하에 하는것인데
!movie (movie가 false라면)라는 조건문이 나올 수가 없다.
순서때문에 틀린게 오랜만이었다. 주의해야겠다.

useEffect

  useEffect(() => {
  getMovies() //전달인자 x promise객체
  .then((res)=> {setMovies(res);  // res = [{},...{}] 영화 정보가 담긴 배열
  setCurrentMovie(res[0])})
  },[])

useEffect는 api를 이용하는 등 sideEffect가 발생할 때 사용하는 hook이다.
getMovies함수는 fetch를 이용해서 영화의 정보를 받아온다.

useEffect(함수,[])
이렇게 쓰면 api정보를 받아올때 즉, 처음에 컴포넌트가 생성될 때에만 렌더링이 일어난다.
useEffect(함수)
함수뒤에 []를 안써주면 state가 변하거나 props가 변할때도 렌더링이 일어난다.

then메소드의 인자 res에는 promise객체가 들어있다.
받아온 영화정보를 setMovies와 setCurrentMovie에 넣어준다.

그 외에도 test파일을 잘 안봐서 틀린것도 있었고 (변수이름,직접 추가로 작성해주어야 하는 text)
event handler도 넣어줘야하는 컴포넌트까지 props로 전달을 안해줘서 틀린 것도 있었다.
그래서 event handler의 전달인자에 무엇을 넣어야하는지 몰랐었다.
어디까지 전달을 해줘야하는지 명확히 살펴보자.