[javascript] Riot.js와 웹팩의 통합

04 Dec 2023

javascript

Riot.js는 최소한의 문법으로 컴포넌트 기반 개발을 가능하게 해주는 자바스크립트 라이브러리입니다. 웹팩은 모듈 번들러로서 여러 개의 자바스크립트 파일 및 의존성을 하나의 번들로 묶어주는 역할을 합니다. 이번 글에서는 Riot.js와 웹팩을 함께 사용하는 방법을 알아보겠습니다.

Riot.js 설치 및 설정

Riot.js를 사용하기 위해서는 먼저 Riot.js를 프로젝트에 설치해야 합니다. npm을 사용하는 경우, 다음 명령어를 사용하여 Riot.js를 설치할 수 있습니다:

npm install riot

이후 Riot.js 컴포넌트 파일들을 생성하여 사용하면 됩니다. 예를 들어, my-component.riot 파일을 생성하고 다음과 같은 내용을 작성할 수 있습니다:

<my-component>
  <h1>Hello, Riot.js!</h1>

  <script>
    export default {
      // 컴포넌트 로직 작성
    }
  </script>
</my-component>

웹팩 설정

이제 웹팩을 설정하여 Riot.js 컴포넌트 파일들을 묶을 수 있도록 해봅시다. 우선 웹팩과 Riot.js 로더를 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다:

npm install webpack riot-webpack-loader

그리고 웹팩 설정 파일인 webpack.config.js를 프로젝트 루트 경로에 생성하고 다음과 같이 작성해줍니다:

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [{
      test: /\.riot$/,
      exclude: /node_modules/,
      use: [{
        loader: 'riot-webpack-loader',
        options: {
          hot: true  // 개발 환경에서만 hot-reload 기능 사용
        }
      }]
    }]
  },
  resolve: {
    extensions: ['.js', '.riot']
  }
};

위 설정 파일에서 entry와 output은 웹팩이 번들링한 결과물의 입출력 경로를 설정합니다. module 섹션에서는 Riot.js 컴포넌트 파일들을 번들링하기 위해 riot-webpack-loader를 사용하도록 설정합니다. resolve 섹션에서는 웹팩이 Riot.js 컴포넌트 파일들과 자바스크립트 파일들을 인식할 수 있도록 설정합니다.

Riot.js 컴포넌트 사용하기

이제 웹팩으로 Riot.js 컴포넌트 파일들을 번들링하고, 번들링된 결과물을 HTML 파일에 포함시켜 사용해보겠습니다. 먼저 HTML 파일에 다음과 같이 Riot.js 컴포넌트를 사용할 준비를 해줍니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Riot.js with Webpack</title>
</head>
<body>
  <my-component></my-component>
  <script src="bundle.js"></script>
</body>
</html>

위 코드에서 bundle.js는 웹팩으로 번들링된 Riot.js 컴포넌트 파일들을 포함하고 있는 파일입니다. 그리고 사용할 Riot.js 컴포넌트를 <my-component> 태그로 HTML에 추가해줍니다.

개발 서버에서 실행하기

마지막으로, 개발 중에 빠른 수정과 테스트를 위해 웹팩 개발 서버를 실행해봅시다. 개발 서버는 웹팩 설정 파일에서 hot 옵션을 설정했다면, 변경된 내용을 자동으로 적용하여 브라우저에서 바로 확인할 수 있게 합니다. 터미널에서 다음 명령어를 실행하여 개발 서버를 시작하세요:

webpack-dev-server --open

웹팩 개발 서버가 실행되면 브라우저에서 http://localhost:8080으로 접속하여 Riot.js 컴포넌트를 확인할 수 있습니다.

결론

이번 글에서는 Riot.js와 웹팩을 함께 사용하는 방법에 대해 알아보았습니다. Riot.js는 간단한 문법으로 컴포넌트 기반 개발을 가능하게 해주며, 웹팩은 번들링을 통해 여러 개의 Riot.js 컴포넌트를 하나의 번들로 묶어줍니다. 이를 통해 웹 개발을 보다 효율적이고 구조화된 방식으로 진행할 수 있습니다.

참고 자료

Riot.js 공식 웹사이트: https://riot.js.org/
웹팩 공식 웹사이트: https://webpack.js.org/