Vue.js 를 배워보자

Nuxt.js에서 TypeScript 사용하기: .ts 파일의 모든 것

_Blue_Sky_ 2024. 12. 12. 19:32
728x90
728x90

 

Nuxt.js에서 TypeScript를 사용하면 더욱 안전하고 효율적인 개발이 가능합니다. .ts 파일을 활용하여 정적 타입 검사, 코드 자동 완성, 재사용 가능한 유틸리티 함수 생성 등 다양한 기능을 활용할 수 있습니다. 특히, Nuxt.js의 파일 시스템 기반 라우팅과의 원활한 통합을 통해 개발 생산성을 높일 수 있습니다.

Nuxt.js에서 .ts 파일은 TypeScript로 작성된 파일을 의미합니다. TypeScript는 JavaScript의 상위 언어로, 정적 타입 검사와 향상된 개발 경험을 제공합니다. Nuxt.js는 JavaScript로 작성된 프레임워크지만, TypeScript를 공식적으로 지원하며 .ts 파일을 사용하면 다음과 같은 장점이 있습니다:

1. 정적 타입 검사

  • TypeScript를 사용하면 변수, 함수, 객체 등의 타입을 정의할 수 있어 컴파일 시점에 오류를 감지할 수 있습니다.
  • 이는 런타임 오류를 줄이고 안정적인 코드를 작성하는 데 도움을 줍니다.

2. 향상된 개발자 경험

  • TypeScript는 코드 자동 완성(IntelliSense), 타입 정의 및 API 문서화를 통해 코드 품질과 생산성을 높여줍니다.
  • IDE에서 코드 작성 중 실수를 쉽게 잡아낼 수 있습니다.

3. Nuxt.js와의 통합

  • Nuxt.js는 TypeScript를 지원하기 위해 @nuxt/typescript 패키지를 제공합니다. 이를 통해 .ts 파일을 Nuxt 프로젝트 내에서 사용할 수 있습니다.
  • nuxt.config.ts와 같은 설정 파일도 TypeScript로 작성할 수 있습니다.

4. Nuxt의 파일 시스템 기반 라우팅

  • Nuxt.js에서 페이지, 컴포넌트, 스토어 등을 정의할 때 TypeScript로 작성된 .ts 파일을 사용할 수 있습니다.
  • 예를 들어 pages/index.ts로 작성하면 Nuxt의 파일 기반 라우팅 시스템과 동일하게 동작합니다.

5. 예제: TypeScript 활용

다음은 Nuxt.js에서 TypeScript를 사용하는 간단한 예제입니다.

Vue 컴포넌트 (pages/index.vue)

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello TypeScript!',
    };
  },
});
</script>
<template>
  <div>{{ message }}</div>
</template>

TypeScript 모듈 (utils/helper.ts)

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Nuxt 설정 파일 (nuxt.config.ts)

import { defineNuxtConfig } from 'nuxt';

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

6. 설치 및 설정

Nuxt.js에서 TypeScript를 사용하려면 다음과 같은 기본 설정이 필요합니다:

  1. TypeScript 관련 패키지 설치: 
    npm install --save-dev @nuxt/typescript @nuxt/types
  2. tsconfig.json 파일 생성: 
    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true
  }
}

이처럼 .ts 파일은 Nuxt.js에서 TypeScript의 기능을 활용해 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다.

728x90

utils/helper.ts 파일에 작성된 함수나 유틸리티는 프로젝트 내에서 다양한 컴포넌트나 페이지에서 재사용할 수 있는 코드 조각을 모아놓은 것입니다. 작성된 helper.ts의 함수는 import 문을 사용하여 필요할 때 호출할 수 있습니다.

다음은 helper.ts 파일에 있는 greet 함수를 사용하는 방법에 대한 예제입니다.

1. helper.ts 파일

먼저 utils/helper.ts 파일에 작성된 함수는 이렇게 생겼다고 가정합니다:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

2. 컴포넌트에서 사용하기

Nuxt.js의 컴포넌트나 페이지에서 이 함수를 가져와 사용할 수 있습니다.

예제: pages/index.vue

<script lang="ts">
import { defineComponent } from 'vue';
import { greet } from '~/utils/helper'; // helper.ts에서 greet 함수 가져오기

export default defineComponent({
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    this.message = greet('Nuxt User'); // greet 함수 호출
  },
});
</script>

<template>
  <div>{{ message }}</div>
</template>

실행 결과:
페이지에 접속하면 화면에 Hello, Nuxt User!라는 메시지가 표시됩니다.

3. 스토어에서 사용하기

Vuex 스토어 모듈에서도 helper.ts의 함수를 가져와 사용할 수 있습니다.

예제: store/index.ts

import { greet } from '~/utils/helper';

export const state = () => ({
  welcomeMessage: '',
});

export const mutations = {
  setWelcomeMessage(state: any, name: string) {
    state.welcomeMessage = greet(name); // helper 함수 사용
  },
};

