Day 3

조건문

if()로 시작해서, 소괄호()안에 조건식이 들어간다.
조건식이 일치할경우 (=true) 로직이 실행된다.
조건식이 일치하지 않을 경우(=false) 에는 예외(else)문법의 로직이 실행된다.

else 문법에 if를 추가로 적용할 수 있다. 이떄 반드시 소괄호()에 조건식을 함께 넣어야 한다.

위에 조건식부터 하나씩 실행해서 내려간다고 생각하면 됨
위에서 조건이 만족되지 않으면(false) 아래로 하나씩 내려가는 것
if, else if, else를 사용해서 잘 처리하는 것이 관건

boolean 타입 - true, false 두가지 밖에 없는 타입

boolean타입 input1,2를 이용한 조건문 연습

// if (input1 === true || input2 === true){
//     console.log(true)
// }
// 둘중 하나라도 true면 로직을 실행
// if(input1 === flase && input2 === false ){
//     console.log(false)
// }
// 둘 다 true 한 값을 가질 때 로직을 실행

function boolean(input1, input2) {
	if(input1 === false
    && input2 === false) {
		return false;
	} else if(input1 === true || input2 === true ){
        return false;
    }
}

홀짝 구별 함수
짝수란 = 2로 나눴을 때 0인 자연수
홀수 = 2로 나눴을 때 나머지가 있는 자연수
% 를 쓰면 나머지를 구할 수 있다
2 % 2 = 나머지 0
1 % 2 = 나머지 1
-> 자바스크립트에서는 앞에있는 숫자를 2로 나눠서 나오는 나머지를 통해 홀수, 짝수를 구별할 수 있다.
0이면 0이라는 조건이 붙었으니 0을 먼저 찾는 조건을 건다

알고리즘 구하기 문제에서 정말 많이 나오니 조심하기

function evenOdd(num) {

	if (num === 0 ) {
		console.log("Zero");
	} else if (num % 2 == 0 ) {
		console.log("Even");
	} else if (num % 2 ==! 0) {
		console.log("Odd");
	}
}

온도계 함수 만들기

function temperature(num){
    if(num <= 18){
        console.log("조금 춥네요")
    }   else if(num >= 19 && num <= 23) {
            console.log("날씨가 좋네요")
    }   else if(num >= 24){
            console.log("조금 덥습니다")
    }
}

function temperature(num){
    if(num >= 24){
        console.log("조금 덥습니다.")
    }   else if(num >= 19 && num <= 23){
        console.log("날씨가 좋네요.")
    }   else if(num <= 18){
        console.log("조금 춥네요.")
    }
}
//내가한건데...
function temperature(num){
	if((temperature = num) && (temperature <= 18)) {
		console.log("조금 춥네요");
	} else if ((temperature = num) && (temperature <= 23)){
        console.log("날씨가 좋네요");
    } else if ((temperature = num) && (temperature < 31)){
        console.log("조금 덥습니다");
    }
}

내가 한게 왜 한번만 동작하고 안되는지 알아냈다.
temperature(숫자)를 넣으면 처음 한번은 동작되는데,
이후 함수가 동작하면서 temperature = num으로 바뀌어버린다.
그럼 temperature<-숫자(숫자)이렇게 넣으면 작동이 안하게된다.

한달 일수 구별하는 함수 만들기

function days(month) {
	if(month === 1 
    || month === 3 
    || month === 5 
    || month === 7
    || month === 8
    || month === 10
    || month === 12) {
		console.log("31일")
	}   else if (month === 2){
        console.log("28일")
    }   else if (month === 4 || month === 6 || month === 9 || month === 11){
        console.log("30일")
    }
}

1월달부터 구하면 된다.

React 3강

데이터 전송, API, GARPHQL vs REST 실습

git 업데이트하기 : git pull origin master
ls -al 해서 .git이 있는지 확인

git log 하면 했던 내용이 나옴
만약 내가 수정해서 불러오기가 안되면
git stash 임시 저장공간에 저장
git stash pop 다시 꺼내오기
git stast list 리스트를 확인할 수 있음
깃을 터미널에서 쓰고 나가려면 q 누르기

코드리뷰
나는 에러메시지를 하나로 통일했는데 여러개로 하는게 내용을 구별할 수 있을 것 같다.

두 컴퓨터간 데이터 전송

두 컴퓨터 간 길을 만들 때는 파일 종류마다 길이 다르다
파일 - FTP
간단한 메일 - SMTP
텍스트/하이퍼텍스트 - HTTP

그래서 HTTP??
HTTP의 규칙
요청을 하면 응답을 하는 방식

자세히 보면...

프론트 엔드 컴퓨터에서 http자료를 보내면(요청)
백엔드 컴퓨터에서 검증한 뒤 DB로 보내고나서
응답 메세지를 보냄(응답)

API ??
요청을 받아주는 담당자

게시물 저장 API, 프로필 저장API, 프로필 조회 API 가 따로 있어서 각각에 맞게 요청하고 응답하게 함

