간단한 아이디어가 생겨서 웹어플리케이션을 만들어보려고 알아보는 중 Spring F/W 와 Backbone.js를 결합한

resthub를 알게되다.

resthub 사이트 : http://resthub.org/

resthub 에서 제공하는 예제 웹어플리케이션을 돌려보겠다.

[기본적으로 필요한 것들]

1. Maven

apache-maven-3.3.3-bin.zip

 > 다운경로 : http://maven.apache.org/download.cgi

2. java

jdk-7u79-windows-x64.exe : 8버전 말고 7버전을 준비한다.

> 다운경로 : http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

3. 이클립스

eclipse-jee-mars-R-win32-x86_64.zip : 저는 최신버전 mars 64bit로 준비했습니다.

> 다운경로 : https://eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/R/eclipse-jee-mars-R-win32-x86_64.zip&mirror_id=105

c. "Next >" 버튼 눌러 완료.

d. 시스템 환경변수 등록 및 수정

JAVA_HOME

C:\PMT\bin\jdk1.7.0_79

Path

마지막에 %JAVA_HOME%\bin\; 추가

3. Maven 설치

a. C:\PMT\bin 에 apache-maven-3.3.3-bin.zip 압축 해제

b. C:\PMT\bin\apache-maven-3.3.3\conf 에 settings.xml 파일 수정

 - localRepository 문자열을 찾으면 중간쯤 주석처리 되어있는 부분을 발견 할 수 있다.

이 부분의 주석 윗부분에 local repository  경로를 잡아준다.