export const actions = {
  initializeWelcomeMessage({ commit }: any) {
    commit('setWelcomeMessage', 'Nuxt User');
  },
};

4. 서버 사이드에서 사용하기

Nuxt의 server/api 디렉토리에서 서버 사이드 로직에서도 동일하게 helper.ts를 가져와 사용할 수 있습니다.

예제: server/api/greet.ts

import { greet } from '~/utils/helper';

export default defineEventHandler((event) => {
  const query = getQuery(event);
  const name = query.name || 'Guest';

  return {
    message: greet(String(name)), // helper 함수로 메시지 생성
  };
});

5. 테스트에서 사용하기

TypeScript로 작성된 유틸리티 함수는 테스트 코드에서도 유용하게 사용할 수 있습니다.

예제: tests/helper.spec.ts

import { greet } from '~/utils/helper';

describe('greet function', () => {
  it('should return a greeting message', () => {
    const message = greet('Tester');
    expect(message).toBe('Hello, Tester!');
  });
});

핵심 요약

  1. utils/helper.ts 파일은 공통 함수를 정의하는 곳입니다.
  2. 프로젝트에서 반복되는 로직을 재사용할 때 사용됩니다.
  3. import 문으로 가져와 필요한 컴포넌트, 페이지, 또는 서버 로직에서 호출합니다.

이렇게 하면 코드를 깔끔하게 유지하고, 반복되는 코드를 줄여 유지보수성을 높일 수 있습니다.

728x90

.vue 파일과 .ts 파일의 차이는 주로 용도와 구조에 있습니다. Nuxt.js 프로젝트에서 두 파일은 서로 다른 역할을 하며, 협력하여 동작합니다. 주요 차이점을 아래에 정리해 보았습니다.

1. 파일의 목적

.vue 파일 .ts 파일

Vue 컴포넌트 파일로, UI(화면)와 관련된 코드 작성에 사용됩니다. TypeScript 파일로, 주로 비즈니스 로직이나 공통 유틸리티를 처리하는 데 사용됩니다.
HTML, CSS, JavaScript(또는 TypeScript)를 포함하여 사용자 인터페이스(UI)를 정의합니다. 독립적인 함수, 클래스, 타입 정의 등을 작성하며 화면과 직접적으로 연결되지 않습니다.
주로 pages, components, layouts 디렉토리에서 사용됩니다. 주로 utils, plugins, store 등 비즈니스 로직 디렉토리에서 사용됩니다.

2. 구조

 

.vue 파일 .ts 파일
Vue의 SFC(Single File Component) 형태를 따릅니다. HTML(<template>), CSS(<style>), JS/TS(<script>) 블록을 포함합니다. 순수 TypeScript 코드로 이루어져 있습니다. HTML, CSS와 같은 UI 관련 요소는 포함하지 않습니다. 
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>
``` | 예제:  
```ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

3. 주요 사용 사례

 

.vue 파일 .ts 파일
UI 및 인터페이스 구현: 사용자와 상호작용하는 컴포넌트를 만듭니다. 재사용 가능한 코드 작성: 계산, 데이터 변환, API 호출과 같은 공통 로직을 구현합니다.
  • 페이지: pages/index.vue
  • 헤더 컴포넌트: components/Header.vue
  • 레이아웃 정의: layouts/default.vue | 예시:
  • 유틸리티 함수: utils/helper.ts
  • 타입 정의: types/user.ts
  • API 클라이언트: services/api.ts |

4. UI와의 관계

  • .vue 파일은 직접적으로 UI를 정의하고, 화면에서 보이는 콘텐츠를 렌더링합니다.
  • .ts 파일은 UI와 간접적으로 연결되며, .vue 파일에서 필요한 로직이나 데이터를 제공하는 역할을 합니다.

예제: .vue와 .ts의 협력

  • utils/helper.ts
  • export function formatDate(date: string): string { const options = { year: 'numeric', month: 'long', day: 'numeric' }; return new Date(date).toLocaleDateString(undefined, options); }
  • pages/index.vue
  • <template> <div> <p>Today's date: {{ formattedDate }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { formatDate } from '~/utils/helper'; export default defineComponent({ data() { return { today: '2024-12-12', formattedDate: '', }; }, mounted() { this.formattedDate = formatDate(this.today); // helper.ts 사용 }, }); </script>

5. 결론

.vue 파일 .ts 파일
UI 중심적입니다. 화면에 표시되는 내용과 스타일을 정의합니다. 로직 중심적입니다. 반복적으로 사용되는 함수, 데이터 처리 로직 등을 정의합니다.
HTML/CSS와 결합된 JavaScript/TypeScript 코드입니다. 독립적인 TypeScript 코드로 구성되어 있으며 UI와는 분리되어 있습니다.

