오늘으 요약 :
오늘은 API 통신에 대해서 배웠습니다.
웹 서비스에서의 통신이란 데이터 요청과 응답을 의미하는데요.
BackEnd 컴퓨터에 데이터의 생성/조회/수정/삭제 등을 요청했을 때 각각의 요청마다 담당하는 담담자를 API라고 부릅니다.
데이터의 처리를 요청하는 하나의 기능, 함수라고 생각하시면 쉽습니다.
이런 API의 종류에는 크게 rest-API, graphql-API 두가지가 있었죠?
rest API는 홈페이지 주소처럼 생겼었고, axios로 데이터를 요청하며 응답 결과로 백엔드의 모든 데이터를 받아왔습니다.
반면 graphql은 일반 함수와 같이 생겼으며 apollo-client로 데이터를 요청하며 필요한 데이터만 골라서 받을 수 있었습니다.
API는 크게 생성/수정/삭제/조회 4가지 방식으로 구분하고 이것을 CRUD라고 부른다고 했습니다.
rest-API는 CRUD 각각의 명령어가 POST/GET/PUT/DELETE로 모두 달랐지만,
graphql-API는 READ는 Query, 나머지는 Mutation 명령어로 더 간단하게 데이터 통신을 요청할 수 있었습니다.
이렇게 CRUD를 하기위한 API가 어떤 것이 있고, 어떻게 구성되어있는지 확인할 수 있는 문서를
rest-API는 swagger에서 확인하여 postman에서 연습해볼 수 있고,
graphql-API는 playground에서 문서의 확인과 연습을 둘 다 해볼 수 있었습니다.
때문에 grqphql을 사용하시면 더 효율적이고 편리하게 데이터 통신을 하실 수 있겠습니다.
rest-API와 graphql-API의 차이점, 이해하시겠죠?
어떤 API를 사용하든, javascript로 데이터를 요청하고 응답을 받았을 경우 객체처럼 표기되어 응답을 받았었습니다.
우리는 이것을 JSON(JavaScript Object Notation)이라고 부릅니다.

프론트엔드 개발자는 이렇게 데이터를 요청하고 받아서 웹 브라우저에 그려주는 일련의 과정을 다뤄주는 것이 정말 중요하기 떄문에 꼭 잘 이해해주시고 playground에서 많이 연습해보시면 좋겠습니다!

React

1.데이터 전송 방법 : HTTP, API, Graphql, Rest
2.데이터 전송 실습 : Postman / Playground

두 컴퓨터간 데이터 전송

하이퍼텍스트 : html, txt 같은 것

인터넷에 연결된 두 컴퓨터간의 데이터를 전송하려면 길을 만들어줘야 함

(파일:FTP, 간단한메일:SMTP, 텍스트/HTML:HTTP)

ex. 프론트에서 작성한 게시판들을 state에 포장한 다음 http로 백엔드에 전송해주기

---

HTTP 동작 규칙
요청, 응답 으로 이루어짐 한 컴퓨터가 요청하면 반드시 응답이 돌아옴

프론트컴퓨터, 서버(백엔드)컴퓨터, DB컴퓨터 3대가 있다고 보면

((프론트에서 작성한 게시판들을 state에 포장한 다음 
  스테이트들을 하나의 텍스트로 만들어서 게시물 등록해줘 ! 하고 http로 요청 보냄
  그러면 백엔드에서 받아서 DB(엑셀)로 저장하고 그거에대한 응답을 프론트엔드로 보내줌))

응답부분에는 상태코드 라는 숫자가 들어있음

성공,실패에도 성공하였습니다 했습니다 성공 등등 여러가지 경우가 있기 때문에
컴퓨터가 이해할 수 있도록 숫자 코드로 만들어서 보냄

1xx (정보): 요청을 받았으며 프로세스를 계속한다
2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다
3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다
4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다
5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다

4로시작하는건 프론트엔드오류, 5로시작하는건 백엔드오류 (위키백과 참고)

---

API

-게시물 등록 요청 외에 다른요청 (프로필조회,프로필사진,유튜브링크 등)을 처리해주는 담당자(함수)
-각각의 요청에 따른 API(함수) 존재

REST-API vs Graphql-API

담당자의 종류

rest API : 주소처럼 생긴 이름
Graphql api : 일반 함수와 같은 이름

네이버에서 1번 게시글을 조회 할 경우  

rest | Graphql
h.ttps://naver.com/board/1  |  board(1)
h.ttps://naver.com/profile/철수 | profile("철수")
둘다 http 통신으로 같은 방식인데 담당자의 차이임

Rest-api

프론트엔드 측에서 axios 도구 설치 필요

프론트에서 1번 게시물을 가지고와줘 요청 -> 백엔드에서 1번 게시물 가지고와서 응답

