[typescript] 타입스크립트와 웹팩의 기초 이해

11 Dec 2023

typescript

타입스크립트(TypeScript)와 웹팩(Webpack)은 현대 웹 개발에서 매우 중요한 역할을 합니다. 이번 글에서는 각각의 기초적인 개념과 기능을 살펴보고, 두 기술을 함께 사용하는 방법에 대해 알아보겠습니다.

타입스크립트(TypeScript)

타입스크립트란?

타입스크립트는 자바스크립트의 확장으로, 정적 타입을 지원하는 언어입니다. 이는 개발자가 변수, 매개변수, 함수 등에 명시적인 타입을 지정할 수 있게 해줍니다. 이것은 코드의 가독성을 향상시키고, 오류를 미리 찾아내어 안전성을 보장해 줍니다.

타입스크립트의 기본 구조

// 예시: 타입스크립트의 기본 구조
function greet(name: string) {
  return "Hello, " + name;
}

let username: string = "John";
console.log(greet(username));

타입스크립트의 장점

정적 타입 지원: 개발자는 변수와 함수의 인터페이스를 명확히 정의함으로써 오류를 줄일 수 있습니다.
코드 가독성 향상: 타입스크립트를 사용하면 코드를 이해하고 유지보수하는 데 도움이 됩니다.
코드 완성 기능: IDE(Integrated Development Environment)에서 코드 완성을 지원함으로써 개발 생산성을 높일 수 있습니다.

웹팩(Webpack)

웹팩이란?

웹팩은 모듈 번들러로, 프런트엔드 소스코드(HTML, CSS, JavaScript 등)를 하나의 파일로 묶어줍니다. 이를 통해 소스코드의 의존성 관리와 최적화된 번들을 생성할 수 있습니다.

웹팩의 기본 구조

// 예시: 웹팩의 기본 구조
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

웹팩의 장점

모듈 번들링: 여러 모듈을 하나의 번들로 묶어줌으로써 네트워크 요청 수를 줄이고 빠른 로딩 시간을 보장합니다.
로더와 플러그인: 다양한 소스코드를 번들링하기 위한 로더와 번들링된 결과물을 최적화하기 위한 플러그인을 지원합니다.

타입스크립트와 웹팩 함께 사용하기

타입스크립트와 웹팩을 함께 사용하는 방법은 간단합니다. 먼저 타입스크립트 파일을 작성하고, 해당 파일들을 웹팩을 통해 번들링하여 결과물을 생성합니다.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

위 설정에서 ts-loader는 웹팩에서 타입스크립트 파일을 해석하고 번들링하기 위한 로더입니다.

결론

타입스크립트와 웹팩은 둘 다 현대 웹 개발에서 필수적인 도구입니다. 타입스크립트는 안정적이고 확장 가능한 코드를 작성하는 데 도움을 주며, 웹팩은 모듈화된 소스코드를 효율적으로 번들링해주는데 도움을 줍니다. 두 기술을 함께 사용하여 웹 애플리케이션을 개발한다면, 더욱 효율적이고 견고한 코드를 작성할 수 있을 것입니다.

참고문헌:

https://www.typescriptlang.org/docs/
https://webpack.js.org/concepts/