Back-End (116) 썸네일형 리스트형 웹 애플리케이션의 기본 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”.. Express - 16. express generator Express 애플리케이션 생성기 Express 애플리케이션 생성기 애플리케이션의 골격을 신속하게 작성하려면 애플리케이션 생성기 도구인 express를 사용하십시오. 다음의 명령을 이용해 express를 설치하십시오. $ npm install express-gener expressjs.com 설치 npm install express-generator -g - 사용방법에 대한 예시 보기 express -h express를 이용하여 프로젝트 실행하기 express my-app[디렉토리명] my-app 프로젝트를 생성한다. cd my-app npm install my-app 디렉토리로 이동하고, my-app에 있는 package.json에 있는 필요한 dependencies를 node_modules 디렉토리에.. Express - 15. 보안 프로덕션 환경의 Express를 위한 보안 우수 사례 프로덕션 우수 사례: 보안 개요 “프로덕션 (production)” 이라는 용어는 소프트웨어 라이프사이클 중 애플리케이션 또는 API가 최종 사용자 또는 소비자에게 정식으로 제공되는 단계를 말합니다. expressjs.com 보안 지침 1. Express를 최신 버전으로 유지하기 2. TLS 사용하기 (https) 3. Helmet 사용하기 - 발생하는 보안 이슈를 자동으로 해결해주는 모듈 - Helmet 설치 $ npm install --save helmet - Helmet 사용 var helmet = require('helmet'); app.use(helmet()); - 자동으로 Helmet이 가진 기능들이 기본적으로 설정된다. 또한 이의 기능들의.. Express - 14.3. 라우터 - 파일로 분리 - index 목표 현업에서는 라우트 개수가 1000개 2000개로 엄청 많다. 이를 정리하는 테크닉을 배우자. (1) 주소체계 변경 (2) 파일로 분리 console.log(`Example app listening at http://localhost:${port}`)) routes>index.js var express = require('express'); var router = express.Router(); var template = require('../lib/template'); // 1. 홈 페이지 // app.get('/', (req, res) => { res.send('Hello World!')}) router.get('/', function(request, response){ var title = 'W.. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
