프론트엔드 개발

swiper안에 button영역 클릭 후 스와이프 안되는 현상

태나미 — Wed, 4 Dec 2024 17:14:19 +0900

이슈 발생

swiper영역 안에 버튼을 누르고 alert혹은 confirm창이 뜨고나서 버튼을 스와이프하면 스와이프가 되지않는 이슈 발생, pc모드에서는 잘되지만 모바일 디버깅시 발생

해결

swiper 옵션 중 touchStartForcePreventDefault: true 속성 추가하여 브라우저의 기본 동작을 차단한다.

touchstart이벤트에 대해 기본동작을 막아 Swiper의 동작이 강제적으로 우선 처리 되게 한다.

기존 접근 방법

버튼을 눌러 alert가 나오면 이벤트 버블링을 하여 스와이퍼 동작이 차단된것 같아 vue 에서 @click.stop을 했는데도 소용이 없었다.
이 방식은 잘못 접근하였는데 @click.stop은 클릭 이벤트의 전파를 막는 역할만 수행하며, Swiper와 관련된 터치 이벤트에는 영향을 미치지 않았다
이러한 이유로 Swiper 내부에서 처리하는 터치 이벤트와 브라우저의 기본 동작 간의 충돌 때문일거라고 생각하여 스와이퍼 터치 이벤트 처리하는 로직이 근본 원인이라고 생각하여 모든 터치 이벤트에 브라우저 기본 동작을 막도록 하였다. 필요한 경우에만 true를 하고 false를 권장한다고 한다.

문제 핵심 원인

브라우저에서 제공하는 alert/confirm 동작 특성
- 이들은 JS 이벤트 루프를 블로킹하여 스와이프의 터치 이벤트를 비정상적으로 종료시킬 수 있음
- 이로 인해 Swiper 내부의 이벤트 핸들러가 중단된 상태로 터치를 무시하게 되는 이유

vue composition API를 쓰고난 후

태나미 — Thu, 16 Feb 2023 14:50:48 +0900

Setup 훅에서 Route와 Router에 접근하는 법

options API

vue router를 App에 mount 시켜줘 mehods, computed등에서 this에 접근가능하여 this.$route 라던가 this.$router를 사용하여 접근하였음

- main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app');

Composition API 사용

setup 훅 내부에서 'this' 접근할 수 없기 때문에 useRouter를 import 하여 사용해야 한다.

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    }
  },
}

해당 컴포넌트에서만 필요할때만 vue-router나 vueRoute를 import 하기 때문에 장점이 있을 수 있을것 같다. 하지만 매번 import하여 사용하는건 귀찮음을 동반한다.

setup 훅이 아닌 <script setup>을 사용한다면 다음과 같은 이점이 있습니다. (공식 홈페이지 내용)

더 적은 상용구로 더 간결한 코드
순수 TypeScript를 사용하여 소품 및 방출된 이벤트를 선언하는 기능
런타임 성능 향상(템플릿이 중간 프록시 없이 동일한 범위의 렌더링 함수로 컴파일됨)
더 나은 IDE 유형 추론 성능(언어 서버가 코드에서 유형을 추출하는 작업 감소)

<template>
    <div>
        {{ title }}
    </div>
</template>

<script setup lang="ts">
    defineOptions({
        name: 'Temp',
    });

    const { title } = props;

    const props = defineProps({
        title: {
            type: String,
            default: '',
        },
    });
</script>

직접 사용해보았는데, script 태그를 이용하면 options API에서 사용하는 컴포넌트의 name을 사용하기 위해서는 Vue Macros 라이브러리를 이용하여 defineOptions로 정의할 수 있습니다.

defineProps로 상위 컴포넌트에서 전달받은 props로 사용가능합니다. template 안에서 list를 사용하기 위해서 props.list와 같이 사용할 수 있지만 props에 대한 내용이 많다면 깔끔하지 않을것 같아 구조분해 할당을 이용했습니다. composition API는 구조분해할당을 options API보다 비교적 많이 사용하였던것 같습니다. options API는 props에 접근하기 위해서는 <script> 태그 안에서는 this를 이용하였고, template에서는 바로 접근하였습니다.

