๐Ÿงจ Apollo

  • Apollo๋Š” Client, Sever ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์บ์‹ฑ ๋ฐ ์ฟผ๋ฆฌ ๋ถ„์„๋„๊ตฌ๋ฅผ ์ œ๊ณต

  • REST API๋Š” Redux๋ฅผ ๋Œ€์ฒดํ•˜๋Š” GraphQL / Apollo

  • graphql์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์ƒํƒœ๊ด€๋ฆฌ ํ”Œ๋žซํผ. ํด๋ผ์ด์–ธํŠธ์—์„œ graphql์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” UI๋ฅผ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹๋‹ค.

    yarn install apollo-boost react-apollo graphql
    • apollo-boost : Apollo Client๋ฅผ ์„ค์ •ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๊ฒƒ์ด ๋“ค์–ด์žˆ๋Š” ํŒจํ‚ค์ง€
    • react-apollo : React๋ฅผ ์œ„ํ•œ apollo
    • graphql : GraphQL ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
      import { ApolloConsumer } from 'react-apollo';
    • apollo-client์˜ cache state๋ฅผ ์‚ฌ์šฉ / client์˜ cache๋ฅผ ์ฝ์–ด์˜ค๊ณ  ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค. apollo cache๋Š” ์•ฑ์ด query, mutation์œผ๋กœ ๋„คํŠธ์›Œํ‚นํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ž๋™์œผ๋กœ ์บ์‰ฌ์— ๊ธฐ๋กํ•œ๋‹ค.
    • apollo client์—์„œ ๋กœ์ปฌ resolver๋ฅผ ์ž‘์„ฑํ•˜์—ฌ mutation์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ๋ฅผ ๊ถŒ์žฅ
      resolver : ๊ฐ ์ฟผ๋ฆฌ ํ•„๋“œ์— ๋Œ€ํ•œ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋กœ์ง์„ ๋‹ด๊ณ  ์žˆ๋Š” ํ•จ์ˆ˜

๐Ÿงจ Apollo๋ฅผ ์‚ฌ์šฉํ•˜๋Š” SSR์˜ ์žฅ์ 

Redux์™€ Universal Router ์‚ฌ์šฉ์‹œ SSR ํ”„๋กœ์„ธ์Šค

Redux ๊ธฐ๋ฐ˜์˜ ์„œ๋น„์Šค์—์„œ๋Š” Universal Router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ผ์šฐํ„ฐ๋กœ ์‚ฌ์šฉํ•ด SSR์„ ์‹คํ–‰ํ•˜๋Š” ์‚ฌ๋ก€๊ฐ€ ๋งŽ๋‹ค. ๋‹ค์Œ์€ Redux์™€ Universal Router๋ฅผ ์‚ฌ์šฉํ•œ SSR์˜ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‚˜ํƒ€๋‚ธ ๋„์‹

รชยทยธรซยฆยผ

  • Redux์™€ Universal Router๋ฅผ ์‚ฌ์šฉํ•œ SSR ์ˆœ์„œ

    1. Universal Router๊ฐ€ ๋ Œ๋”๋ง๋  ๋ผ์šฐํŒ… ๊ฒฝ๋กœ๋ฅผ ํ™•์ธํ•˜๊ณ  ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
    2. ๊ฐ€์ ธ์˜จ ๋ฆฌ์†Œ์Šค๋ฅผ ์Šคํ† ์–ด์— ์ €์žฅํ•œ๋‹ค.
    3. ๋ฆฌ์†Œ์Šค๊ฐ€ ์ €์žฅ๋œ ์Šคํ† ์–ด์™€ ํ•„์š”ํ•œ ์ถ”๊ฐ€ ๋ฆฌ์†Œ์Šค๋ฅผ React ์ปดํฌ๋„ŒํŠธ์˜ prop์— ์ „๋‹ฌํ•œ๋‹ค.
    4. React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•œ ๊ฒฐ๊ณผ๋ฅผ HTML ์ฝ”๋“œ๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
    5. ์„œ๋ฒ„์—์„œ ๋ฐ›์€ HTML ์ฝ”๋“œ๋กœ ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•œ๋‹ค.
  • ๋‹จ์ 

    • ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋กœ์ง๊ณผ API๋ฅผ ๋ผ์šฐํŒ… ๊ฒฝ๋กœ๋งˆ๋‹ค ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค.
    • Redux์˜ ์Šคํ† ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์•ก์…˜๊ณผ ๋ฆฌ๋“€์„œ๋ฅผ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค.
    • ๋ Œ๋”๋ง ์ ˆ์ฐจ๊ฐ€ ๋ณต์žกํ•˜๋‹ค.
    • ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ๋ชจ๋“  ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฐ›์„ ๋•Œ๊นŒ์ง€ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•  ์ˆ˜ ์—†๋‹ค.