> 로컬 레파지터리를 따로 잡아주지 않으면 주석처리되어 있는 부분에서 확인 할 수 있듯이 Default: ${user.home}/.m2/repository 가 기본 로컬 레파지터리 경로로 잡힙니다.  하지만 우리는 설치를 위한 경로를 C:\PMT\bin 에 잡기로 했으니 로컬레파지터리도 깔끔하게  maven이 설치되어 있는 경로 아래에 잡아주기로 합니다. (이전에 메이븐 압축을 풀어놓은 C:\PMT\bin\apache-maven-3.3.3\ 경로 아래에 repository 디렉터리를 임으로 만들어야 합니다.

c. 시스템 환경변수 설정

 - 시스템 변수 Path 마지막에 %MAVEN_HOME%\bin\; 추가

d. 메이블 설치 확인

cmd 창에서 mvn -version 으로 설치 확인 

>>>>>>>>>>>>>>>>>>>>>>>>>여기까지 환경 셋팅 완료!!!!

4. resthub 예제 웹어플리케이션 포팅

a. cmd 명령 프롬프트 실행.

b. . 웹어플리케이션을 만들 위치로 이동

> cd C:\PMT\workspace

c. 메이블을 통한 프로젝트 배포받고, 빌드

> mvn archetype:generate -Dfilter=org.resthub:

* pom.xml에 있는 jar파일들을 모두 다운받기 때문에 꾀 오랜시간이 걸립니다.

중간 중간 질문에 대한 입력은 아래 참고!!

> 1

>4

groupId : com.myproject  ( 일반적으로 url을 거꾸로 적어놓은 형태로 표시 함.)

artifactId : todo

version : 1.0-SNAPSHOT

package : todo

Y: Y

* artifactId 와 package 명에  - 가 들어갈 경우 아래의

> mvn jetty:run 시 컴파일 오류가 남.

d. 확인 및 디렉토리 이동

C:\PMT\workspace 내에 todo 디렌터리 생긴 것을 확인 할 수 있습니다.

cd C:\PMT\workspace\todo

e. 예제 웹어플리케이션 실행

* 웹서버를 jetty 를 이용함으로 maven을 통해 관련 jar를 로컬레파지터리에 다운을 받음으로 시간이 걸린다.

> mvn jetty:run

f. 웹어플리케이션 구동 확인

http://localhost:8080/ 

>>여기까지 웹 어플리케이션의 구동까지 확인 하였습니다.

5. 이클립스에 프로젝트 import 및 설정

이 소스코드를 이클립스에 프로젝트로 추가하고 실행시킬 수 있는 개발환경을 설정해보겠습니다.

a. 이클립스 압축 해제 

 - C:\PMT\bin\eclipse

b. 이클립스 설정파일 수정.

 - C:\PMT\bin\eclipse 내의 eclipse.ini 파일 수정

최상단에 

-vm

C:/PMT/bin/jdk1.7.0_79/bin/javaw.exe

추가.

c. 이클립스 실행 및 workspace 선택

d.이클립스에 Maven 설정

 상단 Window > Preferences 클릭  --> 좌측 Maven > Installations 에서 add로 maven 추가

 상단 Window > Preferences 클릭  --> 좌측 Maven > User Settings 에서 User Settings 부분 수정

e. tartget 디렉터리 제외

 이 예제 프로젝트는 maven을 이용하고 있기 때문에 빌드 시 target 디렉터리가 생성됩니다.

 추후 이 프로젝트에 svn을 연결하여 버전관리를 할 예정인데 그럴 경우 target 디렉터리의 내용은 svn에 올려 관리할 필요가 없다.

 따라서 이클립스에서 target 디렉터리를 안보이도록 설정한다.

상단 Window > Preferences 클릭  --> 좌측 Team > Ignored Resources 에서 패턴 추가.

f. 프로젝트 import

좌측 Project Explorer 에서 우클릭 > import 선택 > Existing Maven Projects 선택 후 workspace에 todo 프로젝트 추가

g. 실행 환경 셋팅 및 실행

todo 프로젝트 최상위 디렉터리에서 우클릭 > Run As > Run Configurations 선택

좌측 Maven Build 선택 후 우클릭해서 new configuration 생성.

위와 같이 설정 후 Apply 후 run !!!!!!!!!!!!!1

>>>> 이제 이클립스에서 개발하고 실행까지 가능한 환경 끝!!!!!!!!!!!

여기서는 jpa를 이용한 예제를 선택했지만 나머지 3개도 해보고 좋을 것 같습니다.

고생 많으셨습니다. 끝!!!

[부트스트랩]

:트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인

:부트스트랩은 클래스로 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러그인의 라이브러리

- 미리 정의 된 클래스를 이용해 쉽게 웹디자인을 하고 완성도 높은 다양한 UI를 만들 수 있음.

- 미리 정의된 스타일시트를 이용해 HTML/CSS 개발 과정을 단축시킬 수 있음.

- 뛰어난 퀄리티.

- 부트스트랩은 이런 모바일 환경과 반응형웹 제작에 더욱 유리함.

- 많은 테마 존재 함.

참고사이트

- http://bootstrapk.com

- http://bootswatch.com

- http://www.w3schools.com/bootstrap

웹어플리케이션 개발  시  프론트앤드단에서  MVC 패턴을 사용 할 수 있게 해주는 자바스크립트  언어로 만들어진 프레임워크
아래는  backbone.js에 대해서 잘 설명해 놓은 블로그의 글을 가져온 것 입니다.(하단 참조)

Backbone.js #진짜마지막 총정리

• Backbone.js #진짜마지막 총정리
• Introduction
• 실무에서 Backbone.js 를 사용하면서 느낀 장점
• 핵심구절 복습
• 아래 키워드 (메소드/프로퍼티)는 꼭 잊지마세요.
• Backbone.js's Objects Diagram
• 필수로 REST API 를 갖춘 웹서버를 준비하세요.
• Model
• Model idAttribute
• Collection 정의하기
• Model + Collection 정의하기
• Collection 에서 발생하는 이벤트 사용하세요
• Collection 객체는 복잡한 구조를 가진 객체인데, 어떻게 underscore.js 의 each 메소드를 사용하여 model 을 반복자에 전달시킬 수 있는가?
• Collection 을 each 로 반복시켰고, 전달되는 model 을 찍어보면 복잡한 객체인데, 어떻게 JSON.stringify 를 사용하여 Model의 Data를 심플하게 JSON 으로 확인할 수 있는가?
• 서버와 통신시에 wait 옵션을 사용할때도 있어요
• View 객체 작성시 참고하세요.
• Client Template Module 사용하세요.
• HTML 에 기정의된 Element에 View 를 정의하기 위해서는 엘리먼트를 el property 에 정의하셔야 해요.
• View에서 tagName 선언
• View 객체를 생성시에는 Model 을 전달해주세요.
• Anchor Element에 Hash 링크를 선언하여 Route 객체와 연결하세요
• 게시판 Diagram 을 그려서 구조적인 생각을 정립해보세요.
• 고급 into the backbone.js
• Conclusion
• 추천 관련글

IntroductionTop

Backbone.js 연재를 마치면서 가장 중요한 부분들을 정리해드립니다. 핵심적인 내용이니 도움이 되실거라 굳게 밉습니다. ㅎㅎ

실무에서 Backbone.js 를 사용하면서 느낀 장점Top

• 서버와 쉽게쉽게 대화할 수 있다.
• 그리하여 나는 서버와 혼연일체가 될 수 있다.
• 기존에 이렇게 구현하기 위해 Ajax 도배질을 했었다.
• 비동기로 되면서 구조적으로 구현하기 어려웠다.
• 점점 관리가 어려워졌다.
• Backbone.js 가 스파게티 코드를 구조적으로 변경해주었다.
• 고마웠다.
• 역시 이름 그대로 documentcloud 회사 답다.

핵심구절 복습Top

- Backbone.js의 수십개의 메소드를 신경쓰지 마세요.

- underscore.js 수십개의 메소드를 신경쓰지 마세요.

- 단지 별거 아닌 유틸리티에요. !!

- 이것이 Backbone.js를 이해하는데 있어서 가장 큰 함정입니다 :-)