참고:
- https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

- https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#watch-watcheffect-%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%8C%E1%85%B5

vue - computed parameter

태나미 — Fri, 2 Sep 2022 22:09:50 +0900

vue - computed parameter 사용하는 방법

보통 methods에 함수를 정의해 parameter를 넘기고 있었지만, computed를 사용할때도 parameter를 넘길 수 있는지 궁금했다.

아래와 같이 사용할 수 있는데, 보통 아래와 같을때는 methods에 함수를 정의하는 방식으로 사용할 수 있겠지만 어떨 때 다음과 같은 방식을 사용하는지는 좀 알아봐야겠다.

<template>
    <ul>
        <li v-for="(item, index) in temp" :key="index">
            <button type="button" @click="temp(index)">
                <span>{{ item }}</span>
            </button>
        </li>
    </ul>
</template>

<script>
    export default {
        computed: {
            temp() {
                return (index) => {
                    return index;
                };
            },
        },
    };
</script>

출처: https://velog.io/@nekonitrate/Vue.js-computed-%EC%97%90-Parameter-%EB%A5%BC-%EB%84%98%EA%B8%B0%EB%8A%94-%EB%B0%A9%EB%B2%95

git branch 삭제

태나미 — Tue, 30 Aug 2022 18:40:49 +0900

- remote 브랜치 삭제하는 방법

* 아래 명령어를 사용하면 local에 있는 branch가 아닌 remote에 있는 branch가 삭제된다는것을 잘 알고 사용해야 한다.

git push origin --delete [branchName]

[선택] remote에 있는 branch를 삭제하고 나서 local에도 있다면 삭제한다.

- local 브랜치 삭제하는 방법

git branch -d [branchName]

강제로 제거해야한다면

git branch -D [branchName]

출처:

vue - input enter시 함수를 2번 호출하는 에러 수정

태나미 — Mon, 15 Aug 2022 02:13:38 +0900

아래와 같이 enter를 눌렀을 경우 함수가 2번 호출되는 문제가 있었는데 해결한 경험을 공유하겠습니다

<template>
  <input
    type="text"
    @keyup.enter="handler"
  />
</template>

간단하게 keyup => keypress로만 수정하면 됩니다

<template>
  <input
    type="text"
    @keypress.enter="handler"
  />
</template>

수정이 완료되었다면 네트워크 탭에서 맞게 호출하고 있는지 확인해보세요

vue input value 값 실시간 변경 감지

태나미 — Sun, 14 Aug 2022 23:54:01 +0900

vue - input value값 변경 실시간 감지를 위해서 @input 사용

예시)

<temaplate>
	<input type="text" @input="onChange($event)">
</temaplate>

<script>
    onChange(event){
        console.log(event.target.value)
    }
<script>

zsh: command not found: code

태나미 — Thu, 21 Jul 2022 10:53:43 +0900

맥os를 이용하여 zsh에서 code. 를 쳤을때 다음과 같은 오류 발견

zsh: command not found: code

해결방법

VSC에서

command + shift + p를 누르면 code 명령 설치를 눌러준다.

1. 정상 설치되었을때

2. 에러가 나면

permission denied unlink '/usr/local/bin/code'

다음 명령어를 입력

cd /usr/local/bin
sudo rm -rf code

추가 에러 발생

터미널에서 path 잘못입력해서 어떤 명령어든 찾을 수 없다는 에러 발생

1. 터미널에 아래 명령어 입력

export PATH=%PATH:/bin:/usr/local/bin:/usr/bin

2. 다시 vi ~/.zshrc 에서 수정

3. source ~/.zshrc 적용

출처:

https://keepdev.tistory.com/67

Nuxt + Typescript

태나미 — Sun, 8 May 2022 16:36:16 +0900

