1. 전날 복습

• Grapgql이 Rest보다 좋은점은 원하는 정보를 선택적으로 가지고 올 수 있기 때문이다.

• Rest 의 post, put, delet 은 Grapgql 의 mutantion 에 대응되고,

• get은 query에 대응된다.

• mutation 은 데이터 베이스의 어떠한 수정사항을 요청하게 되고

• query의 경우 데티터 베이스의 변경을 요구하지 않는다. / 순수한 조회의 목적

2. 오늘 배울것

1. 동기와 비동기

1. 동기 방식

'좋아요' 버튼을 누름과 동시에
데이터 베이스에 '좋아요'의 숫자가 업데이트되고
우리 브라우저에 '좋아요' 숫자가 올라가는 것

처럼 하나씩 순서대로 기다리는 방식이다.
즉, request 를 보내고 respones를 기다렸다가 화면에 표시하게 된다.

respones 가 완료되기 전까진 브라우져는 표시 되지 않는다.

2. 비동기 방식

어떤 홈페이지의 회원가입 버튼을 누르면
회원가입 축하 메일을 발송하게 되는데
메일을 작성/발송 해주는 작업이 상당 시간을 필요로 한다면
동기 방식은 축하메일이 나의 메일보관함에 올때까지 사용자는 브라우져에서 어떠한 활동도 할 수 없다.
하지만 비동기 방식의 경우 우선 요청을 보내놓고 응답이 오겠거니 다음 작업을 수행 할수 있다.

서버 컴퓨터가 작업이 끝날때까지 기다리지 않는 통신이다.

2. 실습

1. rest방식의 axios 실습

axios 는 기본적으로 비동기로 작동한다.
해서 promise 로서 데이터를 기다리게된다.

우선 axios를 import 해오자.

동기방식으로 사용하고 싶으면 'await' 코드를 삽입해줘야 하는데 'async'라는 코드가 필요하다.

화살표 함수의 경우 위치에 주의하자.

2. grapgpl 방식의 apollo 실습

apollo는 사용전 아래와 같은 기본적인 세팅이 필요하다.

_app.js 파일의 코드 수정

그리고서 사용하고자 하는 index.js 파일에도 임포트 시켜서 사용한다.

gql과 우리가 쓰는 데이터베이스에서 필요한 코드소스인 useMutation을 임포트 해온다.

3. export 와 export default

1. default값은 이름그대로 기본값이기 때문에 한페이지에 하나만 지정이 가능하다.
2. import당시 오타등의 이유로 정확히 export 주소를 찾을 수 없을때 default값을 가져가게 된다.

4. 개발자도구

우리가 개발하며 실제 너무 자주 사용하는 소중인 개발도구 창.

1. Elements - css 이용시 편리
2. Console - javascript
3. Network - 전송인과 확인

우리는 Network 텝을 통해 통신당시 여러가지 오류를 찾아낼 수 있다고 한다.

5. try / catch

네트워크 통신을 할떄 우리는 try / catch를 통해 성공에 대한 처리와 실패에 대한 처리를 나누어서 처리 하게 된다.

성공했을 경수 try에서 동작하게되고
실패했을 경우 catch를 통해 작업 하게 된다.

3. 마치며..

후..
사실 너무 좋은 양질의 수업을 매일 받고 있음에 너무 감사하지만
이를 내가 원하는 만큼 적어 낼 수 없음이 너무 통탄스러울 뿐이다.

안다고 함은 내가 온전히 누군가에서 설명 할 수 있는 상태가 됬을때,
나는 그 상태를 알고있는 상태라고 생각한다.

그리고 50을 알고 있어도 60만큼 말하는 사람과
60을 알고 있음에도 50정도밖에 말못하는 사람이 있음을 안다.

오늘 당장 모든걸 알고 또 이것을 유려하게 표현 할 수 없음을 너무나도 잘 알고있지만 너무나 조바심이 난다.
혹시나 뒷쳐지고 있는건 아닐까 ㅋㅋㅋㅋ