[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(2)

c o d i n g . . 🍉/Node.js

[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(2)

H J 2021. 7. 12. 16:18

동기화 비동기화

let fs = require('fs');

// Sync
console.log('1');
let data = fs.readFileSync('data.txt',{encoding:'utf8'});
console.log(data);

//Async
console.log('2');
fs.readFile('data.txt', {encoding:'utf8'}, function(err, data){
    console.log('3');
    console.log(data);
});
console.log('4');

Express

express를 설치한 후!

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

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

app.get('/login', function(req, res){
    res.send('Login please');
});

app.listen(3000, function(){
    console.log('Connected 3000 port!');
});

이렇게 express를 사용할 수 있다

get을 통해서 들어온 경로에 따라 다른 페이지를 보여줄 수 있다!

정적인 파일 서비스하는 법

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

app.use(express.static('public'));

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

app.get('/route', function(req, res){
    res.send('Hello Router, <img src="/cat.jpg">');
});

app.get('/login', function(req, res){
    res.send('Login please');
});

app.listen(3000, function(){
    console.log('Connected 3000 port!');
});

정적인 파일을 서비스하기 위해서 이런 코드를 항상 쓰고 public이라는 디렉토리 안에 정적인 파일을 가져다 두면 된다

app.use(express.static('public'));

웹페이지 표현하는 법

1. 정적인 파일 전달

public 디렉토리에 이미지나 html 저장 후 위의 방법처럼 사용할 수 있다!

http://localhost:3000/static.html

이런 식으로 정적인 파일에 접근할 수 있음!

(정적인 파일은 변경되면 서버를 껐다 킬 필요없이 변경됨)

2. 동적인 파일 전달

app.get('/dynamic', function(req, res){
    let output = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        Hello, Dynamic!
    </body>
    </html>`;
    res.send(output);
})

이렇게 동적인 파일에 접근하고 서비스할 수 있다

동적인 파일을 수정한 후에는 서버를 껐다가 켜야 바뀐다

app.get('/dynamic', function(req, res){
    let lis = '';

    for(let i=0;i<5;i++){
        lis = lis + '<li>coding</li>';
    }

    let time = Date();

    let output = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
            ${lis}
        </ul>
        ${time}
    </body>
    </html>`;
    res.send(output);
})

이런 식으로 코드를 반복할 때 유용하게 사용할 수 있다

정적, 동적인 파일의 장점만 모은 방법 -> 템플릿 엔진

먼저 설치를 해준다! 강의에서는 npm install jade --save 로 다운받아서 나도 그렇게 해보았는데 오류가 나서 구글링을 해봤더니

현재는 이런 식으로 설치해주어야한다고 한다!! npm install pug --save

(앞으로 강의에서 나오는 jade의 부분으로 모두 pug로 바꾸어 사용하면 됨!!)

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

app.set('view engine', 'pug');
app.set('views', './views');

app.get('/template', function(req, res){
    res.render('temp');
});

템플릿 엔진을 사용할 때

app.set('view engine', 'pug');

app.set('views', './views');

이 코드를 항상 사용하고 pug 파일을 views라는 디렉토리 안에 만들어주면 된다

app.get('/template', function(req, res){

res.render('temp');

});

항상 사용하던 send가 아닌 render를 사용해서 temp.pug 파일을 가져온다

Jade 문법

줄바꿈을 사용하게 되면 새로운 태그로 인식하기 때문에 줄바꿈을 할 때 주의해야 한다!

app.get('/template', function(req, res){
    res.render('temp', {time: Date(), _title:'Jade'});
});

pug 파일에 변수에 값을 받아오려면 js 파일에서 위와 같이 { 변수명: 할당 값 }으로 지정해주어야 한다

[pug 파일]

html

head

title= _title

boby

h1 Hello Jade

-for(let i=0; i<5;i++)

li coding

div= time

~~왠지 모르겠는데 body 태그가 겹친다ㅜㅜ~~

'c o d i n g . . 🍉 > Node.js' 카테고리의 다른 글

[생활코딩] NodeJs 활용하기(2) (0)	2021.08.09
[생활코딩] NodeJs 활용하기(1) (0)	2021.08.02
[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(4) (0)	2021.07.12
[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(3) (0)	2021.07.12
[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(1) (0)	2021.06.28

현재글[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(2)

🍃🛋🧤🍋🍧🍈🐈🎧

생활코딩 웹, 웹프, 파이썬, 생활코딩, Nodejs, JavaScript, html, 자바스크립트, 생활코딩 nodejs, 웹 프로그래밍, 인프런, 백엔드, 프론트엔드, python, 웹프로그래밍, 42 seoul, html 독학, 코딩, css, 내가 정리한,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

🐹's tory