- 우리는 가지를 보는것이 아니라, 전체의 모습을 볼 거에요

아래 키워드 (메소드/프로퍼티)는 꼭 잊지마세요.Top

메뉴얼에 나와있는 나머지 메소드/프로퍼티는 여러분의 눈을 현혹시키기 위한 OTU (Only Tiny Utility)

• Model
  • Model.url
  • Model.urlRoot
  • Model.save()
  • Model.fetch()
  • Model.destroy()
  • Model.sync
  • Model.set
  • Model.add
  • idAttribute: 'id'
• Collection
  • Collection.fetch()
  • Collection.create()
  • bind event 설정
    • add
    • reset
    • all
• View
  • el property
  • events delegation
  • not template
  • use template module
    • Underscore template method
    • Mustache
    • etc..
  • with Model
    • event bind
      • change
      • destroy
  • with Collection
    • event bind
      • add
      • reset
      • all
  • View.remove()
• Route
  • url change event 에 대해서 cross browser 처리
  • hash(#) / hashbang(#!) 링크연결
  • single page architecture

몇개 빠져있을 수도 있어요. ㅋ

Backbone.js's Objects DiagramTop

1. Collection 은 여러개의 Model 을 포함합니다.
2. Model 은 독립적으로 혹은 Collection 의 Reference 로서 동작하고, 서버와 REST Communication 하면서 데이타를 Sync 합니다.
3. 이와 동시에 Collection, Model 은 이벤트를 발생시켜, View와 Communication 하고 비동기적인 서버와의 응답결과를 체계적으로 전달합니다.
4. 마지막으로 Route 는 브라우져에서 변경되는 URL 을 모니터링하여 정의한 URL Spec 에 binding 하여 체계적으로 연결합니다.

필수로 REST API 를 갖춘 웹서버를 준비하세요.Top

물론 준비하지 않아도 backbone.localStorage 으로 테스트가 가능합니다.

• Rails
• Node.js express
• php laravel
• python django

ModelTop

• 1편 POST편
• 2편 PUT편
• 3편 GET편

Model idAttributeTop

Backbone.js 의 가장 큰 컨셉은 서버와 쉽게쉽게 커뮤니케이션 하는 것입니다. 이렇게 하기 위해서는

• 클라이언트에서 생성한 데이타는 서버와 통신 후 PK 를 업데이트하여 Sync
• 서버에 입력되어 있는 데이타를 불러오면 클라이언트에서도 동일하게 구성

위 2가지 조건을 만족해야 하며, 이때 idAttribute property 가 중요한 역할을 하게 됩니다.

기본값은 id 이고, 데이타를 구분하는 primary key 명이 다르다면 변경하세요. 이것은 Model.save() 와 직접적으로 연관되고, insert / update 요청을 구분합니다.

참고로 1편에서 배웠죠. Mongodb의 id 명은 _id 라는것을... 이것 꼭 Model#idAttribute에 정의해야만 된다는 것을요.

var Todo = Backbone.Model.extend({
  idAttribute: '_id'
});

자세한건 1편 POST편을 참조하세요.

Collection 정의하기Top

쉽게 생각하세요. 단지 Model 을 이루는 JSON 객체를 여러개 가지고 있다고요~~~

Collection 을 구성합니다. 별거 없고요. url, model property 만 선언해주세요.

window.TodoList = Backbone.Collection.extend({
  url: '/api/todo',
  model: Todo
});

Collection 구성은 아주 최소한으로 생성한 것입니다. 각각의 컨트롤하고 싶은 메소드는 입맛에 맞게 추가

Model + Collection 정의하기Top

window.TodoList = Backbone.Collection.extend({
  url: '/api/todo',
  model: Todo
});

Collection 선언시 model property 는 지정하지 않아도 model 객체를 참조합니다. 이렇게 지정할 때의 이유는 Model 에 기 정의된 메소드를 사용할 때 입니다.

서버와 통신하기 위한 url / urlRoot 지정은 필수 !! 지정하지 않을때는 url property 지정하지 않았다고 에러발생

Collection 에서 발생하는 이벤트 사용하세요Top

window.AppView = Backbone.View.extend({
  el: $('#todoapp'),
  initialize: function() {
    window.Todos = new TodoList();
    Todos.bind('add', this.addOne, this);
    Todos.bind('reset', this.addAll, this);
    Todos.fetch();
  }
});

Collection 객체를 생성합니다. 해당 Collection에 Model관련 add, reset 이벤트에 대한 trigger를 선언합니다. 그리고, Collection#fetch 메소드를 사용하여 서버로부터 데이타 (read (GET))를 불러옵니다. 이때,Collection reset event 가 발생합니다.

Collection 객체는 복잡한 구조를 가진 객체인데, 어떻게 underscore.js 의each 메소드를 사용하여 model 을 반복자에 전달시킬 수 있는가?Top

이것은 여기에 답이 있습니다.

// Underscore methods that we want to implement on the Collection.
var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
  'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
  'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
  'max', 'min', 'sortedIndex', 'toArray', 'size', 'first', 'head', 'take',
  'initial', 'rest', 'tail', 'last', 'without', 'indexOf', 'shuffle',
  'lastIndexOf', 'isEmpty'];