먼저 Nuxt 공식 홈페이지에 나와있는 영어를 번역하면서 Typescript의 컨셉에 대해 살펴보고 적용하는 방법에 대해서 알아보겠습니다.

TypeScript Concepts

Nuxt 3는 코딩할 때 정확한 type 정보에 접근할 수 있도록 유용한 shortcut을 제공합니다.

Type-checking

기본적으로 Nuxt는 성능상의 이유로 nuxi dev 또는 nuxi build를 실행할 때 type을 확인하지 않습니다.

nuxt.config 파일의 typescript.typeCheck 옵션을 사용하여 빌드 또는 개발 시 type 검사를 활성화하거나 nuxi를 수동으로 type을 검사할 수 있습니다.

yarn nuxi typecheck

위의 커맨드를 입력하고 typescript 및 vue-tsc를 설치를 해줍니다.

Auto-generated types

nuxi dev 또는 nuxi build를 실행 시 Nuxt는 IDE type support 및 type 검사를 하기 위해 아래 2가지 파일을 생성합니다.

.nuxt / nuxt.d.ts

이 파일에는 사용 중인 모듈의 유형과 Nuxt 3에 필요한 키 유형이 포함되어 있습니다. IDE는 이러한 유형을 자동으로 인식해야 합니다.
파일의 일부 참조는 buildDir(.nuxt) 내에서만 생성된 파일에 대한 것이므로 전체 입력의 경우 nuxi dev 또는 nuxi build를 실행해야 합니다.

.nuxt / tsconfig.json

이 파일에는 Nuxt 또는 사용 중인 모듈에 의해 주입된 확인된 별칭을 포함하여 프로젝트에 권장되는 기본 TypeScript 구성이 포함되어 있으므로 ~/file 또는 #build/file과 같은 별칭에 대한 전체 type support 및 경로 자동 완성을 얻을 수 있습니다.

Stricter checks

TypeScript는 프로그램에 대한 더 많은 안전성과 분석을 제공하기 위해 특정 검사와 함께 제공됩니다.
코드베이스를 TypeScript로 변환하고 익숙해지면 이러한 검사를 활성화하여 안전성을 높일 수 있습니다.
strict type 검사를 활성화하려면 nuxt.config 를 다음과 같이 작성해야 합니다.

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

이제부터는 typescript.nuxt를 보면서 알아가 보겠습니다.

Introduction

Nuxt Typescript는 다음 3가지 패키지가 있습니다.

이 패키지들은 Nuxt v2.10 이상에서만 사용하도록 되어 있습니다.

@nuxt/types
@nuxt/typescript-build
@nuxt/typescript-runtime

Setup

Nuxt TypeScript 지원은 주로 Nuxt 모듈, @nuxt/typescript-build 및 해당 types은 @nuxt/types를 통해 제공됩니다. 다음은 설치 및 가이드라인입니다.

Installation

yarn add --dev @nuxt/typescript-build @nuxt/types

최신 버전이 아닌 경우 Nuxt 버전과 일치하도록 특정 유형의 버전을 설치할 수 있습니다.

- yarn을 이용한 설치

yarn add --dev @nuxt/types@2.13.2

- npm일 경우

npm install --save-dev @nuxt/types@2.13.2

Configuration

nuxt.config.js의 buildModules에 @nuxt/typescript-build를 추가하기만 하면 됩니다

export default {
  buildModules: ['@nuxt/typescript-build']
}

이후 tsconfig.json 파일을 생성하고 다음과 같이 작성하세요.

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

다음과 같이 vue-shim.d.ts 파일을 만들어 Vue 파일에 대한 type도 제공해야 합니다.

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

또한 이 파일을 프로젝트의 루트 디렉토리나 types라는 디렉토리에 배치할 수 있습니다. 사용자 지정 디렉터리에 배치할 수 있지만 tsconfig.json 파일에서 typeRoots를 구성해야 합니다.

모듈 옵션은 여기를 참고하세요.

Runtime (optional)

