Express를 사용하여 웹 서버를 만들 것입니다.
서버를 만들기 위해 Node.js와 mongoose를 사용할 것입니다.
서버는 메인, 로그인, 회원가입, id 찾기, password 찾기로 구성된다.
프로젝트 구성
HTML
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>메인 페이지</title> </head> <body> <h1> 홈페이지에 오신 것을 환영합니다. </h1> <div><a href=./login.html>로그인 하기</a></div> <P><a href=./sign.html>회원가입 하기</a></p> <p><a href=./findid.html>id 찾기</a></p> <p><a href=./findpass.html>password 찾기</a></p> </body> </html> | cs |
메인페이지로 실행화면은 다음과 같다.
Sign.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>회원가입하기</title> </head> <body> <form method=post action='/process/adduser'> <h1> 회원가입 페이지 </h1> <p>ID : <input type=text name=id> </p> <p>PASS : <input type=password name=password> </p> <p>NAME : <input type=text name=name></p> <p>AGE : <input type=text name=age></p> <p><input type=submit value="가입하기"></p> </form> </body> </html> | cs |
POST 방식으로 사용했으며 action을 '/process/adduser'으로 줬다.
실행화면은 다음과 같다.
login.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>로그인</title> </head> <body> <form method=post action='/process/login'> <h1> 로그인 페이지 </h1> <p>ID : <input type=text name=id> </p> <p>PASS : <input type=password name=password> </p> <p><input type=submit value="login"></p> </form> </body> </html> | cs |
POST 방식을 사용했으며 action을 '/process/login'으로 줬다.
실행화면은 다음과 같다.
findid.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>id 찾기</title> </head> <body> <form method=post action='/user/findid'> <h1> 이름을 이용하여 id 찾기 </h1> <p>NAME : <input type=text name=name> </p> <p><input type=submit value="ID 찾기"></p> </form> </body> </html> | cs |
등록한 이름을 이용하여 id를 찾는 페이지이다.
POST 방식을 사용했으며 action을 '/user/findid'으로 줬다.
실행화면은 다음과 같다.
findpass.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>패스워드 찾기</title> </head> <body> <form method=post action='/user/findpass'> <h1> 패스워드 찾기 </h1> <h1> (ID,NAME) </h1> <p>ID : <input type=text name=id> </p> <p>NAME : <input type=text name=name> </p> <p><input type=submit value="password 찾기"></p> </form> </body> </html> | cs |
등록한 id와 이름을 이용하여 password를 찾는 페이지이다.
POST 방식을 사용했으며 action을 '/user/findpass'으로 줬다.
실행화면은 다음과 같다.
미들웨어 사용하기
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Express의 미들웨어 불러오기 var express = require('express'), http = require('http'), path = require('path'); var bodyParser = require('body-parser'), serveStatic = require('serve-static'); //express 객체 생성 var app = express(); // body-parser : post로 요쳥했을 때의 요청 파라미터 확인 방법을 제공 // body-parser를 이용해 application/x=www-form-urlencoded 파싱 app.use(bodyParser.urlencoded({extended:false})); // body-parser를 이용해 application/json 파싱 app.use(bodyParser.json()); app.use('/public', serveStatic(path.join(__dirname,'HTML'))); http.createServer(app).listen(3000, function(){ console.log('Express server start....'); }); | cs |
serve-static을 사용하여 HTML 폴더를 /public의 path로 접근할 수 있도록 했다.
port는 3000을 사용했으며 각 html에 접근하기 위해서는 localhost:3000/public/'html 파일명'.html으로 접근해야 한다.
실행화면은 다음과 같다.
참고
모듈을 사용하기 위해 package.json을 만들고 플러그인을 설치해야 한다.
- package.json 만들기
npm init 명령어 입력 후 프로젝트 정보를 입력 할 수 있는데 모두 Enter(기본 값)을 해도 무방하다.
완료 후 다음과 같이 package.json 파일이 생성된 것을 확인 할 수 있다. - 플러그인 설치
> npm install express--save 명령어로 플러그인을 설치한다.
(--save 옵션은 package.json 파일의 dependencies 항목에 플러그인 정보가 저장된다.)
실행 후 package.json의 dependencies에 추가된 것을 확인 할 수 있다.
지금까지 Express를 사용하여 웹 서버를 만들기 위한 html (메인, 로그인, 회원가입, id 찾기, password 찾기)과 미들웨어 사용법을 살펴봤습니다.
이어서 (Node.js) express로 웹 서버 만들기(2/2)에서 라우터, 데이터베이스 연동을 통한 로그인, 회원가입 등 기능을 구현하겠습니다.
'웹 > Node.js' 카테고리의 다른 글
| 4. (Node.js) express로 웹 서버 만들기(2/2) (0) | 2019.01.07 |
|---|---|
| 2. (mongoDB) mongoDB 설치 및 설정 (0) | 2019.01.05 |
| 1. (Node.Js) JDK와 Eclipse 및 Nodeclipse 플러그인 설치 (0) | 2019.01.05 |
