TIL D-95 Nodejs express로 서버 실행하기

어제 자료구조 영상을 보다가 잠들었는데 자세가 잘못됐는지 목이 너무 아프다. 디스크아닌가 싶을정도로 아픈데..잘쉬는게 혁신이라는 펭수 말이 맞다,,딱히 펭수의 팬은 아니다

 

이제 슬슬 백엔드 공부를 해야 할 것 같다. 지금 아니면 언제하나. 지금해야지.

 

mongodb+nodejs 조합으로 https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/Hello-World/Express%EB%A1%9C-%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0 이 분의 포스트를 따라하며 공부했다.

 

npm init //현재 폴더에 node 프로젝트 생성
npm install --save express //express module 설치

//index.js
var express = require('express'); //설치한 express module을 불러와서 변수(express)에 담는다.
var app = express(); //express를 실행하여 app object를 초기화

app.get('/', function(req,res) { // '/'위치에 'get'요청을 받은 경우,
    res.send('Hello World!'); //"Hello World!"를 보낸다.
    //console.log(req);
});

app.listen(3000, function() { //3000번 포트를 사용한다.
    console.log('Server on!'); //서버가 실행되면 콘솔창에 표시될 메시지.
})


node index.js //index.js 실행

 

서버 실행, 성공적

 

app.use 로 '/' static 폴더 추가

app.use(콜백 함수)

: app.get과 마찬가지로 req, res, next의 parameter가 콜백함수로 전달된다. 다만 http method나 route에 상관없이 서버에 요청이 올때마다 무조건 콜백함수가 실행된다.

__dirname 

: node.js에서 프로그램 실행중인 파일 위치를 나타내는 전역변수

 

EJS 로 Dynamic Website 만들기

$npm install --save ejs

//index.js
var express = require('express');
var app = express();

//1. ejs를 사용하기 위해 express의 view engine에 ejs를 set
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));

//2. query를 통해서 이름을 받는다. 모든 쿼리를 req.query에 저장된다.
app.get("/hello", function(req,res) {
    res.render("hello", {name:req.query.nameQuery});
});

//3. route parameter를 통해 이름을 받는다. :으로 시작되는 route 해당부분에 입력되는 route 텍스트가 req.params에 저장된다.
app.get("/hello/:nameParam", function(req,res) {
    res.render("hello", {name:req.params.nameParam});
});

app.listen(3000, function() {
    console.log('Server on!');
});

// views/hello.ejs
// public/css/master.css 추가

ejs <!-- 모든 js 코드들은 <% %>에 들어가야 한다. 변수 출력시에는 <%= 변수이름 %>를 사용한다. -->

 

localhost:3000/hello

localhost:3000/hello?nameQuery=Mia

<흐름>

app.get으로 /hello, 쿼리를 통해서 이름을 받는다.

app.get으로 /hello/:nameParam, 쿼리를 req.params.nameParam에 저장한다.

ejs 파일을 사용하기 위해 res.render 함수를 사용하고, 첫번째 parameter로 ejs의 이름, 두번째 parameter로 ejs에서 사용될 object를 전달한다. (함수는 ejs를 /views/폴더에서 찾음.)

 

ejs 파일에서는 <%= 변수이름 %> 로 변수를 출력한다.

예제를 응용해서 day 버전을 만들었다.

쿼리에 영향주는 것은 <%= 변수이름%>이고, claas명은 css에 영향준다.

localhost:3000/today/Wed 으로 접속시 today 다음 Wed를 route parameter로 받아서 요일 출력

localhost:3000/today로 접속시