// Mix in each Underscore method as a proxy to `Collection#models`.
_.each(methods, function(method) {
  Collection.prototype[method] = function() {
    var args = slice.call(arguments);
    args.unshift(this.models);
    return _[method].apply(_, args);
  };
});

Collection은 undersocre.js 함수를 내장하고 있는데, 그대로 사용하지 않고, Collection 객체의 models property를 전달하여 오버라이드 하고 있습니다. 아셨죠? 그래서 each하면 Collection 이 반복되는것이 아니였고, Collection의 models property 가 반복될 수 있는것입니다.

Collection 을 each 로 반복시켰고, 전달되는 model 을 찍어보면 복잡한 객체인데, 어떻게 JSON.stringify 를 사용하여 Model의 Data를 심플하게 JSON 으로 확인할 수 있는가?Top

Backbone.js 의 Model#toJSON 메소드가 정의 되어 있습니다. JSON.stringify 메소드가 전달된 객체에 toJSON 메소드가 정의되어 있으면 그것을 사용 합니다. 즉, 전달된 Model 객체에 toJSON 메소드가 정의되어 있기 때문에 자연스럽게 오버라이드 되어지는 것입니다. 그래서, backbone.js toJSON 에 의해 Model 의 attributes 만 쏙 빠져나오게 됩니다. 아셨죠?

서버와 통신시에 wait 옵션을 사용할때도 있어요Top

Collection#create 메소드를 사용하여 Model을 Collection 에서도 간단히 만들 수 있습니다. 이때, Collection add event 가 발생하게 되는데, underscore template에서 _id` 값이 없으므로 에러를 반환합니다. 무슨 얘기냐면...

