2021.07.02 - [스마트한 코딩 공부] - [Node.js] Node.js 로 간단한 웹서비스 만들기 #1
[Node.js] Node.js 로 간단한 웹서비스 만들기 #1
1. Node.js 란? Node.js 공식 홈페이지에 들어가면 "Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다." 라는 설명이 나온다. 간단하게 말하면 Node.js는 javascript를 실행해주는 환경..
smartseoullife.tistory.com
1. 서버 생성
1.1 http 모듈을 이용한 서버 생성
const http = require('http');
/*
http 모듈의 createServer 메소드를 이용하여 http server 객체를 생성한다.
request 이벤트가 발생하면 HTTP request를 처리하여 response를 반환
createServer 메소드가 반환한 HTTP server 객체의 listen 메소드와 3000이라는 포트번호를 전달하여 서버를 실행한다.
*/
http.createServer((request, response) => {
response.statusCode =200;
response.setHeader('Content-Type', 'text/plain');
response.end('Hello World');
}).listen(3000);
console.log('Server running at http://127.0.0.1:3000');
/*
터미널에서 node index.js 명령어를 실행한 다음에 웹브라우저에서 'localhost:3000' 에 접속하면
Hellow world가 출력되는 것을 확인할 수 있다.
*/1.2 Express 모듈을 이용한 서버 생성 (index.js)
http보다 저번 시간에 썼던 NPM 모듈을 사용하는게 더 편하다. 그 중에서 서버를 열어주는 모듈은 express이다.
/*
express를 이용한 서버 생성
express 모듈을 로딩하여 변수 express에 할당한다.
변수 app에 express 모듈의 express 함수를 할당한다.
app 변수를 통해서 express 함수를 사용할 수 있다.
*/
var express = require("express");
var app = express();
/*
express 에 설정을 해준다.
app.set("view",...)은 내가 보여주고자 하는 페이지의 위치를 지정해준다.
__dirname 은 현재경로를 의미하고, view폴더를 사용할 것이기 때문에 + "/view" 로 지정해준다.
apss.et('view engine',..)은 뷰엔진을 지정해주는건데, 간단하게 말하면 사용할 파일의 종류를 지정해주는것이다.
ejs로 지정했다.
*/
app.set("views", __dirname + "/views");
app.set('view engine','ejs');
/*
서버를 만들 때 데이터를 JSON 형식의 바디로 보내주기 때문에 body 에 들어오는 데이터값을 읽는 명령어가 필요하다.
이건....그냥 쓰자!! 궁금하신 분들은 인터넷에 검색하면 몇개 나온다 ㅎㅎ
*/
app.use(express.json());
app.use(express.urlencoded({ extended : false}));
/* route를 main 으로 사용한다는 의미이다! */
var main = require('./routes/main')();
app.use('/', main);
/* app.use(express.static('폴더명')을 이용하면 폴더에 있는 파일을 불러올 수 있다.
템플릿을 불러오거나 할 때 사용한다.
*/
app.use(express.static('public/css'));
/*
express 모듈내의 listen 메소드에 3000이라는 포트번호를 전달하여 서바를 실행한다
서버가 실행되면 실행창에 "Express Run"이 출력되어 잘 동작하는지 확인한다. 이건 없어도 된다.
*/
var server = app.listen(3000,function(){
console.log("Express Run")
})2. routes (main.js)
routes는 서버에서 어떤 작업을 할지 설정해주는 장치이다. 예를 들면 쇼핑몰 사이트를 이용할 때, 일반 고객으로 로그인 했을 때 나오는 페이지를 구성해주는걸 user.js 라고 하면, 관리자로 들어갔을 때 나오는 페이지는 manager.js로 설정하여 이용할 수 있도록 한다. 위에 코드 중간에 var main = require('./routes/main')() 와 app.use("/", main) 명령어가 main을 기본 routes로 사용한다는 의미이다.
var express = require('express');
var router = express.Router();
module.exports = function(){
router.get('/',function(req, res, next){
res.render('main.ejs');
})
/*
route를 사용하게 되면 function(req, res)에서 next를 추가해줘야한다.
현재 라우터에서 판단하지 않고 다음 라우터로 넘기겠다.는 의미이다.
*/
router.get('/second',function(req, res, next){ // /second 라는 request를 받았을 때 아래 function을 실행한다
console.log("next");
next();
}, function(req, res){
res.render('second.ejs');
})
router.get('/third',function(req, res, next){ // /third 라는 request를 받았을 때 아래 function을 실행한다
console.log("next");
next();
}, function(req, res){
res.render('third.ejs');
})
return router;
}
3. view 화면 만들기
index, second, third 3개의 페이지를 각자 다른 방법으로 이동이 가능하게 만들려고 한다.
3.1 function을 이용 (index.ejs)
html에서 function을 따로 만들어서 지정한 동작에 코드를 실행하는 방법이다. 이런 경우에는 보통 <script>안에 코드를 만들어서 사용한다. button을 클릭하면 만들어 놓은 function을 실행하도록 했다.
<!DOCTYPE html>
<html>
<head>
<script>
function second(){
location.href ="/second";
};
function third(){
location.href ="/third";
};
</script>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="second()">second</button>
<button onclick="third()">third</button>
</body>
</html>3.2 javascript를 이용 (second.ejs)
지정한 동작에 직접 실행코드를 집어넣는 방식이다. javascript 코드로 실행 명령을 준다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Second Page</h1>
<button onclick="javascript:location.href='/third'">third</button>
<button onclick="javascript:location.href='/'">index</button>
</body>
</html>3.3 form을 사용 (third.ejs)
form 형태로 데이터를 보내주는 방법이다. 아래는 get 방식을 사용했는데 데이터를 보낼 때는 웬만하면 post 방식을 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Third Page</h1>
<form action ="/" method = "get">
<input type ="submit" value = "index">
</form>
<form action ="/second" method = "get">
<input type ="submit" value = "second">
</form>
</body>
</html>4. 파일 구성
아래 그림처럼 파일과 폴더가 구성된다. 각각의 파일에 해당되는 내용은 위에 제목에 적어놓았다.
'스마트한 개발 공부 > Node.js | Java | html' 카테고리의 다른 글
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #2 (1) | 2021.07.09 |
|---|---|
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #1 (0) | 2021.07.05 |
| [Node.js] Node.js 로 간단한 웹서비스 만들기 #1 (0) | 2021.07.02 |
| [HTML] 웹서버프로그래밍 기초 #3 (0) | 2021.06.30 |
| [HTML] 웹서버프로그래밍 기초 #2 (0) | 2021.06.29 |