REST vs GRAPHQL

REST의 단점을 개선해서 나온 GRAPHQL
Facebook이 만들게됨

주소처럼 생긴 이름과 일반 함수같은이름

작동방식은?

REST API의 경우 요청한 자료를 모두 코딩한대로 돌려줘야함 (불러오지 않아도 되는 자료도 포함)

GRAPHQL은 요청했을 경우 준비는 되어있지만 요청한(필요한) 자료만 받을 수 있음

양이 주니까 속도가 더 빨라짐
-> GRAPHQL을 사용하자!

그런데 REST API을 쓰고있는 곳도 많음, 오픈API의 경우 대부분,
그러니까 REST API를 알고는 있어야함!

JSON

자바스크립트 객체 표기법
Javascript object notaion
객체를 문자열로 바꿔서 보내는 방식

CRUD

POST,PUT,DELET,GET
생성, 수정, 삭제, 조회 API의 기능의 기본

하지만 graphql-API에선
수정하는 것은 Mutation, 조회를 Query로 통일

vs코드에서는 어떨까..?

알아서 실행이 됨!! 알아서 백엔드 컴퓨터에 요청을 하는 상태.
확인은 개발자도구 - 네트워크 탭에서 확인할 수 있다.
결과는 result라는 곳에 들어가있다.
graphql-API는 두배로 간단한 모습

총정리

요청하는 종류의 API가 따로 있음(CRUD)
API는 검증, DB에서 꺼내온다음 보내주기

그래서 얘네는 어떻게 쓰는데??

설명서 docs라고 함, 연습도구도 따로 있음
graphql-API는 설명서와 연습을 한번에 할 수 있음
설명서
https://example.codebootcamp.co.kr/api-docs

연습해보기
https://koreanjson.com/

routes의 이름을 endpoint라고 함

/posts/:id 라고 써있으면? :id는 변할 수 있는 값을 뜻함

예시) /post/3

playground

이런 연습을 통해서 지속적인 backend개발자와 소통이필요
명령어 mutation/query {안에 endpoint(조건에 맞게 넣어야함) {받아야하는 리턴}}

mutation {
  createProfile(name:"조니", age: 45, school:"캐리비안감옥"){
  _id
  number
  message
  }
}

!!가 붙으면 필수입력, 아닌거는 입력안해도 상관없음
꺼내오기
query{endpoint(조건){받아야하는 리턴}}

query {
  fetchProfiles(page : 2){
    number
    name
    age
    school
  }
}

graphql 연습하기

http://example.codebootcamp.co.kr/graphql 에서 제공하는 API를 사용하세요.

1) 철수의 나이는 몇살인가요?(나이만 조회해 주세요.)
-> 8
2) 영희의 학교는 어디인가요?(학교만 조회해 주세요.)
-> 다람쥐 초등학교
3) 3번 게시글의 내용과 작성일이 무엇인가요?(내용과 작성일만 조회해 주세요.)
-> "contents": "반갑습니다",
-> "createdAt": "2021-11-03T04:12:54.840Z"
4) 본인의 이름으로 프로필을 작성해 보세요.

mutation{createProfile(name:"김정동", age:99, school:"학학교"){
 _id
  number
  message
}
}

5) 본인의 이름으로 게시글을 작성해 보세요.

mutation{createBoard(writer:"김정동", title:"안녕하세요", contents: "점심은돈까스였어"){
 _id
 number
 message
}
}

6) 자신의 프로필을 조회해 보세요.

query{fetchProfile(name:"김정동"){
  number
  name
  school
}
}

7) 자신의 게시글을 조회해 보세요.

query{fetchBoard(number:63){
  number
  writer
  title
  title
  contents
  like
  createdAt
}
}

8) 본인의 프로필에서, 학교를 자신이 졸업한 초등학교로 바꿔보세요.

mutation{updateProfile(name:"김정동", age:99, school:"서빙고초"){
  _id
  number
  message
}}

9) 본인의 게시글에서, 제목과 내용을 바꿔보세요.

mutation{updateBoard(number: 63, writer:"김정동", title:"제목2", contents:"돈가스2"){
  _id
  number
  message
}}

10) 자신이 좋아하는 만화 주인공으로 프로필을 작성해 보세요.

mutation{createProfile(name:"배트맨", age:99, school:"디시스쿨"){
 _id
  number
  message
}
}

11) 위 10번에서 작성한 프로필을 삭제해 보세요.

mutation{deleteProfile(name:"배트맨"){
  _id
  number
  message
}
}

12) 상품을 하나 만들어 보세요.

mutation{createProduct(seller:"김정동",createProductInput:{name:"멋진거", detail:"진짜멋집니다", price: 9999}){
  _id
  number
  message
}
}

13) 위 12번에서 만들었던 상품의 가격을 500원 인상해 보세요.

mutation{updateProduct(productId:"5a59be9f-413c-4ed6-b9ab-c71e6ae01a9d", updateProductInput:{price:10400}){
 _id
  number
  message
}}

