01. 홈 만들기 / express, nunjucks

우선 눈에 보이는 홈부터 만들자.

html에 대해서는 html 목록에 있는 기존 글들을 보면 된다.

나는 꾸미는 것보다 기능 구현을 우선시 할것이므로 이대로 진행하겠다.

 

 

index.html 만들기.

<h1>
	<!-- Logo란 글자를 누르면 /으로 이동하도록 링크를 걸어놓음 -->
	<a href="/">Logo</a>
</h1>

<ul>
    <li>
      <!-- 게시판 가기를 누르면 /list로 이동한다 -->
      <a href="/list">게시판 가기</a>
    </li>
</ul>

 

저장을 했다면, 저장한 html 파일을 끌어서 인터넷창에 던져놓자.

 

그럼 이런 화면이 보인다.

아주 잘했다. html 파일이 굴러간다는 소리다.

이제 직접 인터넷창에 던지지 않고도 코드로 실행시켜보도록 하겠다.

 

 

우선 인터넷 창이 굴러가려면 서버가 응답해야하고 이를 위해서는 express와 nunjucks를 실행시켜야한다.

express와 nunjucks에 관한 설명은 다음글을 참고하자.

https://hancoco.tistory.com/78

[220128] express 모듈로 서버 시작하기, 요청헤더, 응답헤더, form과 연결하기

https://hancoco.tistory.com/73

[220128] nunjucks 설치, 세팅, 사용

 

 

 

 

---

1. server.js파일을 만들고, express와 nunjucks를 가져온다.

//express를 쓰기 위한 세팅
const express = require('express');
const app = express();

//nunjucks를 쓰기 위한 세팅
const nunjucks = require('nunjucks');
app.set('view engine', 'html');

//views라는 폴더 안에 있는 파일들을 실행할거란 소리이므로 views라는 폴더를 만들고
//그 안에 index.html 파일을 만들었다.
nunjucks.configure('views', { express: app });

//header body로 오는 세팅을 읽기 위한 세팅
app.use(express.urlencoded({ extended: true }))

 

 

 

2. 서버에게 내가 있다고 알리기 위해 메세지를 보내고, 내가 알 수 있도록 console.log로 메세지를 띄우게 한다

//브라우저의 요청을 항시 듣기위한 listen
app.listen(3000, () => {
  console.log('sever start')
})

 

 

 

3. 서버와 연결이 되었을 경우 위에서 만들었던 index.html을 실행시키기 위해서 연결시킨다.

//홈 url의 요청에 index.html을 넘겨주는 app.get
app.get('/', (req, res) => {
  res.render('index')
})

 

 

 

4. 서버 실행을 위해서 vscode 터미널에서 node server.js명령어를 입력한다.

server.js를 실행시켜주는 명령어.

그리고 http://localhost:3000/을 입력하면 정상적으로 화면이 떠있는 것을 확인할 수 있다.

 

 

---

express와 nunjucks의 흐름을 이해하려면 다음 글을 참고하자

https://hancoco.tistory.com/92

[220210] 템플릿 엔진, nunjuck란?