wait option

• true: 서버와 통신하여 응답을 받으면 collection add event 발생
• false: 서버와 통신전에 collection add event 발생

즉, Collection#create 메소드에 wait: true 옵션을 전달하여, _id 값이 선언된 Model 이 반환되게 해야합니다. 그러므로, wait 값을 true 으로 선언하여 _id 값이 Model에 설정되게 한 후 화면에 표시하게 합니다.

createTodo: function(e) {
  if (e.keyCode != 13) return;
  Todos.create({ title: $('#new-todo').val() }, { wait: true });
}

View 객체 작성시 참고하세요.Top

• View 객체를 작성된 HTML에 적용하기 위해서는 el property를 필수로 선언해야 합니다. 왜냐하면, View 객체는 기본적으로 events property에 선언한 이벤트가 el property 에 선언된 엘리먼트에 적용되기 때문입니다.
  • 참조: View#events property 에서 지정합니다.
• 목록에 반복되는 게시글은 1개의 View 객체와 1개의 Model 객체로 구성하는것이 구조적으로 다루기에 편합니다.
  • Model 데이타가 변할시
  • Model 데이타가 삭제될 시
  • Model 데이타가 매핑되는 template 에 event delegation 할 시
• 즉, View객체를 생성할 때 Model 객체를 전달합니다.

Client Template Module 사용하세요.Top

script#item-template(type="text/template")
  <td><a href="#<%= _id %>"><%= title %></a> ::: <input type="button" value="del" data-action="del"></td>

HTML을 제발 Javascript 영역으로 가지고 들어오지 마세요

HTML 에 기정의된 Element에 View 를 정의하기 위해서는 엘리먼트를 el property 에 정의하셔야 해요.Top

window.AppView = Backbone.View.extend({
  el: $('#todoapp'),
});

View에서 tagName 선언Top

window.TodoView = Backbone.View.extend({
  tagName: 'tr',
});

기본값은 div 입니다. 반복되는 엘리먼트의 tagName 을 변경할 때는 필수로 선언해주셔야 해요.

TABLE > TBODY 영역에 TR 태그를 넣을때 같이 말이죠.

View 객체를 생성시에는 Model 을 전달해주세요.Top

underscore#bind 함수를 이용하여 Collection event에 대한 trigger를 선언했습니다. 이것이 실행되면 이벤트가 발생한 Collection의 Model이 trigger에 전달됩니다. 위에서 설명한 Todo ItemView 에 Model 을 전달한다고 했습니다. 바로 이 부분입니다. 1개의 ItemView가 1개의 Model을 컨트롤 한다 !!!! 그리하여 todo item view 에서 생성한 tr~ 엘리먼트를 table > tbody에 붙입니다.

  addOne: function(todo) {
    var view = new TodoView({ model: todo });
    $('#todo-list tbody').append(view.render().el);
  },

Anchor Element에 Hash 링크를 선언하여 Route 객체와 연결하세요Top

script#item-template(type="text/template")
  <td><a href="#<%= _id %>"><%= title %></a> ::: <input type="button" value="del" data-action="del"></td>

HTML에 정의한 template 부분에 a element 에 선언한 Hash(#) 링크가 Route 객체와 연결됩니다.

var Workspace = Backbone.Router.extend({
  routes: {
    ":id": "search"
  },
  search: function(id) {
    console.log(arguments);
  }
});
window.Route = new Workspace();
Backbone.history.start();

게시판 Diagram 을 그려서 구조적인 생각을 정립해보세요.Top

아래 그림은 Backbone.js 을 이루는 객체를 어떻게 사용할 것인가에 대한 구체적인 계획을 수립해 줍니다. Backbone.js 에서는 이런것이 중요하다는것을 잊지 마세요

구체적인 내용은 아래와 같습니다.

• View 객체를 어떻게, 어느부분에 사용할 것인가?
• View 객체를 어떻게 구조적으로 Model 객체 과 연관시킬 것인가?
• Model 객체를 어떻게 구성하여 View 객체 와 연동하고 이벤트를 제어할 것인가?
• Collection 객체 영역을 알아보고, 전체 View 객체 와 어떻게 연동할 것인가?

실무 경험상 막상 Backbone.js를 이루는 Model, Collection, View 를 구조적으로 사용할려고 하면 막연한 공상만 떠올르게 됩니다. 저는 머리가 그리 좋지 않아요 :-) 위와 같이 그림을 그리고 구상해보면 조금이나마 Model, Collection, View 사용계획이 정립되어 진다는 것을 알려드리고 싶습니다.