TypeScript runtime은 nuxt.config 파일, 로컬 모듈 및 serverMiddleware와 같이 Webpack에서 컴파일되지 않은 파일에 필요합니다.
Nuxt.js는 이 전용 패키지에 TypeScript runtime wrapper를 만들었습니다. wrapper는 nuxt-ts라는 바이너리로 실행되기 전에 ts-node를 뒤에서 등록합니다.

Installation

yarn add @nuxt/typescript-runtime

이 패키지는 production에 필요하기 때문에 @nuxt/typescript-build와 같은 devDependency가 아니라 dependency로 설치됩니다.

Usage

package.json 파일을 업데이트하기만 하면 됩니다.
참고

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "generate": "nuxt generate",
  "start": "nuxt start"
},
"dependencies": {
  "@nuxt/typescript-runtime": "latest",
  "nuxt": "latest"
},
"devDependencies": {
  "@nuxt/types": "latest",
  "@nuxt/typescript-build": "latest"
}

이제 nuxt.config 파일, 로컬 모듈 및 serverMiddleware에 TypeScript를 사용할 수 있습니다.

Lint

Configuration

ESLint를 사용하여 프로젝트를 Lint하는 경우 TypeScript 파일에서 ESLint를 Lint로 만드는 방법은 @nuxtjs/eslint-config-typescript를 설치하기만 하면 됩니다.
@nuxtjs/eslint-config를 이미 사용하고 있는 경우 dependencies에서 제거하면 Nuxt TypeScript ESLint config에 포함됩니다.

yarn add --dev @nuxtjs/eslint-config-typescript

그다음 @nuxtjs/eslint-config-typescript를 확장하여 ESLint 구성 .eslintrc.js를 생성하거나 편집합니다.

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

ESlint가 TypeScript 파서(@typescript-eslint/parser)를 사용하게 하므로 parserOptions.parser 옵션이 사용자나 확장 중인 다른 구성에 의해 영향받지 않도록 하세요.
babel-eslint를 파서로 사용하고 있었다면 .eslintrc.js 및 dependencies에서 제거하면 됩니다.

마지막으로, package.json에서 lint부분을 다음과 같이 작성하세요.

"lint": "eslint --ext .ts,.js,.vue ."

npm run lint (or yarn lint)을 터미널에 입력하여 lint를 실행할 수 있습니다.

위와같이 터미널에서 실행하는 게 아닌 파일이 저장될 때마다 린트를 실행하려면 typeCheck 모듈 옵션을 구성하여 fork-ts-checker-webpack-plugin의 eslint 기능을 활성화할 수 있습니다.
nuxt.config.js

export default {
  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  }
}

출처

Nuxt (version 3) Quick Start 해볼까?

태나미 — Sat, 7 May 2022 14:50:35 +0900

이전 시간에는 Nuxt3 이론을 배웠다면, 이번에는 공식 홈페이지를 보며 직접 Nuxt3를 만들어 보겠습니다.

Prerequisites

Node.js* (latest LTS version)
Visual Studio Code
Volar Extension, 공식문서에는 추천하는 링크를 다운받으라고 하였으나, 되지 않아서 두번째꺼를 다운받았어요
- Take Over Mode (recommended)
- TypeScript Vue Plugin (Volar)

* Node.js 가 설치되어있다면, node --version으로 v14 or v16인지 확인해주세요~!

* Take Over Mode를 활성화했거나 TypeScript Vue 플러그인(Volar)을 설치한 경우 *.vue 파일에 대한 shim 생성을 비활성화할 수 있습니다. 참고

export default defineNuxtConfig({
  typescript: {
    shim: false
  }
})

New project

terminal을 열거나 자기가 사용하는 editor를 열어 다음의 command를 입력하면서 project를 시작해보겠습니다.

npx nuxi init nuxt-app

다음과 같이 설치안내가 나오면 Enter를 입력하여 진행합니다.

cd nuxt-app

다음의 package manger중 설치하고 싶은걸 선택해서 진행합니다.

npm install or yarn install or pnpm install --shamefully-hoist

