Skip to content

Latest commit

 

History

History
330 lines (219 loc) · 5.03 KB

01_Express_Basics.md

File metadata and controls

330 lines (219 loc) · 5.03 KB

Express.js Basics



image-20200331092006288



What is Express.js?

: Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications.


Core Features

  1. Allows to set up middlewares to respond to HTTP Requests

  2. Defines a routing table which is used to perform different actions based on HTTP Method and URL

  3. Allows to dynamically render HTML Pages based on passing arguments to templates



Installation


1. Installing Express Locally

Install express

npm install express --save
  • saves the installation locally in the node_modules
  • create a directory express inside node_modules

Express version check

$ npm view express version
4.17.1

Install modules alog with express

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save



2. Installing Express in the Project


Directory structure

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

1. create package.json

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


2. Install dependency by using npm

npm install


3. Create Express server

server.js

var express = require('express');
var app = express()
var server = app.listen(8000, function(){
    console.log("Express server running on port 8000!")
})

result

$ node server.js
Express server running on port 8000!
  • port 8000 으로 web server 열어서 들어가면 Cannot GET/ 이라는 text 출력됨
    • why?
      • Router를 아직 정리하지 않아서!


4. Basic Routing


server.js

var express = require('express');
var app = express()
var server = app.listen(8000, function(){
    console.log("Express server running on port 8000!")
})

app.get('/', function(request, response){
    response.send('Hello World')
})


5. Router


image-20200403223235009

router code와 server code는 다른 파일에 작성하는 것이 좋은 코딩 습관!

  • router folder 만들기
  • main.js 생성

router > main.js

module.exports = function(app){

    app.get('/', function(request, response){
        response.render('index.html')
    });

    app.get('/about', function(request, response){
        response.render('about.html')
    });
}
  • module.exports는 router code를 따로 작성했기 때문에 server.js에서 module로서 불러와서 사용 가능~!


5. Render HTML page


  • views directory 만들기
  • html file들 만들기

views > index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>

<p>This is index page!</p>
</body>
</html>

views > about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>About... what?</p>
</body>
</html>

server.js 수정하기

var express = require('express');
var app = express();

// router module인 main.js를 불러와서 app에 전달하긔
var router = require('./router/main')(app);

// server가 읽을 수 있도록 HTML의 위치를 정의해주긔
app.set('views',__dirname + '/views');

// server가 HTML rendering을 할 때 EJS engine 사용하도록 설정하긔
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var server = app.listen(8000, function(){
    console.log("Express server has started on port 8000!!")
})


Handling Static Files


Static Files

  • HTML에서 사용되는 .js, css, image file들
  • Server에서 Static files을 다루기 위해선 express.static() method를 사용하면 된다!

  1. public directory 만들기
  2. css directory 만들기
  3. .css file들 만들기

public > css > style.css

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

server.js 수정하기

// public directory를 static folder로 설정
app.use(express.static('public'));

html file들에 css 링크 추가하기

<link rel="stylesheet" href="css/style.css">

result

127.0.0.1:8000/

image-20200404155824643


127.0.0.1:8000/about

image-20200404155934497