Vue.js 개발

Nuxt는 Nuxt 사용자들을 위해 새로운 패턴을 가능하게 하는 Vue 3, 즉 Vue의 새로운 주요 릴리스를 통합합니다.

Nuxt는 항상 프론트엔드 프레임워크로 Vue를 사용해왔습니다.

Nuxt를 Vue 위에 구축하기로 선택한 이유는 다음과 같습니다:

• 데이터의 변화가 자동으로 인터페이스의 변화를 유발하는 Vue의 반응성 모델.
• HTML을 웹의 공통 언어로 유지하면서도, 컴포넌트 기반 템플릿을 통해 직관적인 패턴으로 일관성 있고 강력한 인터페이스를 유지할 수 있습니다.
• 작은 프로젝트부터 대규모 웹 애플리케이션까지, Vue는 확장성 있는 성능을 유지하여 애플리케이션이 사용자에게 지속적으로 가치를 제공할 수 있도록 합니다.

Nuxt에서의 Vue

싱글 파일 컴포넌트

Vue의 싱글 파일 컴포넌트 (SFC 또는 *.vue 파일)은 Vue 컴포넌트의 마크업(<template>), 로직(<script>), 스타일링(<style>)을 캡슐화합니다. Nuxt는 핫 모듈 교체를 통해 SFC에 대해 제로 설정 경험을 제공하여 매끄러운 개발자 경험을 제공합니다.

자동 임포트

Nuxt 프로젝트의 components/ 디렉토리에서 생성된 모든 Vue 컴포넌트는 별도의 임포트 없이 프로젝트 내에서 사용할 수 있습니다. 만약 어떤 컴포넌트가 어디에서도 사용되지 않는다면, 프로덕션 코드에는 포함되지 않습니다.

Vue 라우터

대부분의 애플리케이션은 여러 페이지와 그 사이를 이동할 수 있는 방법이 필요합니다. 이를 라우팅이라고 합니다. Nuxt는 pages/ 디렉토리와 네이밍 규칙을 사용하여 공식 Vue Router 라이브러리를 통해 파일에 매핑된 라우트를 직접 생성합니다.

Nuxt 2 / Vue 2와의 차이점

Nuxt 3+는 Vue 3를 기반으로 합니다. 새로운 주요 Vue 버전은 Nuxt가 활용할 수 있는 여러 변화를 도입합니다:

• 더 나은 성능
• 컴포지션 API
• 타입스크립트 지원

더 빠른 렌더링

Vue의 가상 DOM(VDOM)은 처음부터 다시 작성되어 더 나은 렌더링 성능을 제공합니다. 게다가, 컴파일된 싱글 파일 컴포넌트와 함께 작업할 때 Vue 컴파일러는 정적 마크업과 동적 마크업을 빌드 타임에 분리하여 추가로 최적화할 수 있습니다.

이로 인해 첫 렌더링(컴포넌트 생성)과 업데이트가 더 빨라지고, 메모리 사용량도 줄어듭니다. Nuxt 3에서는 서버 사이드 렌더링도 더 빨라집니다.

더 작은 번들

Vue 3와 Nuxt 3에서는 번들 크기 감소에 중점을 두었습니다. 3버전부터는 템플릿 지시자와 내장 컴포넌트를 포함한 대부분의 Vue 기능이 트리 셰이킹이 가능합니다. 사용하지 않는다면 프로덕션 번들에 포함되지 않습니다.

이렇게 하면 최소한의 Vue 3 애플리케이션은 gzipped 기준 12kb까지 줄일 수 있습니다.

컴포지션 API

Vue 2에서 컴포넌트에 데이터와 로직을 제공하는 유일한 방법은 Options API를 사용하는 것이었습니다. Options API는 data와 methods와 같은 미리 정의된 속성을 통해 데이터와 메서드를 템플릿에 반환할 수 있게 해줍니다:

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

Vue 3에서 도입된 컴포지션 API는 Options API를 대체하는 것이 아니라, 애플리케이션 전반에 걸쳐 더 나은 로직 재사용을 가능하게 하며, 복잡한 컴포넌트에서 관심사별로 코드를 그룹화하는 더 자연스러운 방법을 제공합니다.

<script> 정의에서 setup 키워드와 함께 사용하면, 위의 컴포넌트를 컴포지션 API와 Nuxt 3의 자동 임포트된 반응성 API로 다음과 같이 다시 작성할 수 있습니다:

<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Nuxt의 목표는 컴포지션 API를 중심으로 훌륭한 개발자 경험을 제공하는 것입니다.

• Vue의 자동 임포트된 반응성 함수와 Nuxt의 내장 컴포저블을 사용하세요.
• composables/ 디렉토리에 자동 임포트되는 재사용 가능한 함수를 직접 작성할 수 있습니다.

타입스크립트 지원

Vue 3와 Nuxt 3+는 모두 타입스크립트로 작성되었습니다. 완전히 타입이 지정된 코드베이스는 실수를 방지하고 API 사용법을 문서화합니다. 이를 활용하기 위해 반드시 애플리케이션을 타입스크립트로 작성해야 하는 것은 아닙니다. Nuxt 3에서는 파일 확장자를 .js에서 .ts로 변경하거나, 컴포넌트에 <script setup lang="ts">를 추가하여 선택적으로 사용할 수 있습니다.