저는 yarn에 익숙하기 때문에 yarn을 이용하겠습니다.

yarn

설치가 완료되었다면, npm run dev 또는 yarn dev 또는 pnpm run dev로 개발 서버 시작합니다.

저는 yarn으로 설치하였으니 yarn dev를 입력하겠습니다.

-o를 붙이면 open의 줄임말 같습니다(추측). 명령어 입력시 바로 화면에 띄워줍니다.

yarn dev -o

개발자라면 Yes

위 명령어까지 입력되었다면, <NuxtWelcome /> 컴포넌트가 보여지게 됩니다.

출처

- https://v3.nuxtjs.org/getting-started/quick-start

Nuxt (version 3) concept에 대해

태나미 — Sat, 7 May 2022 14:22:59 +0900

Nuxt js 공식 홈페이지에서 공부하면서 번역한 것 글을 정리해보겠습니다. Nuxt 3 버전인 점 참고해주세요.

What is Nuxt?

Nuxt의 목표는 뛰어난 개발자 경험을 염두에 두고 직관적이고 성능이 뛰어난 웹 개발을 만드는 것입니다.

Why Nuxt?

Nuxt가 무엇인지 이해하려면 최신 애플리케이션을 만드는 데 필요한 사항을 이해해야 합니다.

reactivity 및 web components를 사용할 수 있는 JavaScript 프레임워크인 Vue.js를 선택했습니다.
개발 중 핫 모듈 교체를 지원하고 프로덕션용 코드를 번들로 제공하는 번들러인 webpack 5와 Vite를 모두 지원합니다.
레거시 브라우저를 지원하면서 최신 JavaScript 구문을 작성하는 변환기인 esbuild를 사용합니다.
개발 중인 애플리케이션을 제공할 뿐만 아니라 서버 측 렌더링 또는 API 경로를 지원하기 위해 Nuxt는 h3를 사용하여 서버리스, 작업자, Node.js 및 탁월한 성능과 같은 배포 다양성을 제공합니다.
클라이언트 측 탐색을 처리하는 라우팅 라이브러리인 vue-router를 선택했습니다.

또한 Nuxt js는 Vue 애플리케이션에 최고의 최적화와 성능을 제공합니다.

Nuxt는 이를 처리하므로 웹 애플리케이션 생성에 집중할 수 있습니다. 이 설정 외에도 Nuxt는 구성이 아닌 생성에 집중할 수 있도록 특정 기능에 중점을 둔 디렉터리 구조를 제공합니다.

Feature Comparison v2 ~ v3

Vue.js Development

Nuxt는 Vue를 프론트엔드 프레임워크로 사용하고 component auto-imports 및 파일 기반 라우팅과 같은 기능을 추가합니다. Nuxt 3는 Nuxt 사용자를 위한 새로운 패턴을 가능하게 하는 Vue의 새로운 주요 릴리스인 Vue 3을 통합합니다.

Vue with Nuxt

Single File Component
- Vue의 단일 파일 구성 요소(SFC 또는 *.vue 파일)는 Vue component의 마크업(<template>), 논리(<script>) 및 스타일 지정(<style>)을 캡슐화합니다. Nuxt는 원활한 개발자 경험을 제공하는 Hot Module Replacement를 통해 SFC에 대해 구성이 필요 없는 경험을 제공합니다.

Components auto-imports
- Nuxt 프로젝트의 components/directory 생성된 모든 Vue component는 import 할 필요 없이 프로젝트에서 사용할 수 있습니다. component가 어디에도 사용되지 않으면 프로덕션 코드에 포함되지 않습니다.

Vue Router
- 대부분의 애플리케이션에는 여러 페이지와 페이지 사이를 탐색하는 방법이 필요합니다. 이를 라우팅이라고 합니다. Nuxt는 페이지/디렉토리 및 명명 규칙을 사용하여 공식 Vue Router 라이브러리를 사용하여 파일에 매핑된 경로를 직접 생성합니다.

Nuxt 3만의 특별한 점

