210901 코드캠프 3일차

📔 github 잔디 안심어 지는 현상

이 명령어로 email과 name을 확인후 자신 github정보와 같은지 확인한다.

git config user.email
git config user.name

만약 같지 않다면 아래 명령어로 같게 수정하기

git config --global user.email "email@email.com"
git config --global user.email "name"

📔 github 업데이트된 파일 다운 받을때

1. git branch 로 브랜치확인
2. git pull origin branch
3. git log로 확인

📔 git 업데이트된 파일 다운이 안될때

1. vscode 소스제어 들어가기
2. 변경사항 되돌리기
3. 다시 git pull origin master
4. git log로 확인

• 모듈을 업데이트 했다면 yarn install 다시 하기

📔 yarn dev already in use 오류

• 다른 터미널에서 yarn dev가 실행중이다.
• 아니면 Port를 바꿔야한다. (서버프로그램)

yarn dev -p 3001

📔 js 조건문

• 명령어정리

📔 데이터 전송

• 두 컴퓨터간의 데이터 전송방법

  
  출처 : 코드캠프

📔 API

• 데이터 요청을 받고 응답을 주는 담당자

📔 REST vs GARPHQL

출처 : 코드캠프

• REST

• 예전에는 REST 밖에 없었다.
• 요청하면 모든 정보를 준다. (비효율적) - 주는대로 다 받기
• 프로그램 : axios 등
• API연습: postman
• API명세서(설명서): swagger

• GARPHQL

• 새로생김
• 원하는 정보만 보내줌 (효율적)
• 프로그램 : apollo, client 등
• API연습,명세서(설명서) : playground

• 기존 회사들은 REST를 한번에 GARPHQL로 바꾸기 쉽지않다.
  -> 그래서 둘다 할 줄 알아야 한다

📔 API 요청 결과 타입(JSON)

• Javascript Object Notation
  API요청의 결과가 자바스크립트 객체 표기법과 같다

{
	classmate: "철수",
	age: 13
}

📔 CRUD

출처 : 코드캠프

• Create Read Update Delete
• axios
  POST/ PUT/ DELETE/ GET

const result = axios.post(API이름입력)

• apollo - client
  MUTATION(데이터변경)/ QUERY(조회)

const result = useMutatuon(API이름입력)

📔 Quiz- (GARPHQL-API 연습)

