동기 vs 비동기
<동기> 순서대로 일처리서버 컴퓨터가 자업이 끝날때까지 기다리는 통신
/등록게시글 등록 -> 게시글 등록완료 ->(응답이 모두 끝난후 요청)게시글 불러오기
<비동기> 서버 컴퓨터가 작업이 끝날때 까지 기다리지 않는 통신 +
동시에 여러일 하는 통신
/등록
게임 다운 받으면서 카톡하는 여러분? 비동기
게시글 등록 - >
게시글 등록완료
-> 게시글 불러오기
비동기를 동기로 바꿔주는 명렁어
async / await 짝궁으로 함께 이용됩니다.
//비동기 통신
function 함수이름() {
const data = axios.get ('링크')
console.log(data) // promise
}
// 동기 통신
async function 함수이름() {
const data = await axios.get('주소')
console.log(data) // {id:1,title:"쌸라쌸라",co
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
console.log(child)
var child = "철수"
VM136:1 undefined
undefined !!??? hoisting끌어올리다 사용됨 이라고 한다 var는 잘 사용 안한다 .
(아래참고) const / let 도 호이스팅 가능한대
var child = undefined ;
console.log(child)
child ="철수" 이런식으로
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
console.log(child2)
const child2 = "철수"
VM255:1 Uncaught SyntaxError: Identifier 'child' has already been declared
console.log(child3)
let child3 = "철수"
VM400:1 Uncaught ReferenceError: child3 is not defined
at :1:13
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
hello()
function hello(){
console.log("안녕하세요!")!
}
VM636:4 안녕하세요
(소스코드가 퍼지면 문제가 야기 될수있다 )
hello2()
const hello2=function (){
console.log("안녕하세요~~!")
}
VM729:1 Uncaught ReferenceError: hello2 is not defined
at :1:1
(anonymous) @ VM729:1
hello2()
const hello2= () => {
console.log("안녕하세요~~!")
}
VM789:1 Uncaught ReferenceError: hello2 is not defined
at :1:1
var child = "철수"
var child = "영희"
console.log(child)
VM1037:3 영희
undefined
const child2 = "철수"
const child2 = "영희"
console.log(child2)
VM1100:2 Uncaught SyntaxError: Identifier 'child2' has already been declared
let child3 = "철수"
let child3 = "영희"
console.log(child3)
VM1183:2 Uncaught SyntaxError: Identifier 'child3' has already been declared
function hello(){
console.log("안녕하세요")
}
function hello(){
console.log("반갑습네다")
}
hello()
VM1484:6 반갑습네다
undefined
const hello(){
console.log("안녕하세요")
}
const hello(){
console.log("반갑습네다")
}
hello()
VM1548:1 Uncaught SyntaxError: Missing initializer in const declaration
지뢰밭 걷는 기분일것이다. console페이지 내에서 let /const / function 안된다
셋팅 작업은 꼭 _app.js 서 해야한다
04-01-rest-get / index.js 에서나오는 화면은 _app.js 에서 return (
Component 에서 보여주는것이다.
_app.js 에서 모든 셋팅은
function MyApp({component , pageProps}) {
여기다가 모든 셋팅을 하면된다.
return <...}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
비동기 실행 방식을 동기 실행 방식으로 바꿔줘야하는데 이것을 도와주는 명령어가 async/await 입니다.
async/await 을 사용해주면 await 이 작성된 ㅂ분의 코드 실행이 완전히 완료 되기전까지는 하단의 코드가 실행되지 않습니다 . 이렇게 되면 완전히 완료된 후 완성된 데이터를 화면에 그려줄수 있다.
호이스팅에 대해서도 배웠다.
변수의 선언과 초기화를 분리해서 선언만 코드의 최상단으로 끌어올려주는것이라고 했습니다. function 함수 선언과 var 변수 선언은 정희하는 코드보다 사용하는 코드가 앞서 등장할 수 있었고 , 게다가 재선언/ 할당이 가능해지기 때문에 예기치 못한 에러가 발생할 수 있다.
화살표 함수를 사용하고 , let 이나 const 변수 선언을 사용해주시는 이유/
vscode에서 apollo-client 를 사용하여 graphql-API 요청하실 때는 useQuery () 와 usemutation()을 사용해서 통신해주시면 되겠습니다.(applo-client 에서 import 해주시는 것도 잊지말자!)