Week 2 회고

6일차 / Container - Preseneter - Props

여태까지 html, css, 함수를 한 페이지에 썼었는데,
함수는 Container, HTML은 Presenter, css는 styles, 쿼리는 Queries로 각각 폴더를 만들어 분리하고 props까지 하는 작업을 했다.
props의 개념을 이해하기가 조금 어려웠는데, 자주 반복하면 익숙해지리라 믿는다 ㅠㅠ..
그리고 typescript를 활용해 데이터 값을 지정해주는 작업까지 배웠다.
타입스크립트.....너무 어렵다ㅠㅠ

---

7일차 / Map - Filter

실무에서는 for 대신 map을 많이 사용한다고 한다.
filter는 필요한 요소를 뽑아내는 것.

fetchProduct를 활용하여 상품 목록을 출력하고, 삭제버튼을 누르면 해당 줄을 삭제하고, refetchQueries를 활용하여 업데이트를 한다.

import { useQuery, gql, useMutation } from "@apollo/client";
import styled from "@emotion/styled"
import { Fragment } from "react";


const FETCH_PRODUCTS = gql`
  query fetchProducts {
    fetchProducts {
        _id
      seller
      name
      detail
      price
    }
  }
`;

const DELETE_PRODUCT = gql`
    mutation deleteBoard($productId: ID){
        deleteProduct(productId: $productId){
            message
        }
    }
    `

const Row = styled.div`
    display: flex;
`

const Column = styled.div`
    width: 20%;
`

export default function MapBoardPage() {
  const [ deleteProduct ] = useMutation(DELETE_PRODUCT)
  const { data } = useQuery(FETCH_PRODUCTS)

  console.log(data)

  const onClickDelete = (event) => {
      deleteProduct({

          variables: { productId: String(event.target.id) },
           //html에서 문자열로 넘어가므로 숫자형으로 바꿔준다
           refetchQueries: [{ query: FETCH_PRODUCTS}]
      })
  }

  return(
    <Fragment>
        {data?.fetchProducts.map((el)=> (
          // <Fragment key={el.number}
            <Row key={el._id}>
                <Column><input type="checkbox"/></Column>
                <Column>{el._id}</Column>                
                <Column>{el.seller}</Column>
                <Column>{el.name}</Column>
                <Column>{el.detail}</Column>
                <Column>{el.price}</Column>

                <Column><button id={el._id} onClick={onClickDelete}>삭제</button></Column>
            </Row>
    ))}
    
    </Fragment>

    
  )
} 

---

8일차 / 컴포넌트 재사용

1) 상품 등록화면 만들기
2) 상품 상세화면 만들기
3) 상품 수정화면 만들기

상품 등록화면으로 상세화면으로 동적 라우팅하고, 상세화면에서 수정하기 버튼을 누르면 등록화면을 재사용해 수정페이지를 만든다.
수정을 완료하면 상세화면에서 수정된 내용이 반영되게 만든다.

API서버 DOCS를 읽으며 variables를 쓰는게 너무너무 어려웠다...
이 부분은 아직도 버벅거리는데, 몇 번 반복하며 감을 익히는게 중요할 것 같다..
라우팅 push하는 부분도 경로 지정을 신경쓸 것!

---

Week 2 포트폴리오

게시판 목록을 map을 활용하여 제작했다.
게시글 제목을 누르면 게시글 상세페이지로 이동하고,

댓글 등록까지는 구현했는데... 수정이랑 삭제를 도통 모르겠어서 멈췄다ㅠㅠ
하루종일 붙잡고 있어도 도무지 생각이 안나서 내일 멘토님 리뷰를 잘 들어야할 것 같다..
내가 잘 하고 있는 건지 모르겠다ㅠㅠ 앞으로 잘 해낼 수 있을까..