FrontEnd/Vue.js

[Vue/nuxt] mounted์—์„œ $ref undefined ํ•ด๊ฒฐํ•˜๊ธฐ(<client-only> ์ด์Šˆ)

๊น€ํ‰๋ฒ”๋‹˜ 2022. 5. 2. 22:00
๋ฐ˜์‘ํ˜•

vue.js client-only $ref ํ•ด๊ฒฐํ•˜๊ธฐ

๐Ÿ“Œ์ตœ๊ทผ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ์  $ref undefined

mounted()์—์„œ $ref์— ์ ‘๊ทผ์„ ํ•ด์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ์ ์šฉ์„ ํ•˜๋ ค๊ณ  ํ•ด ๋ดค๋Š”๋ฐ,

$ref์— ์ ‘๊ทผ์ด ์•ˆ๋˜๊ณ  undefined๊ฐ€ ๋œจ๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

 

๋ฌด์—‡์ด ๋ฌธ์ œ์ธ์ง€ ์ฐพ์•„๋ณธ ๊ฒฐ๊ณผ 

<client-only>์•ˆ์— ์žˆ๋Š” $ref์— ์ ‘๊ทผ์„ ํ•  ๋•Œ,

์ดˆ๋ฐ˜์— undefined๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ์ฐพ์•„๋ƒˆ๋‹ค.

 

์ด๋Ÿฌํ•œ ์ƒํ™ฉ์€ ์™œ ๋ฐœ์ƒํ•˜๋Š”๊ฑธ๊นŒ?

๋จผ์ € ์ด ๋ฌธ์ œ๋ฅผ ์•Œ๊ธฐ ์œ„ํ•ด์„œ๋Š” <client-only>๋ฅผ ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€๋ฅผ ์•Œ์•„์•ผ ํ–ˆ๊ณ ,

SSR๊ณผ CSR์˜ ์ฐจ์ด๋ฅผ ๋จผ์ € ์ดํ•ดํ•ด์•ผ ๋˜์–ด์„œ 

์˜ค๋Š˜์€ ์ด ๋ถ€๋ถ„์„ ์ •๋ฆฌํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค!

 

 

โš™๏ธSSR์ด๋ž€?

Server Side Rendering์ด๋ผ๊ณ  ํ•ด์„œ

Server์—์„œ ๋ Œ๋”๋ง์ด ๋œ HTML ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด์„œ ๋ณด๋‚ด์ฃผ๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค.

 

SSR ์‹คํ–‰ ๊ณผ์ •

SSR๋กœ ์ฒ˜๋ฆฌ๊ฐ€ ๋œ๋‹ค๊ณ  ํ•˜๋ฉด ๋ชจ๋“  ๋ฆฌ์†Œ์Šค๋ฅผ ์„œ๋ฒ„์—์„œ ๋žœ๋”๋ง ํ•œ ๋‹ค์Œ์—

ํด๋ผ์ด์–ธํŠธ ์ชฝ์— Return์„ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋‘ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ์„œ๋ฒ„ ์ธก์— ๋ถ€๋‹ด์ด ์žˆ์œผ๋‚˜

๋ฐ›๊ธฐ๋งŒ ํ•œ๋‹ค๋ฉด ๋ฐ”๋กœ ์™„์„ฑ๋œ ํ™”๋ฉด์„ ๋„์šธ ์ˆ˜ ์žˆ์–ด ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค.

 

 

๐ŸงพCSR์ด๋ž€?

SSR๊ณผ ๋ฐ˜๋Œ€๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ CSR(Client Side Rendering)์ด ์žˆ๋‹ค.

Client Side Rendering์ด๋ผ๊ณ  ํ•ด์„œ

์„œ๋ฒ„์—์„œ HTML๊ณผ Javascipt๋ฅผ ํ•จ๊ป˜ ๋ณด๋‚ด์„œ

ํด๋ผ์ด์–ธํŠธ์—์„œ ๋‘ ํŒŒ์ผ์„ ๋ฐ›์•„ ๊ฐ™์ด ๋žœ๋”๋ง์„ ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

CSR ๋žœ๋”๋ง ๊ณผ์ •

 

CSR์˜ ๊ฒฝ์šฐ ์ผ๋‹จ ํŽ˜์ด์ง€๊ฐ€ ๋œจ๋‚˜, ์ฒ˜์Œ ๋นˆ ํŽ˜์ด์ง€๊ฐ€ ๋œจ๊ณ ,

๊ทธ๋‹ค์Œ์— ํ™”๋ฉด์„ ๊ทธ๋ฆด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ HTML ์ฝ์–ด Rendering ์‹คํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์—

SSR๋ณด๋‹ค ์ดˆ๊ธฐ ๋กœ๋”ฉ ์‹œ๊ฐ„์€ ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค.

 

 

๐ŸŽvue + Nuxt.js

Vue์—์„œ SSR์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ๋ฐ”๋กœ nuxt.js์ด๋‹ค.

๋‚˜์˜ ๊ฒฝ์šฐ๋„ Nuxt๋ฅผ ์ด์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑ์„ ๋งŽ์ด ํ•˜๊ณ  ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ, SSR๋ฅผ ๊ตฌํ˜„์„ ํ–ˆ์ง€๋งŒ ํ•„์š”์— ๋”ฐ๋ผ์„œ CSR์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„๋“ค์ด ์žˆ์—ˆ๋‹ค.

