* node.js 설치가 이미 이루어 졌다고 가정하고 진행합니다.
현재 사용 버전 v10.9.0
공식홈페이지에 들어가니 LTS 버전이 10.14.2 로 제가 사용하고있는데 낮은 버전이라 업데이트부터 하겠습니다.
버전확인방법
$ node -v // v10.14.2
$ npm -v // v6.4.1
첫번째 노드 프로젝트 만들기
1. NodeTutorial 폴더 생성
2. test.js 파일 생성
3. console.log('첫번째 노드입니다.')
3. $ node test01.js 명령어 입력하여 실행
모듈만들고 호출하기
module.js
var calc = {};
calc.add = function(a, b) {
return a + b;
};
module.exports = calc;
- calc 라는 변수명으로 비어있는 객체를 생성하고
- calc 에 add 라는 메서드를 추가합니다.
- 이 메서드는 두개의 인자를 받아 더하는 코드를 실행합니다.
- module.exports 를 통해서 생성한 객체를 외부에서 사용가능하도록 내보내줍니다.
call.js
var calc = require('./test');
console.log(calc.add(10, 10));
- require 로 해당 모듈이 들어있는 파일을 호출하고
- 함수를 사용하게되면 실행이 이루어 집니다.
- cmd 실행 : node call.js
외장 모듈 사용하기
* nconf : 시스템환경번수 접근 모듈
$ npm install -s nconf
$ npm init
중간에 -s 가 붙는 이유는 전역설치가 아닌 해당 프로젝트에만 의존하여 설치한다는 의미 입니다.
설치하게되면 node_modules 라는 수많은 모듈을 담은 폴더가 생성이 되고 pakage.json 을 보면 설치된 의존성 모듈을 확인 할 수 있습니다.
$ npm init 을 하게되면 여러가지 입력하라는 내용이 나오는데 그냥 엔터를 눌러서 쭉 진행해도 됩니다.
package name: (nodetutorial) 프로젝트의 제목을 생성합니다.
version: (1.0.0)
description: 프로젝트에 대한 설명을 적습니다.
entry point: (call.js) 시작파일을 지정합니다.
test command:
git repository: 깃헙에 생성한 레포지토리를 입력합니다. 나중에 깃헙에 업로드할때 필요합니다.
keywords: 프로젝트의 키워드를 생성합니다.
author: 프로젝트 생성자에 대한 정보를 적습니다.
license: (ISC)
나중에 다른 사람의 프로젝트 파일을 내려받더라도 npm init 을 해주면 내 컴퓨터에서도 실행을 할 수가 있습니다.
nconf.js
var nconf = require('nconf');
nconf.env();
console.log('OS 환경 변수의 값: ', nconf.get('OS'));
$ node call.js
OS 환경 변수의 값: Windows_NT
내장모듈 확인
파일 path 를 다루는 path 모듈
var path = require('path');
var dirname = path.dirname('E:\NodeTutorial\package.json');
var basename = path.basename('E:\NodeTutorial\package.json')
console.log(`
디렉터리 : ${dirname}
파일 이름 : ${basename}
`);
// 디렉터리 : E:
// 파일 이름 : NodeTutorialpackage.json
주소문자열 요청 및 파라미터 다루기
- parse() : 주소문자열을 파싱하여 URL 객체를 만들어 준다.
- format() : URL 객체를 주소 문자열로 변환
var url = require('url');
var naverSearch = url.parse(
'https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse');
var searchStr = url.format(naverSearch);
console.log(naverSearch)
console.log(`format : ${searchStr}`)
console 결과
Url {
protocol: 'https:',
slashes: true,
auth: null,
host: 'search.naver.com',
port: null,
hostname: 'search.naver.com',
hash: null,
search: '?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse',
query: 'sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse',
pathname: '/search.naver',
path: '/search.naver?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse',
href:
'https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse' }
format : https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse
이중에서 query 가 요청 파라미터의 정보를 갖고있는데 & 을 기준으로 구분되어있습니다.
이 파라미터를 각각의 요청 파라미터로 분류하는 모듈이 있습니다. querystring 모듈입니다.
var url = require('url');
var querystring = require('querystring');
var naverSearch = url.parse(
'https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=nodejs+parse');
var searchStr = url.format(naverSearch);
var param = querystring.parse(naverSearch.query);
console.log(param);
//{ sm: 'top_hty', fbm: '1', ie: 'utf8', query: 'nodejs parse' }
console.log('원본 요청 파라미터', querystring.stringify(param))
// 원본 요청 파라미터 sm=top_hty&fbm=1&ie=utf8&query=nodejs%20parse
파일 다루기
파일 읽기
var fs = require('fs');
fs.readFile('./package.json', 'utf8', function(err, data) {
console.log(data);
})
console.log('pakage.json 파일을 읽어옵니다.');
- 내장 모듈인 fs 를 사용하여 파일을 읽어오고 생성하고 삭제 할 수 있습니다.
- 여기서는 비동기 방식으로 파일을 불러오기 때문에 마지막에 작성한 코드가 먼저 실행되고
- pakage.json 파일을 읽어들어와 나중에 보여주게 됩니다.
- 파일을 불러오는 형태는 fs.readFile('불러올 파일', '읽어올 형태', 콜백함수); 입니다.
파일 쓰기
var fs = require('fs');
fs.writeFile('./wrtie.txt', 'Hello world', function(err) {
if(err) {
console.log(err);
}
console.log('파일 데이터 쓰기 완료')
})
- write.txt 파일이 생성되고 파일에는 Hello world 가 찍혀 있습니다.
- 콜백함수는 error 처리 및 완료되었을때 실행할 내용을 담습니다.
express 로 웹서버 만들기
$ npm install express --save
app.js
// 사용할 모듈 호출
var http = require('http');
var express = require('express');
// 익스프레스 객체 생성
var app = express();
// 기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);
//express 서버 시작
http.createServer(app).listen(app.get('port'), function() {
console.log("익스프레스 서버를 시작했습니다." + app.get('port'));
});
- 모듈과 각 모듈에 포함되어있는 메서드들을 사용하여 express 로 웹서버를 만드는데 성공하였습니다.
- 그러나 해당 서버 localhost:3000 에 접속해도 아무런 응답은 없습니다. 그 처리를 아래에서 합니다.
// 사용할 모듈 호출
var http = require('http');
var express = require('express');
// 익스프레스 객체 생성
var app = express();
app.use(function(req, res, next) {
console.log('첫 번째 미들웨어에서 요청을 처리함');
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.end('<h1>Express 응답한 결과 입니다.</h1>');
})
// 기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);
//express 서버 시작
http.createServer(app).listen(app.get('port'), function() {
console.log("익스프레스 서버를 시작했습니다." + app.get('port'));
});
- app.set() 은 웹 서버의 환경을 설정하고 app.get 은 그 설정한 서버의 정보를 불러옵니다.
- app.use 를 사용하여 미들웨어를 등록합니다.
- res.end 를 호출하면 처리과정이 완료됩니다.
여러개의 미들웨어 등록
// 사용할 모듈 호출
var http = require('http');
var express = require('express');
// 익스프레스 객체 생성
var app = express();
app.use(function(req, res, next) {
console.log('첫 번째 미들웨어에서 요청을 처리함');
req.user = 'mike';
next();
});
app.use('/', function(req, res, next) {
console.log('두 번째 미들웨어에서 요청을 처리함');
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.end(`<h1>Express 서버에서 ${req.user} 가 응답한 결과 입니다.</h1>`)
})
// 기본포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);
//express 서버 시작
http.createServer(app).listen(app.get('port'), function() {
c onsole.log("익스프레스 서버를 시작했습니다." + app.get('port'));
});
미들웨어 사용하기
미들웨어란?
클라이언트에게 요청이 오고 그 요청을 보내기위해 응답하려는 중간에 목적에 맞게 처리를 하는 거쳐가는 함수들을 말한다.
일반적으로 app.use()메서드 내부에서 사용하는건 다 미들웨어이다.
static 미들웨어
static 미들웨어
특정 폴더의 파일들을 특정 패스로 접근 할 수 있도록 만들어줌
$ npm install serve-static --save
body-parser 미들웨어
body-parser 미들웨어
클라이언트가 POST 방식으로 요청할 때 본문영역에 들어있는 요청파라미터들을 파싱하여 요청 객체의 body 속성에 넣어줍니다.
$ npm install body-parser --save
/public/login.html
/app.js
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 테스트</title>
</head>
<body>
<h1>로그인</h1>
<form method="post">
아이디 <input type="text" name="id"><br/>
비밀번호 <input type="password" name="password"><br/>
<input type="submit" value="전송">
</form>
</body>
</html>
app.js
// expres 기본 모듈 불러오기
var express = require('express');
var http = require('http');
var path = require('path');
// express 미들웨어 불러오기
var bodyParser = require('body-parser');
var static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser 미들웨어 사용
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// public 폴더 안에있는 모든 파일을 웹 서버의 루트 패스로 접근 가능하도록
app.use(static(path.join(__dirname, 'public')));
// 미들웨어에서 파라미터 확인
app.use(function(req, res, next) {
console.log('첫 번째 미들웨어에서 요청을 처리함');
// 요청 파라미터를 모두 검사하는데 GET 방식일지 POST 일지 모르기때문에 두가지 모두 고려합니다.
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {"Content-Type":"text/html;charset=utf8"});
res.write('<h1>Express 서버에서 응답한 결과 입니다.</h1>');
res.write(`<div><p>Param id : ${paramId}</p></div>`);
res.write(`<div><p>Param password: ${paramPassword}</p></div>`);
res.end();
});
http.createServer(app).listen(3000, function() {
console.log('Express 서버가 3000번 포트에서 실행됨')
})
$ node app.js
http://localhost:3000/login.html
로그인 화면에서 아이디와 비밀번호 입력하고 전송 누르면
입력한 아이디와 비밀번호가 페이지에 보여지면 정상
라우터 미들웨어 사용하기
login.html
<form method="post" action="/process/login">
- form 에 action 속성 추가
app.js
// expres 기본 모듈 불러오기
var express = require('express');
var http = require('http');
var path = require('path');
// express 미들웨어 불러오기
var bodyParser = require('body-parser');
var static = require('serve-static');
var router = express.Router();
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser 미들웨어 사용
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// public 폴더 안에있는 모든 파일을 웹 서버의 루트 패스로 접근 가능하도록
app.use(static(path.join(__dirname, 'public')));
// 라우팅 함수 등록
router.route('/process/login').post(function(req, res) {
console.log('/process/login 처리함');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {"Content-Type":"text/html;charset=utf8"});
res.write('<h1>Express 서버에서 응답한 결과 입니다.</h1>');
res.write(`<div><p>Param id : ${paramId}</p></div>`);
res.write(`<div><p>Param password: ${paramPassword}</p></div>`);
res.write('<br/><Br/><a href="/login.html">로그인 페이지로 돌아가기</a>');
res.end();
})
app.use('/', router);
http.createServer(app).listen(3000, function() {
console.log('Express 서버가 3000번 포트에서 실행됨')
})
- 클라이언트는 form 에서 action 속성으로 /process/login 을 요청하고
- 이에따라 서버에서는 요청받은 route 에 따라 해당 콜백 함수를 실행합니다.
- 그리고 클라이언트로 응답을 보내주면 화면에는 아이디와 패스워드 로그인페이지로 돌아가기가 출력됩니다.
code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.