Nuxt 3는 Vue 3을 기반으로 합니다. 새로운 주요 Vue 버전은 Nuxt가 활용하는 몇 가지 변경 사항을 소개합니다.

Better performance
Composition API
TypeScript support

Faster rendering

VDOM(Vue Virtual DOM)은 처음부터 다시 작성되었으며 더 나은 렌더링 성능을 제공합니다. 게다가 컴파일된 단일 파일 구성 요소(SFC)로 작업할 때 Vue 컴파일러는 정적 및 동적 마크업을 분리하여 빌드 최적화할 수 있습니다.
따라서 첫 번째 렌더링(component 생성 시) 및 업데이트가 빨라지고 메모리 사용량이 줄어듭니다. Nuxt 3에서는 더 빠른 서버 측 렌더링도 가능합니다.

Smaller bundle

Vue 3 및 Nuxt 3에서는 번들 크기 축소에 중점을 두었습니다. 버전 3에서는 템플릿 지시문 및 내장 component를 포함한 대부분의 Vue 기능이 트리를 흔들 수 있습니다. 사용하지 않으면 프로덕션 번들에 포함되지 않습니다.
이렇게 하면 최소한의 Vue 3 애플리케이션을 12kb gzip으로 줄일 수 있습니다.

Composition API

Vue 2에서 component의 데이터와 논리를 제공하는 유일한 방법은 데이터 및 메서드와 같은 미리 정의된 속성이 있는 템플릿에 데이터와 메서드를 반환할 수 있는 옵션 API를 사용하는 것이었습니다

// Vue 2
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}
</script>

Vue 3에 도입된 Composition API는 Options API를 대체하는 것은 아니지만 애플리케이션 전체에서 더 나은 논리 재사용을 가능하게 하고 복잡한 component에서 관심사별로 코드를 그룹화하는 보다 자연스러운 방법입니다.
<script> 정의에서 setup 키워드와 함께 사용되는 코드는 Composition API 및 Nuxt 3의 auto-imported Reactivity APIs로 다시 작성되었습니다.

// Vue 3
<script setup>
  const count = ref(0);
  const increment = () => count.value++;
</script>

TypeScript support

Vue 3와 Nuxt 3은 모두 TypeScript로 작성되었습니다. 완전한 형식의 코드베이스는 실수를 방지하고 API 사용을 문서화합니다. 그렇다고 해서 TypeScript를 활용하기 위해 애플리케이션을 작성해야 한다는 의미는 아닙니다. Nuxt 3에서는 파일 이름을 .js에서 .ts로 변경하거나 component에 <script lang="ts">를 추가하여 옵트인할 수 있습니다.

Rendering Modes

브라우저와 서버 모두 JavaScript 코드를 해석하여 Vue.js component를 HTML 요소로 렌더링할 수 있습니다. 이 단계를 렌더링이라고 합니다. Nuxt는 클라이언트 측 및 범용 렌더링을 모두 지원합니다. 두 가지 접근 방식에는 이 섹션에서 다룰 장단점이 있습니다.

Client-side only rendering

기본적으로 기존 Vue.js 애플리케이션은 브라우저(또는 클라이언트)에서 렌더링 됩니다. 그런 다음 Vue.js는 브라우저가 현재 인터페이스를 만들기 위한 지침이 포함된 모든 JavaScript 코드를 다운로드하고 구문 분석한 후 HTML 요소를 생성합니다.

장점

Development speed: 전적으로 클라이언트 측에서 작업할 때 창 개체와 같은 브라우저 전용 API를 사용하여 코드의 서버 호환성에 대해 걱정할 필요가 없습니다.
Cheaper: 서버를 실행하면 JavaScript를 지원하는 플랫폼에서 실행해야 하므로 인프라 비용이 추가됩니다. HTML, CSS 및 JavaScript 파일이 있는 모든 정적 서버에서 클라이언트 전용 애플리케이션을 호스팅 할 수 있습니다.
Offline: 코드가 완전히 브라우저에서 실행되기 때문에 인터넷을 사용할 수 없는 동안에도 계속 작동할 수 있습니다.