Apollo์™€ React Router v4 ์‚ฌ์šฉ์‹œ SSR ํ”„๋กœ์„ธ์Šค

รชยทยธรซยฆยผ

  • ์ˆœ์„œ

    1. React Router v4์—์„œ ๋ผ์šฐํŒ… ๊ฒฝ๋กœ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค.
    2. ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ Apollo Client๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฐ›์€ ํ›„ HTML ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.
    3. ์„œ๋ฒ„์—์„œ ๋ฐ›์€ HTML ์ฝ”๋“œ๋กœ ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•œ๋‹ค.
  • ์žฅ์ 

    • ๋ผ์šฐํŒ… ๊ฒฝ๋กœ์— ์ƒ๊ด€์—†์ด ์ปดํฌ๋„ŒํŠธ๋ณ„๋กœ ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋งŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
    • ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๊ณ  ๋ Œ๋”๋ง๋งŒ ์‹คํ–‰ํ•˜๊ณ , ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•  ๋•Œ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ค๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ผ์šฐํŒ… ๊ฒฝ๋กœ์— ์˜์กด์„ฑ์ด ์‚ฌ๋ผ์ ธ์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐœ๋ฐœ์ด ์šฉ์ดํ•ด์ง„๋‹ค.
    • ๋‚ด๋ถ€์˜ ๋ถ„๊ธฐ๊ฐ€ ์—†๋Š” ํ•˜๋‚˜์˜ ๋ผ์šฐํ„ฐ ์ฝ”๋“œ๋กœ ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง๊ณผ ์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ณ„๋„์˜ ์•ก์…˜๊ณผ ๋ฆฌ๋“€์„œ๊ฐ€ ์—†์–ด๋„ ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

: Apollo Client ์ž์ฒด์—๋„ ์ €์žฅ์†Œ(store)๊ฐ€ ์žˆ์–ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œ์— ์ €์žฅํ•˜๊ณ  Apollo Client์˜ readQuery ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด ์บ์‹œ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

GraphQL๊ณผ Apollo์˜ ๋‹จ์ 

  • ์ค‘์ฒฉ๋œ ๊ฐ์ฒด์™€ ๊ฐ์ฒด ๋ฐฐ์—ด์— ๋Œ€ํ•ด์„œ๋„ ์Šคํ‚ค๋งˆ๋ฅผ ์ •์˜ํ•ด์•ผ ํ•œ๋‹ค. ๋งŒ์•ฝ ์ •์˜๋˜์ง€ ์•Š์€ ๋ฆฌ์†Œ์Šค ํƒ€์ž…์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๋ณต์žกํ•œ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” ์Šคํ‚ค๋งˆ๋ฅผ ์ •์˜ํ•˜๋Š” ์ผ์ด ๋ณต์žกํ•˜๊ฒŒ ๋Š๊ปด์งˆ ์ˆ˜ ์žˆ๋‹ค.
  • React ๊ธฐ๋ฐ˜์˜ Apollo Client์ธ react-apollo๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” Content-Type ์š”์ฒญ ํ—ค๋”์˜ MIME ํƒ€์ž…์„ application/graphql๋กœ ์„ค์ •ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. ์„œ๋ฒ„์—์„œ๋„ GraphQL ํŒŒ์‹ฑ์„ ์ง€์›ํ•˜๋Š” body-parser-graphql๊ณผ ๊ฐ™์€ ํŒŒ์„œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” application/json์œผ๋กœ ์„ค์ •ํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ํŒŒ์‹ฑ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
  • Apollo Client์˜ ์ฟผ๋ฆฌ๋Š” variables ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฌธ์ž์—ด ํ˜•ํƒœ์˜ ์บ์‹œ ํ‚ค ๊ฐ’์„ ๋งŒ๋“ ๋‹ค. variables ๊ฐ์ฒด์˜ ์†์„ฑ์ด ์ˆœ์„œ๊ฐ€ ๋‹ค๋ฅด๋ฉด ๋ณ„๋„์˜ ์ฟผ๋ฆฌ๋กœ ์ธ์‹ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค. Apollo Client์—์„œ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์บ์‹œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ apollo-cache-inmemory์˜ InMemoryCache ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๊ณ ์œ ํ•œ(unique) ํ‚ค๋ฅผ ์ƒ์„ฑํ•˜๋„๋ก dataIdFromObject ์˜ต์…˜์„ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฌธ์ œ์— ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๋‹ค.

[์ฐธ๊ณ  ๋ฌธ์„œ] : ๋„ค์ด๋ฒ„D2

๐Ÿ—ฟ Problem ?

cache, pragment / client state / redux ๋Œ€์ฒด?