라우터와 라우팅

1️⃣ 라우터

👉 네트워크에서 트래픽 경로를 지정하거나 "라우팅"하는 장치이다. 간단히 말하면, 라우터는 우리가 인터넷을 연결할 수 있게 해주는 장치이다. 홈 네트워크, 회사 네트워크, 그리고 인터넷 서비스 제공업체 (ISP)들은 이들 라우터를 사용하여 사용자와 인터넷 사이의 연결을 관리한다. 

 

2️⃣ 라우팅

👉 라우팅은 데이터 패킷이 네트워크의 한 부분에서 다른 부분으로 어떻게 이동할지 결정하는 프로세스이다. 이는 라우터가 패킷의 목적지 주소를 보고 패킷이 어디로 전송되어야 하는지 결정하는 것을 포함한다. 라우팅은 네트워크에서 매우 중요한 역하을 하며, 이를 통해 데이터는 원하는 목적지로 정확하고 효율적으로 전송된다. 

 

예를 들어, 내가 웹 브라우저에서 어떤 웹사이트를 방문하려고 할 때 URL을 입력하면, 내 컴퓨터에서 해당 웹사이트의 서버에 정보를 요청하는 패킷을 보낸다. 이 패킷은 내 홈 네트워크의 라우터로 전송되며, 라우터는 인터넷을 통해 해당 패킷을 올바른 서버로 라우팅한다. 이런식으로 라우터와 라우팅 프로세스는 우리가 원하는 정보에 접근할 수 있게 해준다. 

 

▶️ Vue.js 사용 예시

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

▶️ React.js 사용 예시

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;