ํ๋ก ํธ์๋๊ฐ ๋ฐฑ์๋์ ์์ฒญ( req ) ์ ๋ณด๋ด๋ฉด ๋ฐฑ์๋๋ ๊ทธ์ ๋ํ ์๋ต( res )์ ๋ณด๋ด์ค๋ค.
์ด๋ ์๋ฒ ์ปดํจํฐ๊ฐ ์์
์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์๋ ๋๊ธฐ์ ๋น๋๊ธฐ๊ฐ ์๋ค.
๋๊ธฐ๋ ์๋ฒ ์ปดํจํฐ๊ฐ ์์
์ด ๋๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ๋ ํต์ ์ ๋งํ๋ค.
ํ๋์ ์์
์ด ๋๋ ๋ ๊น์ง ๊ธฐ๋ค๋ ธ๋ค๊ฐ ๋ค์ ์์
์ ํ๋ ๋ฐฉ์์ด๋ค.
๋น๋๊ธฐ๋ ์๋ฒ ์ปดํจํฐ๊ฐ ์์
์ด ๋๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๋ ํต์ ์ ๋งํ๋ค.
์๋ฒ์ ์์ฒญ ์ ์ฅ์ด ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค๋ฅธ ์์
์ ์งํํ๋ค.
์ฌ๋ฌ๊ฐ๋ฅผ ๋์์ ์์ฒญํ๋ ๋ฐฉ์์ด๋ค.
๊ฒ์๊ธ ๋ฑ๋ก์ด ์๋ฃ๋๊ธฐ ์ ์ ๊ฒ์๊ธ์ ๋ถ๋ฌ์ค๊ฒ ๋๋ฉด ๊ธ์ด ์๋ถ๋ฌ์์ง๋ค.
๊ทธ๋ฌ๋ฏ๋ก ์ด๋ ๊ฒ ๋น๋๊ธฐ ์์
๋ค์ ๋๊ธฐ์์ผ๋ก ํ๋์ฉ ํ๋์ฉ ์์
์ ์งํํด์ผ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋๊ธฐ์์ผ๋ก ์๋๋๋๋ฐ ์ธ๋ถ ์ปดํจํฐ์ ์์ฒญํ๊ฒ ๋๋ ๊ธฐ๋ฅ๋ค์ ๋น๋๊ธฐ์์ผ๋ก ์๋๋๋ค. ๊ทธ๋์ ๋น๋๊ธฐ์ ๋๊ธฐ์ ๋ํด์ ์์์ผ ํ๋ค.
์์ฒญ๋ค์ด ์๋ก ๊ธฐ๋ค๋ฆด ํ์๊ฐ ์์ ๋ ์ธ ๊ฒ์ด๋ค.
๋์์ ์ฌ๋ฌ ์ผ์ ํ ๋ ์ฌ์ฉํ๋ค.
์๋ฅผ๋ค์ด ์์ ์ฌ์ง์ฒ๋ผ ํ ํ๋ฉด์ ๊ฒ์๋ฌผ ๋ชฉ๋ก๊ณผ ์ํ ๋ชฉ๋ก์ ๋ ๋ค ๊ฐ์ ธ์์ผ ํ ๋๋ ๋์์ ์ฌ๋ฌ๊ฐ์ง ์ผ์ ํ๋ ๋น๋๊ธฐ ๋ฐฉ์์ด ํจ์ฌ ํจ์จ์ ์ด๋ค.
๋ง์ฝ ์ด๋ ๊ฒ ์์ฒญ์ ๋ณด๋ด๊ณ data๋ฅผ ์ฝ์ ์ฐ์ด๋ณธ๋ค๋ฉด data ๊ฐ์ฒด๊ฐ ์ฐํ๋ ๊ฒ์ด ์๋๋ผ Promise๋ผ๊ณ ์ฐํ๊ฒ ๋๋ค.
์ด ์ด์ ๋ axios ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋น๋๊ธฐ์์ผ๋ก ์๋ํ๊ธฐ ๋๋ฌธ์ด๋ค.
๋ฐฑ์๋๋ก ์์ฒญ์ ๋ณด๋๋๋ฐ ๋ฐฑ์๋์์ ์๋ต์ ์ฃผ๊ธฐ๋ ์ ์ data์ ๋ด์ ๋ฒ๋ ธ๊ธฐ ๋๋ฌธ์ '๋ญ์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ฃผ๊ฒ ๋ค'๋ ์ฝ์(Promise)๋ง ๋ฐ๊ฒ ๋ ๊ฒ์ด๋ค.
์ด๋ฐ ๋น๋๊ธฐ ์์
๋ค์ ๋๊ธฐ๋ก ๋ฐ๊ฟ์ฃผ๋ ๋ช
๋ น์ด๊ฐ ์๋ค.
๋ฐ๋ก async ์ await ์ด๋ค.
์ด๊ฒ์ ํ๋ฒ ์ฌ์ฉํด๋ณด์.
์ฝ๋๊ฐ ํ ์ค์ฉ ์คํ๋๋ฉด์ await๋ฅผ ๋ง๋๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ๋ค.
๊ทธ๋ฐ๋ฐ await๋ฅผ ๋ถ์ด๊ธฐ ์ํด์๋ async๋ฅผ ๊ฐ์ด ๋ถ์ฌ์ค์ผ ํ๋ค!
๋ง์ฝ async๋ฅผ ๋นผ๋จน๊ณ await๋ง ์ฐ๊ฒ ๋๋ฉด ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋๊ฒ ๋๋ค.
๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์ ์๋๋ฐ๋ ์๋ฌ๊ฐ ๋์ง ์๋๋ค.
์์ง child๊ฐ ์๋๋ฐ๋ ์๋ฌ๊ฐ ์๋ undefined๊ฐ ๋์จ๋ค.
๊ทธ๋ ๋ค๋ฉด var ๋์ const๋ let์ ์ฌ์ฉํ๋ฉด ์ด๋จ๊น.
child2,3์ด ์ ์๋์ง ์์๋ค๋ ์๋ฌ๊ฐ ๋ฌ๋ค.
์ด๋ ๊ฒ ์๋ฌ๊ฐ ๋์ผ ์ ์์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ํญ์ var ๋ฅผ ์ฌ์ฉํ์๋ค. ๊ทธ๋ฐ๋ฐ ์ด๋ฐ์์ผ๋ก ์๋ฌ๊ฐ ๋ง์ด ๋๋ฉด์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ ์ดํ์ const, let์ด ๋์ค๊ฒ ๋ ๊ฒ์ด๋ค.
๊ทธ๋ ์ง๋ง var๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํด๋ ์๋์ด ์ ๋๋ค๋ ๋ฌธ์ ?!๊ฐ ์๋ค. ๊ทธ๋์ ์ด์ ๋ var๋ฅผ ์ฌ์ฉํ์ง ์๊ณ const์ let์ ์ฌ์ฉํ๋ค๊ณ ํ๋ค. (์ด ๋๋ฌธ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ค๋ฅธ ์ธ์ด๋ค๋ณด๋ค ์ด๋ ต๋ค๋ ํ์ด ๋์ค๋ ๊ฒ ๊ฐ๋ค.)
์ด๋ ํธ์ด์คํ
์ด๋ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํน์ง์ด๋ค. (hoisting - ๋์ด์ฌ๋ฆฌ๋ค)
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฝ๋๋ฅผ ์คํํ๊ธฐ ์ด์ ์ ์ด๋ค ๋ณ์๋ค์ด ์๋์ง ์ฒดํฌ๋ฅผ ํ๋ค.
๊ทธ๋ฐ๋ฐ var ๊ฐ ์๋ค๋ฉด ์ฐ์ ์ ์ผ๋ก ์๋์ฒ๋ผ undefined๋ก ์ฐ์ ์ ์ธ์ ํ ๋ค
์ฝ๋๋ฅผ ์คํ์ ํ๋ค. ๊ทธ๋์ ์๋ฌ๊ฐ ์๋๋ผ undefined๊ฐ ๋จ๊ฒ ๋ ๊ฒ์ด๋ค.
๊ทธ๋ ๋ค๋ฉด const๋ let์ ํธ์ด์คํ ์ด ์๋ ๊น?
๋๋ค.
ํธ์ด์คํ
์ด๋ผ๋ ๋จ์ด๋ ๋์ด์ฌ๋ฆฐ๋ค๋ ๋ป์ด๋ค.
const, let๋ ํธ์ด์คํ
์์ฒด๋ ๋๋ค. ๊ทธ๋ฐ๋ฐ ์ฝ์์ ์ฐํ์ง ์๋ ์ด์ ๋ ์ค์ ๋ก undefined๊ฐ ๋ณ์์ ํ ๋น์ด ๋๊ธฐ ์ ๊น์ง ์ ๊ทผ์ด ๋ถ๊ฐ๋ฅํ๊ฒ ๋๋ ์ง์ญ, TDZ Temperal Dead Zone ๋๋ฌธ์ด๋ค.
๋๋ฒ์งธ๋ก ํจ์์์๋ ๋น์ทํ ๋ฌธ์ ๊ฐ ์๋ค.
ํจ์๋ฅผ ๋ง๋ค๊ณ ๋์ ์คํ์์ผ์ผ ํ๋๋ฐ ๋จผ์ ์คํ์ ์ํจ ๋ค ํจ์๋ฅผ ๋ง๋ค์ด ๋ณด์๋ค. ๋ง๋ ์๋๋ ์ฝ๋์์๋ ๋ถ๊ตฌํ๊ณ ์๋ง ์คํ๋๋ค.
๊ทธ๋ ๋ค๋ฉด const๋ฅผ ์ฌ์ฉํ ํจ์ ํํ์์ ์ด๋จ๊น.
์๊ฒฉํ๊ฒ ์คํ ์์๋ฅผ ์ก์์ฃผ๊ณ ์๋ค.
ํํ์ ๋ง๊ณ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํด๋ ๊ฒฐ๊ณผ๋ ๊ฐ๋ค.
๋๋ฌธ์ ๊ทธ๋ฅ ํจ์๋ณด๋ค๋ ์ค๋ฅ๋ ์ก์์ฃผ๊ณ ๊ฐ๊ฒฐํ ํ์ดํ ํจ์๋ฅผ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋์๋ค.
๋ํ var ์ ์ผ๋ฐ ํจ์๋ ์ค๋ณต ์ ์ธ์ด ๊ฐ๋ฅํ๋ค.
์ด๋ฐ ๋ง๋ ์๋๋ ์์ ์ด ๊ฐ๋ฅํด์ ์ด๋์ ์ด๋ค ์์์น ๋ชปํ ์ค๋ฅ๋ฅผ ์ผ์ผํฌ์ง ๋ชจ๋ฅด๊ธฐ ๋๋ฌธ์ var ์ ์ผ๋ฐ ํจ์๋ ๋ฌธ์ ๊ฐ ๋ง์์ ์ฌ์ฉํ์ง ์๊ฒ ๋์๋ค.
์ด ๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํด์ rest-API๋ฅผ getํด์ค๋ ์ฝ๋๋ฅผ ๋ง๋ค์ด๋ณด์๋ค. ๋ฌผ๋ก ๋ฐ์ดํฐ๋ฅผ async / await ์ ์ด์ฉํด ๋น๋๊ธฐ ๋ฐฉ์์ด ์๋ ๋๊ธฐ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌํด์ ๋ฐ์์์ผ ํ๋ค.
_app.js : ์ธํ ํ๋ ํ์ผ
์ด๋ค ํ์ผ์ ์ ์ํด๋ _app.js๊ฐ 1๋ฒ์ผ๋ก ์คํ๋ ๋ค์์ ์ํ๋ ํ์ผ์ด ์คํ๋๋ค. _app.js์ ์ธํ
ํด์ฃผ์ง ์์ผ๋ฉด ์ด๋์์๋ Apollo-Client๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ๊ทธ๋ฌ๋ฏ๋ก apollo-client๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ _app.js์ ์ธํ
์ ํด์ค์ผ ํ๋ค.
apollo-client๋ฅผ ์ค์นํด์ค๋ค.
ApolloClient๋ฅผ import ํด์ค๋ค.
import {ApolloClient} from '@apollo/client'
์ ApolloClient๋ฅผ ๋ง๋ค์ด์ค๋ค.
์ธํ ํด์ฃผ๊ณ client๋ผ๋ ๋ณ์์ ๋ด์์ค๋ค.
const client = new ApolloClient({
uri: "http://backend.co.kr/graphql" ,
cache: new InMemoryCache()
})
uri์๋ playground ์ฃผ์๋ฅผ ๋ฃ์ด์ค๋ค.
InMemoryCache๋ import ํด์ค๋ค.
cache๋ ์ด๋์ ์ ์ฅํ ๊ฑด๋ฐ? ๋ผ๋ ๋ง์ด๋ค.
InMemoryCache์ ์ ์ฅํ ๊ฑฐ์ผ. ๋ผ๋ ๋ง์.
์ปดํจํฐ ๊ป๋ค ํค๋ฉด ๋ ์๊ฐ๋ Memory์ ์ ์ฅํ๋ค.
Apolloprovider ๋ก Component๋ฅผ ๊ฐ์ธ์ค๋ค. (import ํด์ค๋ค.)
์ค์ ๋ด์ฉ( client) ๋ฅผ ๋๊ฒจ์ค๋ค.
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
apollo-client๋ axios์ฒ๋ผ ์์ฒญํ๋ค.
useMutation()์ด๋ผ๋ Hook์ ์ฌ์ฉํด์ ์์ฒญํ๋ฉด ๋๋ค.
๋ค์์ ๊ณผ์ ๋๋ก ํด๋ณด์.
const CREATE_BOARD = gql`
mutation{
createBoard(writer:'Amy', title:'This is title.', contents:'content!!!!'){
_id
number
message
}
}
`
const [์คํํจ์] = useMutation(Playground ๋ด์ฉ์ ๋ด์ ๋ณ์)
์คํํจ์()
์ด๋ ๊ฒ ์ํ๋ API๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ค.
์ ์ฒด ์ฝ๋๋ฅผ ๋ณด๋ฉด ์ด๋ ๋ค.
graphql-api ๋ฐฉ์๊ณผ rest-api ๋ฐฉ์ ์ฐจ์ด
์์ ๋ฐฉ๋ฒ์ ํ๋์ฝ๋ฉ๋ ๊ฐ์ผ๋ก ๋งค๋ฒ ๊ฐ์ ๊ณ ์ ๋ ๊ฐ๋ง ์์ฒญํ๋ค.
ํ๋ ์ฝ๋ฉ์ด ์๋๋ผ ์คํํ ๋๋ง๋ค ๊ฐ์ ๋ฃ์ด์ค ์ ์๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด์.
์ฐ์ input์ ๋ง๋ค์ด์ ์ฌ์ฉ์๊ฐ ์ง์ ๊ฐ์ ์์ฑํ ์ ์๊ฒ ํ๋ค.
onChange๋ก ๊ทธ ๊ฐ์ ๊ฐ์ ธ์์ useState๋ฅผ ์ฌ์ฉํด์ ์ ๋ ฅํ ๊ฐ์ ๋ณ์์ ๋ด์์ฃผ๋๋ก ํ๋ค. ๋ด์ ๋ณ์๋ฅผ API๋ฅผ ์์ฒญํ ๋ variables ๊ฐ์ผ๋ก ๋ฃ์ด์ค๋ค.
์ฌ์ฉ์๊ฐ ์์ฑํ ๋๋ง๋ค ๋ค๋ฅธ ๋์ ์ธ ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋๋ก Playground์ Type ๋ถ๋ถ์ ์ฐธ๊ณ ํด์ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํด์ค๋ค.
์ธ๋ป ๋ณด๋ฉด ๊ฐ์ ๋ด์ฉ์ ๋๋ฒ์ฉ์ด๋ ์ ์ด์ค๋ค๊ณ ์๊ฐํ ์ ์๋๋ฐ ์ด๋ mutation์ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ด์ ์ฌ๋ฌ API๋ฅผ ํ๋ฒ์ ์์ฒญํ๊ธฐ ์ํ ๋ฌถ์ ๋ฐฉ์์ด๋ค. ์ด ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ๋ฐ์ดํฐ๋ฅผ ํ๋ฒ์ ๋ชจ๋ ์์ฒญํ ์ ์์ด์ ์๋ฒ ๋น์ฉ ์ ๊ฐ ํจ๊ณผ๋ ๋ณผ ์ ์๋ค.