[typescript] 웹팩으로 타입스크립트와 웹앱 매니페스트 연동하기

11 Dec 2023

typescript

웹 애플리케이션을 개발할 때, 타입스크립트 및 웹앱 매니페스트를 사용하여 성능을 향상시킬 수 있습니다. 이번 글에서는 웹팩을 사용하여 타입스크립트 파일을 번들링하고, 웹앱 매니페스트와 연동하는 방법에 대해 알아보겠습니다.

웹팩 설정

먼저, 타입스크립트 파일을 웹팩으로 번들링하기 위해 다음과 같이 웹팩 설정 파일(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', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

위의 예제에서는, entry로 타입스크립트 파일을 지정하고, output으로 번들링된 파일의 경로와 이름을 설정합니다. 또한, resolve에서 타입스크립트 파일 확장자를 지정하고, module에서는 ts-loader를 사용하여 타입스크립트 파일을 로드하도록 설정합니다.

웹앱 매니페스트

웹앱 매니페스트를 생성하고 연동하기 위해서는 manifest.json 파일을 프로젝트에 추가해야 합니다. 이 파일은 웹앱의 정보를 정의하고 오프라인 상태에서도 앱을 실행할 수 있도록 돕는데 사용됩니다.

{
  "name": "My Web App",
  "short_name": "WebApp",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

위의 예제에서는 기본적인 웹앱 매니페스트 정보를 정의하였습니다.

연동

타입스크립트 번들링된 파일과 함께 index.html에 웹앱 매니페스트를 연동하여 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="manifest" href="manifest.json">
  <title>My Web App</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

위의 예제에서는, link 태그를 사용하여 웹앱 매니페스트를 연동하고, 번들링된 타입스크립트 파일은 script 태그를 통해 로드하였습니다.

이제, 웹앱 매니페스트와 타입스크립트 파일이 성공적으로 연동되었습니다. 웹 앱의 성능을 향상시키고 오프라인 상태에서도 더 나은 사용자 경험을 제공할 수 있게 되었습니다.

참고 자료: 웹앱 매니페스트 - MDN Web Docs

개발자 김영호
2022년 8월 15일
번역 및 작성