14) 위에서 만든 상품을 조회하되, 가격만 조회해 보세요.

query{fetchProduct(productId:"5a59be9f-413c-4ed6-b9ab-c71e6ae01a9d"){
  price
}}

15) 조회했던 상품을 삭제해 보세요.

mutation{deleteProduct(productId:"5a59be9f-413c-4ed6-b9ab-c71e6ae01a9d"){
  _id
  number
  message
}}

16) 삭제한 상품이 정말로 삭제되었는지 다시 한번 조회해 보세요.

query{fetchProduct(productId:"5a59be9f-413c-4ed6-b9ab-c71e6ae01a9d"){
  _id
  seller
  name
  detail
  price
  createdAt
}}

17) 게시물 목록 중, 2페이지를 조회해 보세요.

query{fetchBoards(page:2){
	number
  writer
  title
  contents
  like
  createdAt
}}

18) 게시물 목록을 조회할 때, page를 입력하지 않으면, 어떤 결과가 발생하나요?
-> 1페이지부터 나옴
19) 프로필이 전체 몇 개가 있는지 확인해 보세요.

query{fetchProfilesCount}

20) 게시물은 몇 개가 있나요?

query{fetchBoardsCount}

backend03 레벨2 GRAPHQL 연습하기

graphql-API 문제
http://backend03.codebootcamp.co.kr/graphql 에서 제공하는 API를 사용하세요.

1) createBoard를 활용해, 게시물을 하나 등록해 주세요.

mutation{
  createBoard(
    createBoardInput:{
      writer:"김정동",
      password:"1234", 
  		title:"복잡해", 
	    contents:"graphql",
  	  youtubeUrl:"www.www.www"})
    
{
  	_id
    writer
    title
    contents
    youtubeUrl
    likeCount
    dislikeCount
    images
    createdAt
    updatedAt
    deletedAt
  }
  }

2) 등록한 게시글의 제목과 내용은 무엇인가요?

query{fetchBoard(boardId:"61823977b55052002a93de48"){	
  title
  contents
}}

3) 등록한 게시글에 좋아요를 1 올려주세요.

mutation{likeBoard(boardId:"61823977b55052002a93de48")}

4) 등록한 게시글에 싫어요도 1 올려주세요.

mutation{dislikeBoard(boardId:"61823977b55052002a93de48")}

5) 등록한 게시글의 좋아요와 싫어요는 각각 몇 개 인가요? (fetchBoard를 활용해서 확인해 보세요.)

query{fetchBoard(boardId:"61823977b55052002a93de48"){
  likeCount
  dislikeCount
}
}

6) 현재 등록된 게시글의 총 갯수는 몇 개 인가요? (어떤 API를 활용하면 좋을지 찾아보세요!)

query{fetchBoardsCount(endDate:"2021-11-03T16:34:33Z", startDate:"2019-12-03T09:54:33Z")}

7) 등록한 게시글의 제목을 수정해 보세요!

mutation{updateBoard(boardId:"61823977b55052002a93de48", password:"1234", updateBoardInput:{title:"바뀐제목"}){
  
  _id
  title
}}

8) fetchBoards 전체 게시물 조회를 활용하여 방금 쓴 게시물을 검색해 보세요.(search 변수를 활용해요!)

query{fetchBoards(search:"바뀐제목"){
  _id
  writer
  title
  contents
}}

9) 등록한 게시글에 댓글을 3개 추가해 보세요.

mutation{createBoardComment(boardId:"61823977b55052002a93de48", 
  createBoardCommentInput:{writer:"베베", password:"1111", contents:"베베베베", rating:2}){
    _id
    writer
    contents
    rating
    createdAt
    updatedAt
    deletedAt

10) 첫번째 댓글의 내용을 수정해 보세요!

mutation{updateBoardComment(boardCommentId:"618241ddb55052002a93de62", password:"1111",
  updateBoardCommentInput:{contents:"미미미미"}){
  _id
  writer
  contents
  rating
  createdAt
  updatedAt
  
}}

11) 두번째 댓글을 삭제해 보세요!

mutation{deleteBoardComment, (password:"2222", boardCommentId:"618241d0b55052002a93de61")}

12) 등록한 게시글에 달려있는 모든 댓글을 조회해 보세요.(작성자와 내용만 조회합니다.)

query{fetchBoardComments(boardId:"61823977b55052002a93de48"){
  _id
  writer
  contents
  rating
}}

13) BEST게시글을 조회해 보세요! (API 이름을 잘 찾아보세요!)

query{fetchBoardsOfTheBest{
  _id
  writer
  title
  contents
  youtubeUrl
  likeCount
  dislikeCount
  images
  createdAt
  updatedAt
  deletedAt
}}

14) 회원가입을 해보세요! 사용자, 즉 User를 만드는 API입니다!

mutation{createUser(createUserInput:{email:"111@naver.com", password:"1111", name:"joph"}){
  _id
  email
  name
  picture
  createdAt
  updatedAt
  deletedAt
}}