[Node.js] express에서 html 사용하기 | 렌더링 하기

 

😎 express에서 html  사용하기

 

1. 내가 원하는 url로 html을 가져오고 싶을 때 (ejs 사용해서 렌더링)

 

터미널에서 먼저 npm i ejs를 깔아줘야한다.

npm i ejs

원하는 url 주소로 렌더링하기 위해서 ejs를 사용해서 html을 읽어온다.
-> get("/원하는 주소")으로 원하는 url로 렌더링할 수 있게 해준다.

app.set('view engine', 'ejs'); // ejs로 html 렌더링
app.engine('html', require('ejs').renderFile);

app.get("/test", (req, res) => {
    res.render("index.html")
})

요청 보낼 때 이렇게 보낼 수 있게 되었다.

http://localhost:5000/test

 

 

2. 주소 뒤에 /index.html(파일이름)으로 써서 사용할 때 (express에서 제공하는 static 사용)

 

1. 기본 사용

public이라는 폴더 안에 있는 파일을 읽어온다는 뜻이다.

이렇게 써주면 public 폴더 안에 있는 것은 url/"파일이름" 을 써서 요청을 보낼 수 있다.

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

요청 보낼 때 이렇게 보낼 수 있게 되었다.

http://localhost:5000/index.html

 

2. 원하는 주소 + index.html

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

요청 보낼 때 이렇게 보낼 수 있게 되었다.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

 

 

 

 

 

Express에서 기본제공하는 static 공식문서에서 보기

-> http://expressjs.com/ko/starter/static-files.html#express%EC%97%90%EC%84%9C-%EC%A0%95%EC%A0%81-%ED%8C%8C%EC%9D%BC-%EC%A0%9C%EA%B3%B5