본문 바로가기

전체 글

 (432)
웹 애플리케이션에 실시간 기능 부여하기 [3/3] 이제 빙고 게임에 실시간 기능을 부여해보자! 이전에 배운 express와 Socket.IO를 연동하는 방법을 이용하여 여러 사용자가 돌아가면서 자신의 순서일 때만 숫자를 선택할 수 있도록 하는 기능을 구현해보자. 서버측 구현: app.js
웹소켓 양방향 실시간 통신 기술 - 한번의 연결로 계속 통신할 수 있다
Socket.IO 웹소켓 웹소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. 현재 API는 W3C에서 관장하고 있으며 프로토콜은 IETF에서 관리하고 있다. 웹소켓은 별도의 포트를 사용하지 않고 HTTP와 같은 80번 포트를 사용하는데, 이로 인해 클라이언트인 웹 브라우저뿐만 아니라 웹 서버도 기능을 지원하고 있어야 한다. 웹소켓의 사용 이유 초창기 WEB1.0은 인터넷에 접속한 사용자에게 콘텐츠를 전달하는 역할만 했다. 하지만 *Ajax와 같은 기술이 나타나면서 서버와 클라이언트 간의 상호작용을 하는 웹 서비스가 등장했다. CERN과 같이 초창기의 연구기관에서 사용했던 ..
웹 애플리케이션의 기본 UI 작성하기 [2/3] 공통 요소와 CSS 표현 가장 먼저 layout.jade 파일을 수정하여, 화면을 구성하는 HTML 태그들의 스타일 속성을 CSS를 이용해 변경하고 빙고 게임 판과 게임 인터페이스를 구성한다. 6~7번 줄은 Socket.IO와 jQuery를 사용하기 위해 추가한 코드다. socket.io.js 파일은 socket.io 모듈을 포함한 서버가 실행되면 자동으로 생성되므로 신경쓰지 않아도 된다. jQuery 라이브러리 파일은 이전에 이미 다운받아 두었다고 가정하고 진행한다. views/layout.jade doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') script(src='/socket.io/so..
[HTML] Jade 사용 방법 익히기 Jade란? express는 화면을 구성하기 위한 뷰 템플릿 엔진으로 Jade와 ejs 등을 지원한다. Jade는 *Haml의 영향을 받은 자바스크립트를 이용한 높은 성능의 노드용 뷰 템플릿 엔진으로, 처음 사용할 땐 불편할 수 있으나 익숙해지면 HTML보다 훨씬 편하다. Haml (=HTML Abstract Markup Language) HTML을 위한 경량화 마크업 언어로, 즉시 처리하는 기존의 인라인 코딩 방식을 따르지 않고, 콘텐츠를 동적으로 표현할 수 있는 언어. Jade 사용 방법 익히기 1. 태그 기술하기 태그 표현 방법 기존 HTML태그는 태그를 지칭하는 단어 하나만 입력하면 사용할 수 있다. Jade 문법으로 표현 html head body 결과 이처럼 코드가 아주 단순해지며, 태그의 깊..
웹 애플리케이션 프로젝트 생성하기 [1/3] 온라인 빙고 게임 만들기 5x5칸에 번갈아 가면서 숫자를 부르고, 해당 숫자를 지워 가로, 세로, 대각선으로 먼저 몇 줄을 만든 사람이 이기는 게임. 여기서는 입력 인터페이스를 작성하는 것이 중요하지 않으므로, 무작위로 숫자가 입력되는 것으로 대체한다. 빙고 게임 프로젝트 생성 express rst_bingo cd rst_bingo && npm install npm install을 통해 node_modules라는 노드 모듈 디렉터리에 express 모듈, Jade 모듈이 설치되고, 실시간 빙고 게임을 가능하게 해줄 Socket.IO 모듈도 설치된다. public 디렉터리에는 클라이언트 측에서 사용할 이미지, javascripts, CSS관련 파일 등의 리소스가 있다. jQuery를 사용할 것이므로 최신 ..
Express - 페이지 라우팅 라우팅(Routing) 클라이언트로부터 요청받은 URL과 뷰(view)를 매칭시키는 것. 즉, 특정한 URL에 대해 특정한 뷰로 연결하는 역할을 한다. 이해를 돕기 위해 URL이라 표현했으나, 실제 라우팅에 사용되는 정보는 호스트 이름을 제외한 나머지 경로(Path)를 표시한 문자다. 즉 예를 들어 http://localhost:3000/hello/world 다음과 같은 URL로 접속하게 되면 라우팅 대상은 '/hello/world' 문자열이 된다. app.get() GET방식으로 들어오는 경로를 연결하여 이에 대응하는 동작을 콜백함수로 기술한다. app.get('/', function(req, res) { res.render('index.jade'); }); 위의 경우, 지정된 경로는 '/'으로, 도메..
라우트, 라우터, 라우팅 Route 경로. 길. Router 여러 라우트(길) 중에서 가장 빠른 길을 찾아내는 역할을 함 Routing 쉽게 말하자면 경로를 찾아가게 하는 과정. 라우팅 프로토콜로 인해 만들어지는 것이 라우트이다. uri(경로) 및 특정한 http 요청 메소드(get, post 등)인 특정 *엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것. 각 라우트는 하나 이상의 핸들러 함수를 가지며, 이 함수는 라우트가 일치할 때 실행된다. *엔드포인트: 어떤 소프트웨어나 제품의 최종 목적지인 사용자를 가리키는 말. (ex) PC, 노트북, 핸드폰 등 유저가 사용하는 devicies (참고) [네트워크] Routing(라우팅) 개념 * 라우트와 라우팅의 차이점(route와 routing의 차이점..
반응형

티스토리툴바