2021.09.02 / 코드캠프 4일차

백엔드와 프론트엔드의 통신

• Rest API : 백엔드에 요청하면 모든정보를 불러옴
  (axios 이용)
• Graphql API : 필요한 정보만 가져올 수 있음
  (apollo client 이용)

각 기능을 수행하기 위한 명령어

Rest-API : create(post) / read(get) / update(put) / delete(delete)

Graphql-API : create,update,delete(mutation) / read(query)

VS Code 내에서의 HTTP 요청

<선언>

const [createBoard] = useMutation(CREATE_BOARD)

<할당>

const CREATE_BOARD = gql`
    mutation createBoard($createBoardInput: CreateBoardInput!){
        createBoard(createBoardInput:$createBoardInput){
            _id
        }
    }

<사용>

	async function requestApi(){
        const result = await createBoard({
            variables: {
                createBoardInput: {
                    writer:name,
                    password:password,
                    title:title,
                    contents:content
                }
            }
        })
        console.log(result.data.createBoard._id)
	}

VS Code Port 주소 바꾸기

• yarn dev -p 번호