[javascript] Webpack으로 라우팅 및 네비게이션 처리하기

29 Nov 2023

javascript

웹 애플리케이션을 개발할 때, 라우팅 및 네비게이션 처리는 매우 중요한 부분입니다. 이를 효과적으로 처리하기 위해 Webpack을 사용할 수 있습니다. Webpack은 모듈 번들러로서 JavaScript, CSS, 이미지 등 여러 종류의 파일을 하나의 번들 파일로 묶어줍니다. 이번 예제에서는 Webpack을 사용하여 라우팅 및 네비게이션 기능을 구현해보겠습니다.

설치하기

먼저, Webpack과 관련된 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하세요:

npm install webpack webpack-cli --save-dev

라우팅 및 네비게이션을 구현하기 위해 다음 패키지들도 설치해야 합니다:

npm install react-router-dom --save
npm install history --save

설정하기

Webpack 설정 파일(webpack.config.js)을 생성하고 다음과 같이 작성하세요:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true
  }
};

여기서는 Babel과 CSS 로더를 사용하여 JavaScript 및 CSS 파일을 번들링하고, 파일 로더를 사용하여 이미지 파일도 처리하도록 설정하였습니다.

라우팅 및 네비게이션 구현하기

이제 라우팅 및 네비게이션을 구현해보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

위 코드에서는 react-router-dom 패키지를 사용하여 라우팅 및 네비게이션 기능을 구현하였습니다. 홈, 어바웃, 연락처 페이지에 대한 경로를 설정하고 각 페이지를 컴포넌트로 렌더링하도록 코드를 작성했습니다.

실행하기

이제 번들링 및 라우팅 및 네비게이션 기능을 확인해보겠습니다. 프로젝트 디렉토리에서 다음 명령어를 실행하세요:

npm run build
npm start

웹 브라우저에서 http://localhost:8080에 접속하면 라우팅 및 네비게이션 기능이 작동하는 웹 애플리케이션을 볼 수 있습니다.

결론

Webpack을 사용하여 라우팅 및 네비게이션 기능을 구현하는 방법을 알아봤습니다. Webpack은 많은 기능들을 제공하므로, 더욱 복잡한 웹 애플리케이션을 개발할 때 유용하게 사용할 수 있습니다. 이를 통해 사용자들은 웹 애플리케이션을 손쉽게 네비게이션하고, 원하는 페이지로 이동할 수 있습니다.