zion830/node-express-step-by-step.md

## node-express-step-by-step.md

      
    Raw
  

              node-express-step-by-step.md
            
          
    STEP 1
var express = require('express');
var app = express(); // express 객체를 반환

STEP 2
var express = require('express');
var app = express(); // express 객체를 반환

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

localhost:3000으로 접속했을 때 앱의 실행을 확인할 수 있다

STEP 3
var express = require('express');
var app = express(); // express 객체를 반환

app.get('/', function (req, res) {
    res.send(`Hello home page`); // 응답(response)으로 값을 전달
});

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

STEP 4
var express = require('express');
var app = express(); // express 객체를 반환

app.get('/', function (req, res) {
    res.send(`Hello home page`); // 응답(response)으로 값을 전달
});

// 라우팅 처리
app.get('/login', function (req, res) {
    res.send(`Please Login`); // 응답(response)으로 값을 전달
});

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

STEP 5
var express = require('express');
var app = express(); // express 객체를 반환

app.get('/', function (req, res) {
    res.send(`Hello home page`); // 응답(response)으로 값을 전달
});

// static file을 표현하기
app.get('/route', function (req, res) {
    res.send('<h1>Hello!</h1> <img src="/route.png">')
});

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

STEP 6
var express = require('express');
var app = express(); // express 객체를 반환

app.get('/', function (req, res) {
    res.send(`Hello home page`); // 응답(response)으로 값을 전달
});

app.get('/dynamic', function (req, res) {
    var result = `
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>제목</title>
    </head>
    <body>
        <h1>안녕!!</h1>
    </body>
    </html>
    `;

    res.send(result); // HTML 문서 전송
});

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

STEP 7
${...}로 HTML 내부에 JavaScript 코드를 삽입할 수 있다.

var express = require('express');
var app = express(); // express 객체를 반환

app.get('/', function (req, res) {
    res.send(`Hello home page`); // 응답(response)으로 값을 전달
});

app.get('/dynamic', function (req, res) {
    let friends = '';
    let people = ['철수', '영희', '진수'];

    for (let i = 0; i < people.length; i++) {
        friends += `<li> ${i + 1} 번 친구 : ${people[i]} </li>`;
    }

    var result = `
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>제목</title>
    </head>
    <body>
        <h1>안녕!! 내 친구들을 소개할게</h1>
        <ul>
            ${friends}
        </ul>
    </body>
    </html>
    `;

    res.send(result);
});

app.listen(3000, function () {
    console.log('3000번 포트 연결!');
});

실행 결과물

localhost:3000/으로 접속 시 정적인 페이지 확인 가능

localhost:3000/dynamic으로 접속 시 동적인 페이지 확인 가능