5.Node js Express-1

node JS 2020. 1. 4. 14:46

이제 node Js 웹 프레임워크를 사용해서 서버를 구축해보자.

웹프레임워크는 대표적으로 Express, Koa, Hapi등이 있다.

Express를 써볼거다.이제 기본적인 디렉토리 구조를 보자.

express_tutorial/
├── package.json
├── public
│   └── css
│   └── style.css
├── router
│   └── main.js
├── server.js
└── views
 ├── about.html
 └── index.html

이제 package.json파일 생성을 해주자

프로젝트 이름과 버전 의존패키지 리스트 등의 정보를 포함한다.

{
  "name": "express-tutorial",
  "version": "1.0.0",
  "dependencies": 
  {
    "express": "~4.13.1",
    "ejs": "~2.4.1"    
  }
}

만약 없다면 install명령어로 없는 패키지들을 설치하자.

server.js를 생성해서 Express서버를 만들어 준다.

var express = require('express');
var app = express();
var server = app.listen(3000, function(){
    console.log("Express server has started on port 3000")
})

그러고 서버를 실행해준 뒤 페이지에 들어가면 Cannot GET/이라 나온다.

Router를 아직 정의하지 않았기때문이다.

 

이제 Request가 왔을때 어떤 작업을 할 것인지 Router를 통해서 설정해줘야한다.

확인용으로 간단하게 하나 추가해보자.

app.get('/', function(req, res){
    res.send('Hello World');
});

server.js를 실행해주고 http://localhost:3000/을 들어가면 Hello World를 반환한다.

어차피 확인용으로 작성했던거니 위의 코드는 지워두자.

router폴더를 만들고 그 안에 main.js파일을 생성해주자.

module.exports = function(app)
{
     app.get('/',function(req,res){
        res.render('index.html')
     });
     app.get('/about',function(req,res){
        res.render('about.html');
    });
}

module.exports는 router 코드를 작성했기 때문에

server.js에서 불러올 수 있게 사용한다.

view폴더를 만들고, 이제 화면에 띄워줄 index.html파일과 about.html파일을 만들어준다

index.html

<html>
  <head>
    <title>Main</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    Hey, this is index page
  </body>
</html>

about.html

<html>
  <head>
    <title>About</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    About... what?
  </body>
</html>

그리고 style.css파일이 있으니 public/css폴더를 만들고 안에 style.css파일을 만들자

body{
	background-color: black;
	color: white;
}

server.js를 수정해주자

var express = require('express');
var app = express();
var router = require('./router/main')(app);

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var server = app.listen(3000, function(){
    console.log("Express server has started on port 3000")
});
app.use(express.static('public'));

라우터 모듈인 main.js 를 불러와서 app 에 전달해주자.
서버가 읽을 수 있도록 HTML 의 위치를 정의해준다.
서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정한다.

이제 서버를 실행해주고 http://localhost:3000/에 접속했을때 css까지 적용된 페이지가 나오면 성공이다.

 

정적 파일이란? HTML 에서 사용되는 .js 파일, css 파일, image 파일 등을 가르킵니다.
서버에서 정적파일을 다루기 위해선, express.static() 메소드를 사용하면 됩니다.

public/css 디렉토리를 만드시고 그 안에 style.css 파일을 생성해주세요.

'node JS' 카테고리의 다른 글

7.Node js Express-3(Restful API)  (0) 2020.01.18
6.Node js Express-2(EJS)  (0) 2020.01.11
4.Http Module  (0) 2019.12.26
3.Event Loop  (0) 2019.12.21
2.REPL과 NPM  (0) 2019.12.21
WRITTEN BY
Clasha
,