고급 into the backbone.jsTop

• 이곳 에서는 Backbone.sync 수행되고 나서 Backend 로부터 반환된 데이타를 Model.set 에 전달하는 것을 확인할 수 있습니다.-
• Model.set 은 기존 Model 데이타와 비교 를 하여 이를 동기화 시킵니다.
• 이곳 에서는 Model.set 수행될 때, id attribute를 검사하는 것을 확인할 수 있습니다.
• 이곳 에서는 Model.save 수행 시 Backbone.sync에 POST와 PUT중에 어떤 method 를 전달할지 정하는 프로세스를 확인할 수 있습니다.
• 이때 필요한 idAttribute를 확인하는 아주 아주 중요한 isNew 함수 확인하시고요. :-)
• 이곳 에서는 Model.fetch 수행 시 Backbone.sync에 read (GET) 프로세스를 확인할 수 있습니다.
• 이곳 에서는 urlRoot 를 Model 에 설정하면, 3편에서 url 을 함수로 지정하여 구분설정하지 않아도, 자동으로 새로운 데이타여부(id 유무)를 판단하여 url 에 id 가 붙게 되는것을 확인할 수 있습니다.

ConclusionTop

휴, 진짜 끝입니다. 누락된 부분이 있다면 총정리 2편이 나올 수도 있습니다. ;; 읽어주셔서 감사합니다.

추천 관련글Top

<라우터란?>

라우터(Router)는 이름 그대로 네트워크와 네트워크 간의 경로(Route)를 설정하고 가장 빠른 길로 트래픽을 이끌어주는 네트워크 장비다. 우리말로 풀어보면 '경로설정기'라고 할 수 있을 것이다. 
인터넷, 다시 말해 IP 네트워크가 모든 네트워크의 기본이 되면서 라우터는 네트워크의 가장 핵심 장비로 등극했다. 인터넷이 확산되기 이전에는 사실 네트워크 자체가 확산되지 않은 상태이긴 했지만, 우리보다 네트워크의 역사가 오래된 해외의 경우를 보더라도, 과거 기업 단위 LAN 환경의 핵심은 스위치였다. 네트워크 내를 흐르는 트래픽의 대부분이 내부 LAN에서만 움직였기 때문에 스위치를 넘어 데이터가 전달되는 비중이 많지 않았기 때문이다. 내부 LAN 밖으로 데이터가 나가는 경우는 본사와 지사를 연결하는 전용회선을 통하는 경우가 전부였다. 
하지만 인터넷 기반의 네트워크 환경에서는 어떤 형식으로든 네트워크가 외부의 다른 네트워크와 연결돼야 하고, 이를 위해서는 서로 다른 네트워크 간을 연결하는 장비인 라우터의 비중이 높아질 수 밖에 없게 된 것이다. 물론 라우터가 IP 네트워크 만을 위한 장비는 아니지만, 여기서는 최근의 네트워크 환경과 이해의 편의를 위해 인터넷 환경에 한정해 살펴보겠다.


<라우터는 인터네트워킹 장비다>