프론트에서는 작성자,번호,제목,내용 등등 전부 말고 
작성자 번호만 보여주고 싶어도 Rest-API는 게시물 전체를 다 받아옴
그렇기 때문에 사람들이 많이 사용하는 큰 서비스들에서는 
필요없는 데이터까지 다 받아와야하기 때문에 용량이 너무 무거워져서 네트워크 비용 증가 -> 

그래서 나온게

Graphql

프론트엔드 측에서 apollo client 도구 설치 필요
rest api의 단점을 보완하기 위해서

프론트에서 작성자,제목만 가지고와줘 요청 -> 백엔드에서 작성자, 제목만 꺼내와서 응답 가능

json

javascript object notation 자바스크립트 객체 표기법

자바스크립트 객체처럼 표기 한다!

프론트 백엔드간에 주고 받은 데이터들은 키:밸류 로 객체처럼 생겼는데
(실제로 객체는 아님)
그걸 json 이라고 부름 (http로 주고받는 데이터의 형태)

http에서는 json 형태로 데이터를 주고 받는다!

json header
json에는 헤더가 포함되어 있는데 요청,응답들의 요약 정보를 보여줌

(보내는이:백엔드컴퓨터, 보내는내용형태:어떤데이터(json application/json), 받는이:프론트컴퓨터)

요청ex (보내는이:사이트주소, 보내는형태:json)

---

CRUD
create read update delete
어떤 기능 API를 만들기 위한 최소한의 개수 (4개 + 1)

게시글 상세, 게시글 목록 둘다 read 여서 read가 두개인 셈,, 
그래서 게시글 하나 추가하려면 최소 기능 5개는 구현해야 함
생성 c, 수정 u, 삭제 d, 조회 r

axios (rest-api) : post , put, delete, get
apllo-client (Graphql) : 등록 수정 삭제 mutation 으로 통합, query

graphql은 등록, 수정, 삭제는 한번씩 작동할 때 마다 db에 영향을 주기 때문에 통합

rest API 가 제공하는 api 사용설명서인 swagger를 보면서
postman 으로 api 를 연습하면 된다고 함
Graphql-api는 연습, 설명서를 플레이그라운드로 통합

---

Graphql이 더 좋아보이는데 왜 Rest API를 더 많이 쓰는걸까???
Graphql은 큰 서비스에서 많이 사용하지만 그게 아니면 rest-api 도 많이 사용하기 때문에!
openAPI 는 일반적으로 rest api 로 제공되기 때문에 !

데일리 스크럼

day1 - 호이스팅

호이스팅이란?
변수/함수의 선언부만 코드의 최상단으로 끌어 올려주는 것

함수의 선언보다 호출을 먼저 한 코드의 결과는?

Quiz()
    function Quiz() {
        console.log("결과가 무엇일까요?")
    }

var 는 호이스팅이 됨
const , let 은 호이스팅 안돼

함수선언식은 호이스팅이 되기 때문에
함수표현식을 사용해야 함

함수 선언식 
catName()
function catName() {
    console.log("제 고양이는 몽자 입니다.")
}

함수표현식
cat()
const cat = function() {
    console.log("제 고양이는 코코 입니다.")
}
Uncaught ReferenceError: name is not defined
    at <anonymous>:1:

name()
const name = ()=>{console.log('제 이름은 혜원입니다.')}
Uncaught ReferenceError: name is not defined
    at <anonymous>:1:

함수표현식을 써야 에러핸들링이 쉽기 때문에 표현식을 써야 함 !!!

호이스팅이 되더라도 접근을 막는 방법
-변수는 let 과 const 를 사용한다 (TDZ를 기억해주세요)
-함수 선언식보다는 표현식 사용

결론 호이스팅은 var, let, const 세개 다 되지만

• var 와 선언식은 접근이 가능하도록 되어있기 때문에 사용하면 안됨
• let, const와 표현식은 접근이 안됨 (TDZ에 저장해뒀다가 다시 꺼내오는 것)

알고리즘 클래스

조건문 : 조건이 일치할 때만 로직을 실행하는 문법

const a = 2;

if(a > 1) {
    a 가 1 보다 크다
} else {
    a 가 1 보다 작다
}

if()로 시작하며, 소괄호 () 안에 조건식이 들어간다.
a가 1보다 크다 가 조건이니까 에이가 2 면 에이가 1보다 크다 라고 출력됨

조건식이 일치할 경우 (=true) 만 로직이 실행된다

const a = 0;

이라 조건식이 일치하지 않을 경우 (=false) 에는
예외 (else) 문법의 로직이 실행됨

const a = 1;

만약 a가 1이라면?
1보다 크다는 이프문이 실행되지 않기 때문에 else인 에이가 1보다 작다가 출력되는데
이건 말이안되니까