์ด๋Ÿด ๋•Œ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ <client-only> ์ปดํฌ๋„ŒํŠธ์˜€๋‹ค.

 

<client-only>

<client-only> ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ๋“ค์–ด์žˆ๋Š” ์ž์‹ ์š”์†Œ๋“ค์€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋žœ๋”๋ง์„ ์ง„ํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

์œ„์˜ ์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด client-only์•ˆ์— ์žˆ๋Š” comments๋Š” CSR๋กœ ํ˜ธ์ถœ์„ ํ•  ์ˆ˜ ์žˆ๊ณ 

Client Side์—์„œ ๊ทธ๋ ค์ง€๋Š” ๋™์•ˆ Placeholder์— ์ž‘์„ฑ๋œ ํ…์ŠคํŠธ๊ฐ€ ํ‘œ์‹œ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 

<no-ssr>

Nuxt.js v2.9.0 ๋ฒ„์ „ ์ „์—๋Š” <no-ssr>๋ฅผ ์‚ฌ์šฉํ–ˆ์œผ๋‚˜,

์œ„ ๋ฒ„์ „ ์ด์ƒ๋ถ€ํ„ฐ๋Š” <client-only>๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋‹ˆ,

์ตœ์‹  ๋ฒ„์ „์—์„œ๋Š” <client-only>๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. 

 

 

 

 

๐Ÿฅฒ<client-only> ์•ˆ์˜ $ref ๋ฌธ์ œ

<client-only> ์•ˆ์—์„œ $ref๊ฐ€ ์žˆ์–ด์„œ ํ•ด๋‹น ์š”์†Œ์— ์ ‘๊ทผ์„ ํ•˜๋ ค๋‹ค ๋ณด๋ฉด์€

๋ฐ”๋กœ ์ ‘๊ทผ์ด ๋˜์ง€ ์•Š์€ ์ฑ„  undefined๊ฐ€ ๋œจ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.

 

์ด๋Ÿฐ ๊ฒฝ์šฐ๋Š” Client์—์„œ Rendering์„ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— mounted๊ฐ€ ๋˜๋”๋ผ๋„ 

์•„์ง ๊ทธ๋ ค์ง€์ง€ ์•Š์•˜๋‹ค๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์•„์ง ์ฝ์„ ์ˆ˜ ์—†๋Š” ์ƒํ™ฉ์ธ ๊ฒƒ์ด๋‹ค.

 

Nuxt์—์„œ๋Š” $netTick์„ ์ด์šฉํ•ด์„œ ์ค€๋น„๊ฐ€ ๋  ๋•Œ๋ฅผ ์ฒดํฌํ•ด์„œ ์ ‘๊ทผ์„ ํ•˜๋Š” ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ œ์‹œํ•˜๊ณ  ์žˆ๋‹ค.

mounted(){
  this.initClientOnlyComp()
},
methods: {
  initClientOnlyComp(count = 10) {
    this.$nextTick(() => {
      if (this.$refs.myComp) {
        //...
      } else if (count > 0) {
        this.initClientOnlyComp(count - 1);
      }
    });
  },
}

mounted ์‹œ initClientOnlyComp๋ฅผ ํ˜ธ์ถœํ•ด์„œ 

this.$ref๊ฐ€ ์žˆ๋Š”์ง€ ์—†๋Š”์ง€๋ฅผ ์ฒดํฌํ•œ ๋’ค ๋งŒ์•ฝ ์—†๋‹ค๋ฉด ๋‹ค์‹œ ํ•ด๋‹น function์„ ์žฌํ˜ธ์ถœ ํ•œ๋‹ค.

์ดˆ๊ธฐ countํšŸ์ˆ˜๋งŒํผ ํ•ด๋‹น function์„ ์žฌ ํ˜ธ์ถœํ•œ๋‹ค.

 

 


๊ด€๋ จ ํฌ์ŠคํŒ…

https://ordinary-code.tistory.com/147

 

[Vue.js] ref undefined์ผ ๊ฒฝ์šฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• (this.$nextTick)

๐Ÿท๏ธVue ref๋ž€? Vue์—์„œ ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋‚˜ HTML์— ์ ‘๊ทผ์„ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ref์†์„ฑ์„ ์ด์šฉํ•ด์„œ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋จผ์ € ์•„๋ž˜์˜ ์ฝ”๋“œ๋กœ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž. /page/ref.vue ์ƒ์œ„์ปดํฌ๋„ŒํŠธ ์ž…๋‹ˆ๋‹ค. ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ํด๋ฆญ

ordinary-code.tistory.com

 

 

 

Reference

https://nuxtjs.org/docs/features/nuxt-components/

 

Built-in Components

Nuxt comes with a few important components included out of the box, which will be helpful when building your application.

nuxtjs.org

https://www.toptal.com/vue-js/server-side-rendered-vue-js-using-nuxt-js

 

Creating Server-side Rendered Vue.js Apps Using Nuxt.js

When initially loading your website, your browser doesn't receive a complete page to display. Instead, it gets a bunch of pieces and instructions of how to put them all together. It takes a substantial amount of time to put all this information together be

www.toptal.com

 

๋ฐ˜์‘ํ˜•