:)3D
오늘도
배워봅니다.
시작
1. if 문 원리**
Falsy 값
if의 조건이 true or false로 바뀐 다음 실행 “123123” ⇒ 참 “” ⇒ 거짓 0 ⇒ 거짓 0이 아닌 다른 수 ⇒ 참 -1 ⇒ 참 “ " ⇒ 참 !true ⇒ false !false ⇒ true !0 ⇒ true !”” ⇒ true !writer = writer === “” writer = writer ≠ “”2. 두 컴퓨터 간 데이터 전송
- HTTP
.규칙 요청하면 반드시 응답하여야 한다. 객체처럼 생긴 문자열 형태(JSON)로 주고 받는다.
.상태코드
1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.- API
.API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능(함수)
.백엔드에서 각 요청별 API 제작 필요
.함수- REST-API vs GRAPHQL-API
.둘 다 HTTP 통신
.백엔드 api 차이
.rest 는 axios
.graphql은 apollo client
.차이점 rest는 백엔드에서 작성한 코드에 있는 모든 데이터를 받아와야 함 graphql은 프론트엔드에서 명시해서 필요한 데이터만 받아올 수 있음. rest-API는 함수 이름이 주소처럼 생겼고, graphql-API는 일반 함수처럼 생김.
.접속량이 적을 땐 둘다 상관 없지만, 큰 사이트면 전체적으로 graphql 가 효율적이다.(속도, 비용)- JSON ( Javascript Object Notation )
.객체처럼 표기한 것(실제로 객체가 아닌 문자열)
.헤더 : 데이터 요약 정보 / 보내는 사람 정보
.바디 : 데이터 내용- 요청 = request
- 응답 = response
.요청할 때 보내는 데이터는 API 함수로 들어갈 인자이며, 응답으로 받게되는 데이터는 API 함수의 return 데이터- CRUD ( create / read / update / delete )
.어떤 특정 기능을 만든다면 최소 crud + 목록 조회까지 해서 최소 5개 api 가 필요하다.- axios vs apollo-client
.생성/ 수정 / 삭제는 DB를 변경시킨다.
.조회는 DB를 꺼내온다.
.그래서 apollo-client는 cru가 mutation(메소드)으로 통일.
.이 도구들이 “” 삭제해줘서 객체.key 값 쓰듯이 쓸 수 있게 만들어줌
.post / get / put /delete 등을 메소드라고 부른다.
.api 이름을 똑같이 만들고, 메소드로 구분한다. ⇒ restful
- restapi 알아야 하는 이유
.회사가 rest-api 사용하고 있을 수 있음
.대부분의 openapi는 restapi로 되어있음
.restapi는 현재도 많이 사용되고 있음3. 도구 / 설명서
- rest - postman / swagger (postman은 설치 필요)
- graphql - playground
- endpoint - api 주소
restapi
graphql
- Return 값은 백앤드 개발자가 만든 타입으로, 설정해놓은 변수들을 받아올 수 있다.
메모
- 통신
데이터 전송 방법(HTTL / APL / Graphql / Rest)- 이벤트핸들러함수 -> (event.taget.value)
ex) if(true){ console.log("정답이에요!") } VM5633:2 정답이에요! undefined if(false){ console.log("정답이에요!") } 여기서 0이 아닌건 참 if(1+1 === 2){ console.log("정답이에요!") } VM5505:2 정답이에요! undefined if(true){ console.log("정답이에요!") } VM5633:2 정답이에요! undefined if(false){ console.log("정답이에요!") } undefined if(""){ console.log("asdf!") } undefined if(0){ console.log("asdf!") } undefined if(1){ console.log("asdf!") } VM5853:2 asdf! undefined !true false !false true !0 true !1 false위 내용을 사용해서 정리하는것(더 효율적으로 정리하는 방법) -> 리팩토링
- DB 는 엑셀은 아니지만 표같은것
- 데이터는 객체 형태로 받고 보냄
- 백엔드에서 받을때 상태코드 ex)(200)을 보냄
HTTP 상태코드 검색 -> 상태코드
API -> 함수 = 각각 요청 담당자- REST
REST-API = 주소처럼 생긴 이름
셋팅 된 모든 내용을 받아옴 -> 느림, 무겁다
취업하는 회사가 restapi 를 사용할 수 있어서 배움
대부분의 openapi 는 restapi 로 되어있음
restapi 는 지금도 많이 쓰임
(스웨거 - api 설명서.(주소))
(포스트맨 -> api 연습)- GRAPHQL (페북에서 만듬)
최근 국내에서도 사용
GRAPHQL-API = 일반 함수와 같은 이름
셋팅 된 내용 중 필요한 내용만 받아옴 -> 빠름, 가볍다
플레이그라운드 - 설명서, 연습. (주소)
<<연습용>>
swagger주소: http://example.codebootcamp.co.kr/api-docs
playground주소: http://example.codebootcamp.co.kr/graphql
<<포트폴리오용>>
playground주소: http://backend08.codebootcamp.co.kr/graphql- API - docs = 설명서
- /:id -> id 목록
- Queries 조회
- mutation 변경
- Product 에 적응하기 -> 실무에서 많이 사용
- 셋팅된 내용 객체처럼생긴 문자열(양쪽끝에 “”)
- 이름 모습만 다름 하지만 함수
- 응답, 요청에는 헤더, 바디가 있음 헤더를 통해 출처,형태 알수있음
- Crud +1 목록
그럼, 안녕
다들
화이팅!
Hi!