if(a > 1) {
    a 가 1 보다 크다
} else if(a ===1) {
    a 와 1 이 같다
} else {
    a 가 1 보다 작다
}

이렇게 else 문법에 if 를 추가로 적용함
이때 반드시 소괄호 ()에 조건식을 함께 넣어야 함 !!

**맨위부터 실행해서 조건에 맞아서 실행되면 출력되고, 안되면 다음으로 넘어가고, 안되면 넘어가고 하는 방식으로 하면 된다 !

조건식에 true, false 자체를 넣을 수 있음

트루, 펄스 대신에 넣을 수 있는 값들

true라는 데이터 자체를 대체해서 사용할 수 있는 모든 것들
Truthy : true, 0이 아닌 숫자(1 이상, 0 미만), 문자열(비어있지 않은), 객체, 배열
Falsy :숫자0,-0 , 빈 문자열(""), null, NaN , undefined

**근데 조건식 자체가 true여야만 실행 할 수 있기 때문에 falsy값을 넣으면 if문을 지나쳐서 else로 출력된다

null : 임의로 빈값으로 두는 데이터
NaN : 숫자가 아님
undefined : 정의되지 않은 데이터

null은 상자를 비워두는거라면 undefined 는 데이터를 담아둘 수 있는 상자 자체가 없는 차이 

**조건문 쓸때 간결하게 사용할 수 있기 때문에 정리해서 알아둘 것

연산자!

|| 연산자

or 연산자. 양쪽의 조건식 중에서 하나라도 true 라면, 전체가 true
양쪽의 조건식 모두 false 라면 전체가 false

&& 연산자

and 연산자, 양쪽의 조건식 모두 true여야 전체가 true
양쪽의 조건식 중에서 하나라도 false 라면, 전체가 false

**많이 사용되니까 익숙해지기

function boolean(input1, input2) {
  if(input1 === true || input2 ===true) {
    console.log("true") 
  } else {
     console.log("false")
  }
}

여기에서 input1 === true 로 트루와 같으면 실행되는거니까
input1이 트루를 가지고 오면 조건식이 성립됨, 그래서 굳이 input1===true 안 써도 되고,

function boolean(input1, input2) {
  if(input1 || input2) {
    console.log("true") 
  } else {
     console.log("false")
  }
}

로 해도 됨

반대로 false 의 경우
!false 로 앞에 느낌표를 붙이면 조건식이 반전됨

function boolean(input1, input2) {
  if( input1 || input2) {
    console.log("true") 
  } else if(!input && !input2) {
     console.log("false")
  }
}

**조건식을 반전시키고 싶다면 앞에 ! 를 붙이자

TIL

1. html 구조 나눌때 처음에 태그 이름 아무렇게나 입력해놨다가 코드가 줄줄 길어지고 나니까 알아보기 힘들고 뭐가 뭔지 모르겠어서 포트폴리오용 자유게시판 코드 다 뜯어 고쳤다. 마진값을 주기보다는 패딩 탑이나 패딩 바텀으로 일정하게 간격을 주자!

또 제목, 이름 , 비밀번호 등등
에러메세지 "필수 입력 사항입니다" 하나로 통일했던거 항목별로 다르게 바꿨다

2. 에러메세지 한번 뜨고 나면 인풋창 하단에 공간이 뜬 채로 있는게 거슬렸는데
   인풋에 값 입력하면 에러메세지 떴던거 사라지게 하는거 배웠다
   함수 선언한 부분 밑에 이프문으로 써주기

if (event.target.value !== ""){
    setPasswordError("");
}

기존에 에러메세지가 있더라도 입력되고 나면 에러메세지 비워주기 위해서임 !

3. 자바스크립트 문법 기초를 보충 공부해야 할 것 같다
   난이도가 더 높은 코테도 풀거나, 머릿속으로 어떻게 풀어야 하는지 아는데
   언어 입력을 못하거나 함수선언 같은걸 틀려서 못푸는 어이없는 사태가 일어남

레퍼런스 코드 올라온 거랑 내꺼 비교해보고 조금 더 효율적인 코드를 짤 수 있도록 노력하기

4. 오늘 배운 Graphql-API 북마크해둔거 참고해서 주말에 다시 풀어보고 익혀두기!
   아직 좀 미숙하다 근데 나 프론트엔드 태어나서 3일차인데 당연히 미숙한거 아닌가 나중되면 잘 할 수 있겠지
   아마도..

5. 괄호가 너무 어렵다 진짜 괄호 안에 괄호 안에 괄호 안에 괄호 api도 코드도 뭔가 오류나면 중괄호 안에 대괄호 안에 소괄호 안에 괄호 괄호 의 저주에 걸렸다 이건 어떻게 하면 나아질 수 있을지 고민해보자