Back-End/Node.js (103) 썸네일형 리스트형 웹 애플리케이션에 실시간 기능 부여하기 [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.. 웹 애플리케이션 프로젝트 생성하기 [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'); }); 위의 경우, 지정된 경로는 '/'으로, 도메.. Express - app.js 소스 살펴보기 전체 코드 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade').. Express - 17. 수업을 마치며 1. Template engine html을 직접 타이핑하여 코딩하는 귀찮음을 덜어주는 언어 pug express와 함께 자주 사용되는 template engine. 적은 코드를 이용하여 많은 html코드를 자동으로 입력할 수 있다. Getting Started – Pug Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”.. 이전 1 2 3 4 5 6 ··· 13 다음