// ======================================================================
// graphql-API 문제
// ======================================================================
// http://example.codebootcamp.co.kr/graphql 에서 제공하는 API를 사용하세요.
// ======================================================================
1) 철수의 나이는 몇살인가요?(나이만 조회해 주세요.)
query {
  fetchProfile(name:"철수"){
		name
    age
  }
}
2) 영희의 학교는 어디인가요?(학교만 조회해 주세요.)
query {
  fetchProfile(name:"영희"){
		school
  }
}
3) 3번 게시글의 내용과 작성일이 무엇인가요?(내용과 작성일만 조회해 주세요.)
query {
  fetchBoard(number:3){
    contents
		createdAt
  }
}
4) 본인의 이름으로 프로필을 작성해 보세요.
mutation{
  createProfile(
    name:"송경환",
    age:26,
    school:"양천고"
  ){
    message
  }
}
5) 본인의 이름으로 게시글을 작성해 보세요.
mutation{
  createBoard(
    writer:"송경환"
    title:"코드캠프"
    contents:"최고"
  ){
    message
  }
}
6) 자신의 프로필을 조회해 보세요.
query {
  fetchProfile(name:"송경환"){
    number
    age
    school
    __typename
  }
}
7) 자신의 게시글을 조회해 보세요.
query {
  fetchBoard(number:135){
    number
    writer
    title
    contents
    like
    createdAt
    __typename
  }
}
8) 본인의 프로필에서, 학교를 자신이 졸업한 초등학교로 바꿔보세요.
mutation{
  updateProfile(
		school:"장수초"
  ){
    message
  }
}
9) 본인의 게시글에서, 제목과 내용을 바꿔보세요.
mutation{
  updateBoard(
    title:"넥스트데이"
    contents:"천재"
  ){
    message
  }
}
10) 자신이 좋아하는 만화 주인공으로 프로필을 작성해 보세요.
mutation{
  createProfile(
		name:"신짜오"
    age:26
    school:"짜장고"
  ){
    message
  }
}
11) 위 10번에서 작성한 프로필을 삭제해 보세요.
mutation{
  deleteProfile(
		name:"신짜오"
  ){
    message
  }
}
12) 상품을 하나 만들어 보세요.
mutation{
  createProduct(
		seller:"송경환"
    createProductInput:{name:"신짜오 창",detail:"신짜오가 쓰는 창",price:3000}
  ){
   _id
    message
  }
}
13) 위 12번에서 만들었던 상품의 가격을 500원 인상해 보세요.
mutation{
  updateProduct(productId:"45edd425-0c34-4784-b9f7-fabd54c06911" updateProductInput:{price:3500}
  ){
    message
  }
}
14) 위에서 만든 상품을 조회하되, 가격만 조회해 보세요.
query {
  fetchProduct(productId:"45edd425-0c34-4784-b9f7-fabd54c06911" ){
    price
  }
}
15) 조회했던 상품을 삭제해 보세요.
mutation{
  deleteProduct(productId:"45edd425-0c34-4784-b9f7-fabd54c06911"
  ){
    message
  }
}
16) 삭제한 상품이 정말로 삭제되었는지 다시 한번 조회해 보세요.
=15)
17) 게시물 목록 중, 2페이지를 조회해 보세요.
query {
  fetchBoards(
page: 2
){
    number
  	writer
		title
  contents
  like
  createdAt
  __typename
  }
}
18) 게시물 목록을 조회할 때, page를 입력하지 않으면, 어떤 결과가 발생하나요?
나오지않는다
19) 프로필이 전체 몇 개가 있는지 확인해 보세요.
query {
  fetchProfilesCount
}
20) 게시물은 몇 개가 있나요?
query {
  fetchBoardsCount
}
// graphql-API 문제
// http://backend03.codebootcamp.co.kr/graphql 에서 제공하는 API를 사용하세요.
1) createBoard를 활용해, 게시물을 하나 등록해 주세요.
mutation{
  createBoard(createBoardInput:{
    writer:"송경환",
    password:"1234",
    title:"무한도전",
    contents:"새학기특집",
    youtubeUrl:"asd",
    boardAddress:{
      zipcode:"우편번호",
      address:"주소",
      addressDetail:"상세주소",
    	},
    images:["asd"]
  }	
  ) {
    _id
  }
}
2) 등록한 게시글의 제목과 내용은 무엇인가요?
query{fetchBoard(boardId:"612f25cdabd89b00293add46")
  {
    writer
    contents
  }
}
3) 등록한 게시글에 좋아요를 1 올려주세요.
mutation{
  likeBoard(boardId:"612f25cdabd89b00293add46")
}
4) 등록한 게시글에 싫어요도 1 올려주세요.
mutation{
  dislikeBoard(boardId:"612f25cdabd89b00293add46")
}
5) 등록한 게시글의 좋아요와 싫어요는 각각 몇 개 인가요? (fetchBoard를 활용해서 확인해 보세요.)
query{fetchBoard(boardId:"612f25cdabd89b00293add46")
  {
    likeCount
    dislikeCount
  }
}
6) 현재 등록된 게시글의 총 갯수는 몇 개 인가요? (어떤 API를 활용하면 좋을지 찾아보세요!)
query{fetchBoardsCount(endDate:"2019-09-01")
}
7) 등록한 게시글의 제목을 수정해 보세요!
mutation{
  updateBoard(updateBoardInput:{title:"백종원"} password:"1234"boardId:"612f25cdabd89b00293add46")
  {
    title
  }
}
8) fetchBoards 전체 게시물 조회를 활용하여 내가 쓴 게시물을 검색해 보세요.(search 변수를 활용해요!)
query{fetchBoards(endDate:"2021-09-02" search:"백종원")
  {
    writer
    title
    contents
  }
}
9) 등록한 게시글에 댓글을 3개 추가해 보세요.
mutation{
  createBoardComment(
    createBoardCommentInput:{
      writer:"조아연",
      password:"1234",
      contents:"멋져요",
      rating:4
    } 
    boardId:"612f25cdabd89b00293add46")
  {
    contents
  }
}
10) 첫번째 댓글의 내용을 수정해 보세요!
mutation{
  updateBoardComment(
    updateBoardCommentInput:{
      contents:"안 멋져요",
      rating:3
    } 
    password:"1234"
    boardCommentId:"612f2cc0abd89b00293add63")
  {
    contents
  }
}
11) 두번째 댓글을 삭제해 보세요!
mutation{
  deleteBoardComment(
    password:"1234"
    boardCommentId:"612f2cc0abd89b00293add63")
}
12) 등록한 게시글에 달려있는 모든 댓글을 조회해 보세요.(작성자와 내용만 조회합니다.)
query{fetchBoardComments(boardId:"612f25cdabd89b00293add46")
  {
    _id
    writer
    contents
    rating
  }
}
13) BEST게시글을 조회해 보세요! (API 이름을 잘 찾아보세요!)
query{fetchBoardsOfTheBest{
  _id
 writer
  title
  contents
}
}
14) 회원가입을 해보세요! 사용자, 즉 User를 만드는 API입니다!
mutation{
  createUser(createUserInput:{email:"as5427072@gmail.com",password:"1234",name:"송경환"})
  {
    _id
    email
    name
  }
}

• 중요 포인트

  • 괄호 잘 씌여있는지 확인하기
  • 객체안에 객체가 들어갈 수 있다.
  • Mutation 은 데이터 변경
  • Query 는 데이터 조회
  • 찾을 값 잘 확인하기