단점

Performance: 사용자는 브라우저가 JavaScript 파일을 다운로드, 구문 분석 및 실행할 때까지 기다려야 합니다. 다운로드 부분의 네트워크와 구문 분석 및 실행을 위한 사용자 장치에 따라 다소 시간이 걸리고 사용자 경험에 영향을 줄 수 있습니다.
Search Engine Optimization: 클라이언트 측 렌더링을 통해 전달된 콘텐츠를 색인화하고 업데이트하는 것은 서버에서 렌더링 된 HTML 문서보다 시간이 더 걸립니다. 이것은 검색 엔진 크롤러가 페이지 인덱싱을 처음 시도할 때 인터페이스가 완전히 렌더링될 때까지 기다리지 않기 때문에 우리가 논의한 성능 단점과 관련이 있습니다. 순수한 클라이언트 측 렌더링을 사용하면 콘텐츠가 검색 결과 페이지에 표시되고 업데이트되는 데 더 많은 시간이 걸립니다.

Universal rendering

브라우저가 범용(클라이언트 측 + 서버 측) 렌더링이 활성화된 URL을 요청하면 서버는 완전히 렌더링된 HTML 페이지를 브라우저에 반환합니다. 페이지가 미리 생성되어 캐시되거나 즉석에서 렌더링되는지 여부에 관계없이 Nuxt는 서버 환경에서 JavaScript(Vue.js) 코드를 실행하여 HTML 문서를 생성한 적이 있습니다. 사용자는 클라이언트 측 렌더링과 달리 애플리케이션의 콘텐츠를 즉시 얻습니다.

HTML 문서가 다운로드되면 백그라운드에서 서버에서 실행되는 자바스크립트 코드를 로드합니다. 브라우저는 그것을 다시 해석하고(따라서 유니버설 렌더링) Vue.js는 문서를 제어하고 상호 작용을 활성화합니다. 브라우저에서 정적 페이지를 대화형으로 만드는 것을 "Hydration"라고 합니다.

장점

Performance: 브라우저는 JavaScript 생성 콘텐츠보다 훨씬 빠르게 정적 콘텐츠를 표시할 수 있으므로 사용자는 페이지 콘텐츠에 즉시 액세스 할 수 있습니다. 동시에 Nuxt는 수화 프로세스가 발생할 때 웹 애플리케이션의 상호 작용을 유지합니다.
Search Engine Optimization: 범용 렌더링은 페이지의 전체 HTML 콘텐츠를 브라우저에 클래식 서버 응용 프로그램으로 제공합니다. 웹 크롤러는 페이지의 콘텐츠를 직접 인덱싱할 수 있으므로 유니버설 렌더링은 빠르게 인덱싱 하려는 콘텐츠에 대해 탁월한 선택입니다.

단점

Development constraints: 서버 및 브라우저 환경은 동일한 API를 제공하지 않으며, 양쪽에서 원활하게 실행할 수 있는 코드를 작성하는 것이 까다로울 수 있습니다. 다행히 Nuxt는 코드가 실행되는 위치를 결정하는 데 도움이 되는 지침과 특정 변수를 제공합니다.
Cost: 즉석에서 페이지를 렌더링 하려면 서버를 실행해야 합니다. 이것은 기존 서버와 마찬가지로 월별 비용을 추가합니다. 그러나 브라우저가 클라이언트 측 탐색을 대신하는 범용 렌더링 덕분에 서버 호출이 크게 줄어듭니다.

요약

클라이언트 측 렌더링과 범용 렌더링은 브라우저에 인터페이스를 표시하는 다른 전략입니다.

기본적으로 Nuxt는 범용 렌더링을 사용하여 더 나은 사용자 경험과 성능을 제공하고 검색 엔진 인덱싱을 최적화하지만 한 줄의 구성에서 렌더링 모드를 전환할 수 있습니다.

출처

- https://v3.nuxtjs.org/

- https://nuxtjs.org/