서버 기본 세팅
> 서버 스크립트 파일 생성 및 스크립트 작성
root에 서버를 세팅할 app.js 파일을 생성합니다.
생성 후 폴더구조는 아래와 같습니다.
// app.js
const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);
server.listen(8080, function(){
console.log('서버 실행중...');
});
코드 설명
> 세팅에 필요한 모듈들은 require로 가져와 변수에 담습니다.
http 모듈은 node.js의 기본내장 모듈이기 때문에 따로 다운로드하지않아도 사용할 수 있습니다.
const express = require('express');
const http = require('http');
const app = express();
> http 모듈은 서버 생성 메소드(createServer)를 제공하며 파라미터로 express를 넘겨줍니다.
이것을 통해 express로 서버를 생성합니다.
const server = http.createServer(app);
파라미터로 전달하여 실행하면 그만일텐데,
server 변수에 담은 이유는 http.createServer() 메소드는 서버를 생성하는 작업을 하고 난 후 생성한 서버 객체를 리턴해줍니다.
그래서 생성된 서버를 제어하기 위해 server 변수에 담는 것입니다.
> 생성된 서버를 사용자가 웹에서 확인할 수 있게 합니다.
listen 메소드를 사용하여 port 설정을 합니다. (8080)
server.listen(8080, function(){
console.log('서버 실행중...');
});
8080이 port 번호이고 listen메소드를 통해 8080에 서버가 실행되면 function이 실행됩니다.
이렇게 하면 localhost:8080로 웹에서 접속하여 당장 확인할 수 있을 것 같습니다.
> 서버 실행은 아래의 명령어로 하며 vscode 에디터의 터미널에서 서버 종료는 ctrl + c 입니다.
node app.js
But...
localhost:8080으로 접속하보면 'cannot Get/' 문구만 노출됩니다.
이유는 간단하게 말해서 localhost:8080/로 접근했을때의 행동을 정해줘야하기 때문입니다.
서버 라우터 설정해서 사용자에게 index.html 보여주기
라우터란?
쉽게 설명하면 클라이언트 요청에 따른 응답 을 해주는 장치와 같은 개념이라고 생각하면 됩니다.
예시
사용자가 네이버에서 나의정보페이지 버튼을 눌렀다. (클라이언트 요청)
나의정보페이지로 이동되었다.(서버 응답)
위와 같이 사용자가 이동하고자하는 페이지에 대한 요청을 서버가 보여주는, 응답을 도와주는 장치와 같은 개념을 말합니다.
라우팅은 라우터가 하는 일을 라우팅이라고 합니다.
localhost:8080/로 사용자가 접속했을때, express의 라우터 메소드 get을 통해 index.html을 보여주도록 설정하겠습니다.
> index.html 생성하기
src 폴더를 생성하여 하위로 index.html 파일을 생성합니다.
현재 폴더구조는 아래와 같습니다.
// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chat-app</title>
</head>
<body>
<div>welcome</div>
</body>
</html>정상적으로 세팅이 된다면 'welcome'이라는 텍스트가 보여질 것입니다.
> 추가적인 서버세팅
index.html을 웹에 노출시키도록 하겠습니다.
// app.js
const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);
const fs = require('fs');
app.use(express.static('src'));
app.get('/', function(req, res){
fs.readFile('./src/index.html', (err, data) => {
if(err) throw err;
res.writeHead(200, {
'Content-Type' : 'text/html'
})
.write(data)
.end();
});
});
server.listen(8080, function(){
console.log('서버 실행중...');
});
코드설명
> 사용자가 사이트에 접근할 때는 get과 post방식으로 접근합니다. (라우팅 메소드는 많습니다.)
get(URL로 접근) 방식으로 제어할 것이기 때문에 express의 get메소드를 사용하였습니다.
app.get('/', function(req, res){
fs.readFile('./src/index.html', (err, data) => {
if(err) throw err;
res.writeHead(200, {
'Content-Type' : 'text/html'
})
.write(data)
.end();
});
});
> app.get에 첫번째 파라미터 '/'는 사용자가 접근할 url의 경로값을 나타냅니다.
'/'은 localhost:8080/ 경로가 됩니다.
app.get('/',
> 두번째에는 '/'로 접속이 성공했을 경우 실행될 function입니다.
, function(req, res){
fs.readFile('./src/index.html', (err, data) => {
if(err) throw err;
res.writeHead(200, {
'Content-Type' : 'text/html'
})
.write(data)
.end();
});
});
> function에는 req, res의 인자값이 있는데,
req(request) 요청 오브젝트(클라이언트가 요청한 사항의 정보)가 전달되어오고,
res(response)는 응답 오브젝트(서버에게 클라이언트로 전송하는 정보)가 전달되어 옵니다.
, function(req, res){
> 응답 오브젝트를 통해 여러 메소드들을 통해 다양한 작업을 할 수 있지만,
index.html의 파일을 읽어서 사용자가 볼 수 있게 하기 위해서
node.js의 기본 내장 모듈 fs(File System)을 사용하도록 하겠습니다.
기본 내장 모듈이기 때문에 따로 install할 필요 없이 바로 require합니다.
const fs = require('fs');
> fs모듈도 여러 메소드들을 제공합니다.
그 중에 파일 전체를 비동기로 읽어오는 readFile 메소드를 사용하겠습니다.
fs.readFile('./src/index.html', (err, data) => {
if(err) throw err;
res.writeHead(200, {
'Content-Type' : 'text/html'
})
.write(data)
.end();
});
readFile메소드에 전달하는 파라미터로는 순서대로 '파일명, 옵션(인코딩 문자열), 콜백함수'입니다.
(옵션없이 바로 콜백함수를 작성해도 됩니다.)
예제에서는 src/index.html을 읽어오도록 파일명을 전달했습니다.
파일을 읽어오게되면 function이 실행됩니다.
function에는 err, data 두개의 인자가 있습니다.
err은 에러 시 전달되는 값, data는 파일내용이 읽어졌을 경우 전달되는 값입니다.
아래 부분은 에러처리 구간입니다.
> 정상적으로 응답 데이터가 있을 경우
http의 메서드인 writeHead와 write를 사용해 콘텐츠를 노출할것입니다.
writeHead 메소드는 응답 스트림에 헤더와 상태코드를 작성하는 것이고
res.writeHead(200, {
'Content-Type' : 'text/html'
})
이것이 완료되면
> 메소드체이닝에 의해 write가 실행되는데, write메서드는 응답바디를 작성하는 부분입니다.
data를 파라미터로 넘겨서 작성합니다.
.write(data)
> write를 통해 응답을 전송하고나면 필수로 end 메서드를 통해 요청전송을 종료해줘야합니다.
.end();
> src 폴더 접근 권한 설정
마지막으로
src 폴더 하위로 index.html을 생성했기때문에,
express객체가 src 폴더에 접근할 수 있도록 설정해줘야합니다.
만약 이 작업을 하지 않으면 http://주소/src/index.html로 접근하려고 했을때 액세스가 거부됩니다.
정적 파일 설정은 선택이 아니라 필수입니다.
express의 use 메소드를 통해 정적파일 설정을 해줍니다.
파라미터에는 express.static 미들웨어 함수를 사용하여 경로를 설정하여 전달해줍니다.
app.use(express.static('src'));
현재 작성한 코드는 src 폴더 자체에 접근을 허용해주었는데,
이렇게하면 src하위에 있는 모든 파일, 폴더에 접근이 가능해집니다.
만약 src 폴더 자체에 보안에 민감한 내용이 있다면 세분화해서 정적파일을 사용하도록 하는 것이 좋다고합니다.
세분화를 예로 들자면 src 폴더 하위에 css 폴더를 만들어 css폴더를 정적파일로 설정하는 것을 말합니다.`
서버를 실행시켜 localhost:8080/에 접속하여 welcome 텍스트를 확인합니다.
node app.js
(3)회차는 socket.io를 통한 통신 스크립트 설정을 해보겠습니다.
'~2022 > FE-Javascript' 카테고리의 다른 글
| require와 import (0) | 2020.04.21 |
|---|---|
| JSDoc를 사용해서 Javasript 문서화해보자! (0) | 2020.03.13 |
| Express, Socket.io를 사용하여 채팅구현하기 - (4) 채팅 구현 (2) | 2020.01.16 |
| Express, Socket.io를 사용하여 채팅구현하기 - (3) 통신 기본 세팅 (0) | 2020.01.16 |
| Express, Socket.io를 사용하여 채팅구현하기 - (1) 사전작업 (0) | 2020.01.16 |
| gulp의 watch로 minify, merge 자동화해보기 (0) | 2019.12.19 |
| gulp AssertionError [ERR_ASSERTION]: Task function must be specified 에러처리 (0) | 2019.12.19 |
| gulp로 js 파일, css파일 Minify 및 Merge하기 (0) | 2019.12.17 |