인터넷에 연결된 개별 네트워크의 수는 이루 헤아릴 수 없이 많은 것이 사실이다. 인터넷의 어원이 인터네트워크(internetwork)에 있듯이, 라우터는 이렇게 서로 연결된 네트워크(internetwork) 간의 경로(Route)를 설정해주는 장비다. 라우터가 '경로'에 비중을 둔 이름을 갖게 된 것도 이렇게 수없이 연결된 네트워크 간을 어떻게 연결하는 것이, 다시 말해 어떤 경로로 연결하는 것이 가장 효율적인가를 알려주는 길잡이 역할이 중요하기 때문이다. 
라우터의 이런 인터네트워킹 기능은 OSI 참조모델로 살펴보면 훨씬 명확하게 이해할 수 있다. 허브나 스위치가 OSI 참조모델 2계층, 데이터 링크 계층에 속하는 반면, 라우터는 3계층, 즉 네트워크 계층에 해당하는 장비이다. 잘 알려진 대로 네트워크 계층은 여러 개의 독립적인 네트워크 간에 데이터를 전송하는 것에 관한 계층이다. 
허브나 스위치가 속해 있는 데이터링크 계층의 데이터 전송은 물리적인 장치의 주소 지정에 의해 단일 네트워크로 연결된 모든 장치에 데이터를 브로드캐스팅하며, 수신측 장비에서 확인해 자신에게 오는 데이터를 수신받는 방식이다. 이런 방식은 일정한 범위와 크기의 내부 LAN에서는 가능하지만, 네트워크의 규모가 일정 크기를 넘어서면 매우 비효율적인, 그리고 현실적으로 운영할 수 없는 네트워크가 되고 만다. 광대한 인터넷을 향해 브로드캐스팅을 한다는 것은 누가 생각해도 합리적이지 못한 방법이다.
그러나 네트워크 계층의 장비인 라우터는 여러 개의 네트워크가 연결된 환경에서 특정 경로를 선택해 데이터가 전송되도록 한다. 이는 목적지로 데이터를 전송하면서 목적지가 아닌 네트워크에 데이터가 전송되는 것을 방지할 수 있다. 여기서 특정 경로란 다양한 라우팅 알고리즘을 통한 최적의 경로를 말한다.

<라우터는 컴퓨터다>

라우터의 기본적인 구성은 일반 컴퓨터와 마찬가지다. 중앙처리 장치인 CPU가 있고, 각종 메모리가 라우터의 운영체제와 환경설정 정보, 그리고 라우팅 정보 등을 담고 있다. 그리고 네트워크 인터페이스를 통해 트래픽을 입출력한다. 때문에 초기에는 소규모 환경에서 값비싼 라우터 장비 대신 일반 PC 서버를 이용해 라우팅 서비스를 구현하는 경우도 적지 않았다.
CPU는 라우터의 성능(처리량)을 결정짓는 부분이기 때문에 소형 라우터보다 중형 라우터가 더 빠른 CPU를 내장하고 있으며, 사용자가 많거나 더 많은 작업을 할수록 메모리 용량이 커야 한다.
라우터의 메모리에는 라우터 운영체제(예를 들면 시스코의 IOS)와 라우터의 환경 설정에 대한 내용 즉, 라우터 비밀번호, 시리얼 포트의 속도, 포트에 등록된 IP 어드레스 등의 내용이 저장돼 있다. NVRAM( Non-Volatile Random Access Memory)을 사용하기 때문에 라우터를 재부팅해도 수정된 환경이 적용된다.
라우터는 ROM에 있는 부트스트랩 프로그램을 통해 플래시 메모리에 라우터 운영체제를 저장하고 있다가 메모리로 올린다. 네트워크 운영체제는 기능이 향상되고, 제공하는 기능이 많아질수록 버전이 올라가는데, 이때 프로그램 크기도 점차 커지므로 이를 저장하고 운영하기 위한 메모리도 커진다. 따라서 네트워크 운영체제의 버전이나 장비에 따라 필요한 플래시 메모리 용량이 다르다. 일반적으로 시스코 IOS 12 버전이라면 8MB 정도의 메모리가 필요하다.
라우터는 외부 인터넷이나 원거리에 있는 지점간 통신을 하기 위해 통신 포트를 제공한다. 일반적으로 2개를 제공하는 시리얼 포트는 첫번째 포트가 serial0, 두번째 포트는 serial1로 지정돼 있다.

PC의 COM 포트는 일반적으로 비동기 방식의 포트(Async Port)에 해당하는 반면, 시스코 라우터의 시리얼 포트는 동기(Synchronous) 방식이다. 또한 라우터에도 이더넷 포트가 있어서 스위치나 허브를 연결할 수 있다. 그밖에도 라우터에는 콘솔(console) 포트와 AUX(AUXiliary) 포트가 있는데, 이는 라우터를 처음 설치하거나 유지보수를 위해 설정을 변경할 때 사용한다.