.vue와 .ts는 역할이 명확히 나뉘어져 있지만, 서로 협력하여 유지보수성과 재사용성을 높입니다. .vue 파일은 화면(UI)을 다루고, .ts 파일은 화면과 독립적인 로직을 처리하는 데 적합합니다.

 

 

TypeScript 파일(.ts)은 Nuxt.js뿐만 아니라 일반 Vue.js 프로젝트에서도 사용할 수 있습니다. Vue.js 자체가 TypeScript를 공식적으로 지원하기 때문에, 일반 Vue 프로젝트에서도 .ts 파일을 활용하여 비즈니스 로직, 유틸리티 함수, 타입 정의 등을 작성할 수 있습니다.

다만, Nuxt.js는 TypeScript 설정과 통합이 더 간단하게 되어 있어서 시작하기 편리하다는 점이 차이점일 뿐입니다. 일반 Vue.js에서도 TypeScript를 사용하는 방법을 설정하면 .ts 파일을 자유롭게 활용할 수 있습니다.

Vue.js에서 .ts 파일을 사용하는 방법

1. Vue 프로젝트에 TypeScript 설정하기

TypeScript를 사용하려면 Vue CLI를 통해 프로젝트를 생성할 때 TypeScript 옵션을 활성화하거나, 기존 프로젝트에 TypeScript를 추가로 설정해야 합니다.

(1) 새 프로젝트 생성 시 TypeScript 활성화

vue create my-project
  • 위 명령을 실행한 뒤, 프로젝트 생성 과정에서 TypeScript를 선택합니다.

(2) 기존 프로젝트에 TypeScript 추가

vue add typescript
  • 이 명령어를 실행하면 Vue 프로젝트에 TypeScript 관련 설정이 자동으로 추가됩니다.

2. .ts 파일 작성 및 사용하기

TypeScript로 작성된 .ts 파일은 일반 Vue 프로젝트에서도 활용할 수 있습니다.

(1) utils/helper.ts 파일 작성

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

(2) Vue 컴포넌트에서 사용

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { greet } from '@/utils/helper';

export default defineComponent({
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    this.message = greet('Vue User');
  },
});
</script>

3. Vue 프로젝트에서 TypeScript의 주요 용도

  • 유틸리티 함수: 공통으로 사용하는 함수들을 .ts 파일로 관리.
  • 타입 정의: API 응답 데이터, Vuex 상태, Props 등을 위한 타입을 정의.
  • 비즈니스 로직: 복잡한 계산이나 데이터 처리를 위한 로직을 별도 .ts 파일로 분리.

Nuxt.js와 Vue.js의 차이

Nuxt.js는 Vue.js 기반의 프레임워크로서 파일 기반 라우팅과 같은 편리한 기능을 제공하지만, TypeScript 사용 자체는 Vue.js에서도 동일하게 가능합니다. Nuxt.js에서 더 편리하게 느껴지는 이유는 다음과 같은 기본 설정 덕분입니다:

  1. Nuxt의 기본 TypeScript 설정: Nuxt 프로젝트 생성 시 TypeScript가 기본적으로 포함될 수 있습니다.
  2. nuxt.config.ts: Nuxt.js는 TypeScript로 작성된 설정 파일을 바로 인식합니다.
  3. 파일 구조 통합: Nuxt는 pages, store, plugins 등의 구조에서 TypeScript 파일 사용이 자연스럽게 녹아 있습니다.

일반 Vue.js와 Nuxt.js에서 TypeScript의 차이점

 

특징 Vue.js Nuxt.js
시작하기 별도로 TypeScript를 설정해야 함. 기본적으로 TypeScript 지원(설정 간소화).
라우팅 수동으로 설정해야 함. 파일 기반 라우팅 제공.
구조 및 통합 자유로운 구조 가능. 프로젝트 구조가 정해져 있어 관리가 편리.
TypeScript 설정 세부적으로 설정 가능(추가적인 설정 필요). Nuxt CLI로 간단히 통합 설정 가능.

결론적으로 Vue.js에서도 TypeScript와 .ts 파일을 사용할 수 있으며, Nuxt.js에서 사용하는 방식과 크게 다르지 않습니다. Vue.js 프로젝트에서 TypeScript를 사용하고 싶다면 설정만 추가하면 됩니다.

728x90
728x90

'Vue.js 를 배워보자' 카테고리의 다른 글

Nuxt에서 포트 고정값으로 설정하기  (0) 2024.12.12
Nuxt.js 프로젝트 생성  (0) 2024.12.12
Nuxt.js가 설치되었는지 확인  (1) 2024.12.11
외부 접근시 Invalid Host header 오류 해결 가이드  (0) 2024.12.11
Vue.js 애플리케이션 포트 설정: 유연하고 효율적인 개발 환경 구축 가이드  (0) 2024.12.10

'Vue.js 를 배워보자'의 다른글

  • 현재글Nuxt.js에서 TypeScript 사용하기: .ts 파일의 모든 것

관련글

티스토리툴바