[스프린트 3] 도서 구매 사이트 FE 이모저모

• 백엔드 코드에서 camelCase로 변경한 변수 유의하여 사용
• 변수의 선언 방식 

    const orderId = req.params.id;
    const { orderId } = req.params.id;

const orderId = req.params.id; 는 req.params.id의 값을  orderId 변수에 할당

즉, `orderId` 변수에 `req.params.id`의 값이 그대로 저장된다

 

const { orderId } = req.params.id; 는 객체 비구조화 할당으로 req.params.id에서 orderId 라는 새로운 변수를 선언하고 초기화
위와 동일하게 `orderId` 변수에 `req.params.id` 값이 저장

 

→  하지만 req.params.id의 id값은 객체가 아닌 단순 값이므로, {} 이렇게 객체 형태로 받아오면 안된다 😭

어쩐지 자꾸 200ok와 더불어 [] 이렇게 빈 배열만 넘어오더라는,, 

 

• Emmet 사용법
  사용할 항목 드래그 후 

shift + cmd/ctrl + p
Emmet:Wrap with Abberviation 검색 후
th*

 

• <></> fragment로 리스트를 묶어서 렌더링 할 때,  <React.Fragment>를 사용

   <React.Fragment key={order.id}>
                <tr>
                  <td>{order.id}</td>
                  <td>{formatDate(order.createdAt, "YYYY.MM.DD")}</td>
                  <td>{order.address}</td>
                  <td>{order.receiver}</td>
                  <td>{order.contact}</td>
                  <td>{order.bookTitle}</td>
                  <td>{order.totalQuantity}권</td>
                  <td>{formatNumber(order.totalPrice)}원</td>
                  <td>
                    <Button
                      size="small"
                      scheme="normal"
                      onClick={() => selectOrderItem(order.id)}
                    >
                      자세히
                    </Button>
                  </td>
                </tr>

<React.Fragment key = {order.id}> 부분은 리스트의 각 항목에 대해 Fragment를 생성하고, 해당 Fragment에 order.id값을 key로 제공하여 각 Fragment를 고유하게 식별합니다!