<라우터의 핵심 : 라우팅 테이블>

스위치가 MAC 어드레스를 기반으로 패킷을 목적지로 전달하는 것처럼, 라우터도 어드레스 테이블에 해당하는 '라우팅 테이블'을 가지고 라우팅 서비스를 제공한다. 이 라우팅 테이블에 기록된 정보를 바탕으로 라우터는 자신에게 보내온 패킷을 어디로 전달할 것인지 결정한다. 보다 정확하게 말하면, 라우터는 철저하게 라우팅 테이블에 의존해 라우팅을 한다. 따라서 라우터의 운영은 라우팅 테이블을 관리하는 것이 절반 이상의 비중을 차지하며, 이 라우팅 테이블을 어떻게 구성하고 관리하느냐에 따라 라우터의 원래 목적, 즉 최적의 경로를 찾는 것이 가능해진다.
라우팅 테이블의 정보를 관리하는 방법은 크게 정적(static) 라우팅과 동적(dynamic) 라우팅으로 나눌 수 있다. 정적 라우팅은 관리자가 직접 라우터에 대해 접속하려는 특정 장소, 즉 상대 라우터를 지정하는 방식이며, 동적 라우팅은 라우터가 자체적으로 라우터끼리의 접속 정보를 주고받아 라우팅 테이블이 자동 갱신되는 방법이다.
동적 라우팅이 당연히 편하고 효과저인 방법처럼 보이지만, 정적 라우팅도 라우터 자체의 부하가 적고 회선 대역폭의 효율이 좋다는 장점이 있다. 때문에 모뎀이나 브로드밴드 네트워크와 같이 필요할 때만 연결하는 환경에서는 라우팅 정보를 라우터끼리 주고받지 않는 정적 라우팅이 주로 이용된다. 
동적 라우팅은 자동으로 라우팅 테이블이 갱신된다는 장점으로 인해 장애가 발생된 라우터가 라우팅 정보에세 제거됨으로써 네트워크 장애의 영향을 피할 수 있으며, 일부 라우터가 사라지거나 새로이 추가돼도 항상 최적의 경로로 데이터를 전송할 수 있다. 이미 헤아릴 수 없을 정도로 많은 라우터가 설치돼 있는 인터넷은 정적 라우팅을 적용하기에는 이미 너무 복잡한 상태라고 할 수 있다.

최적 경로 찾기의 조건 : 라우팅 프로토콜과 라우팅 알고리즘
그렇다면 동적 라우팅 테이블은 어떤 방식으로 만들어지는 것일까. 연결된 라우터끼리 무작위로 정보를 전송해 이를 저장하는 방식으로는 복잡 다단한 구성을 갖고 있는 인터넷에서 라우터가 최적의 경로를 찾을 수 없을 것이다.
이렇게 라우터끼리 서로의 정보를 주고 받는 방식을 정한 것이 바로 라우팅 프로토콜이며, 이들 라우팅 프로토콜은 일정한 라우팅 알고리즘을 바탕으로 이뤄져 있다. 라우팅 알고리즘은 거리 계산 방식(Distance Vector Advertisement)과 연결 상태 방식(Link State Advertusement)으로 나눠지며, 거리 계산 방식의 라우팅 프로토콜에는 RIP, IGRP, EIGRP가, 연결 상태 방식 라우팅 프로토콜에는 OSPF, IS-IS, NLSP 등이 대표적이다.

거리 계산 방식은 네트워크 어드레스에 대해 거리(홉 수)와 방향(라우터의 어느 포트인지) 정보를 다른 라우터로 보내 라우팅 테이블 정보를 변경하는 방법이다. 

반면 연결 상태 방식은 여기에 더해 대역폭, 전송지연, 회선 신뢰도, 부하 등을 적절히 조합해 최적의 경로를 선택한다. 다시 말해 라우터를 여러 개 거쳐서 홉 수가 많더라도 회선 속도가 보다 빠른 쪽으로 경로를 설정할 수 있다는 것이다

- 화보로 보는 네트워크 기초 (2005.11)