지난 글에서는..
지난 글에서는 node.js 설치하고 app.js 파일을 만들어 실행하는 것까지 했다. 이번 글에서는 페이지를 만들어 서버에 올리는 것을 하려고 한다.
[1][0] 페이지를 올리기 위해 필요한 것 - express, ejs
서버를 구동하려면 http클라이언트나 웹프레임워크가 필요하다. http를 쓰는 것보다는 프레임워크가 편하니 프레임워크를 사용할 것이다. 그 중에서도 express를 이용할 것이다.
express는 그냥 쓸 수 있는 것이 아니다. app.js를 모셔놓은 폴더에 express 모듈을 설치해줘야 한다. 또 어디에서 다운받아 설치하냐고? 아니다. 콘솔창에서 간단히 설치할 수 있다. cmd를 켜고 프로젝트 폴더로 이동한 뒤 다음과 같이 쳐보자.
// cmd cd desktop/Yame.js //프로젝트 파일 경로 npm install express
그러면 npm이 자동으로 다 설치해준다!
npm은 node.js package manager의 약자로 node.js를 설치할 때 자동으로 따라오는 패키지 관리 프로그램이다. 저렇게 모듈이 필요할 때 명령어를 입력하면 자동으로 찾아서 설치, 업데이트가 가능하다. 물론 인터넷은 연결해야 한다.
폴더로 가보면 못보던 파일들이 생겼을텐데, 건들지 말자. 모듈과 모듈 정보를 담은 json파일이다.
express를 설치 했으니 ejs도 설치해보자. ejs는 Embeded JavaScript의 약자로 서버에서 가지고있거나 보낸 변수를 꺼내서 사용하게 하는 html 템플릿이다. 쉽게 말하면 html 안에 Javascript 코드를 심어서 부분부분 동적으로 생성할 수 있게 하는 것이다.
// cmd npm install ejs
이제 ejs가 html을 대신하는 것이다. 정적으로 웹을 만들때 test.html로 코딩해 실행시켰다면 이제 test.ejs 안에 코딩하고 서버보고 저거 찾아 열라고 시키면 되는 것이다.
[1][1] 페이지를 올려보자
우선, 폴더부터 만들어보자. 프로젝트 폴더에 views라는 폴더를 만든다. 이제 기존 html을 대체하는 ejs파일은 모두 views 안에 들어간다. 왜냐하면 view engine이라는 템플릿 엔진을 이용해 ejs를 이 서버에서 템플릿으로 사용할 것이다. 라고 전해주면 이 엔진은 저 ejs파일을 무조건 views라는 이름의 폴더에서 찾기 때문이다.
views 안에 테스트 할 ejs 파일도 만들어주자.
이제 app.js를 코딩할 모든 준비가 되었다. app.js를 열어 다음과 같이 코딩해보자.
// app.js
const express = require("express"); // express 모듈 요청
const ejs = require("ejs"); // ejs 모듈 요청
const app = express(); // app을 express 프레임워크로 킨다
app.set("view engine", "ejs"); // app에 view engine을 설치, ejs를 템플릿으로
app.use(express.static(__dirname + '/')); // views 폴더 경로는 프로젝트 폴더.(__dirname이 폴더 위치)
app.get("/", function(req, res){
console.log("안녕 테스트 페이지!");
res.render("test1", {});
})
app.listen(3000, function(){
console.log("실행중...");
});
require은 이 javascript 파일이 해당 모듈을 쓰겠다고 요청하는 것이다. 그러니까 const express 안에는 express 요청이 들어가고 ejs 안에는 ejs 모듈 요청 정보가 들어가는 것이다.
app.get은 주소창에 GET 방식으로 요청을 받았을 때 처리할 사항을 나타낸다. 첫번째 인자는 도메인 뒤에 붙는 주소, 두번째 인자는 그 주소로 들어왔을 때 처리할 사항을 적는 함수를 준다.
app.get안에 있는 function(req, res)에서 req는 요청 오브젝트, res는 응답 오브젝트를 나타낸다. 그러니까 req는 클라이언트에서 요청한 사항을 가지고 있는 오브젝트이고, res는 서버에서 클라이언트로 응답을 보낼때 쓰는 오브젝트이다.
내가 친 코드에서는 res.render를 볼 수 있는데, 응답 오브젝트 res로 render, 즉 페이지를 그리는 응답을 클라이언트로 보내는 것이다. render함수는 첫 번째 인자로 페이지 파일명, 두 번째 인자로 보낼 값들을 object 형식으로 준다.
단, 파일명을 적을 때는 확장자명은 뺀다. 저 위에 set 함수의 두 번째 인자인 "ejs" 확장자를 가진 파일만 읽어내기 때문이다.
app.listen 함수는 js파일을 실행 후 계속 대기하면서 클라이언트에서 요청을 받는 함수이다. 저번 글에서는 node app.js를 하면 실행 결과가 나오고 바로 종료되었지만, listen 함수를 넣으면 강제종료나 오류가 있기 전까지는 꺼지지 않는다. 첫 번째 인자는 포트번호, 두 번째 인자는 실행하는 동안 처리할 함수이다. 나는 실행중인 것을 나타내기 위해 "실행중..." 이라는 로그를 콘솔창에 나타나게 했다. 이 listen 함수를 넣음으로 서버의 역할을 하게 되는 것이다.
[1][2] 서버를 실행해 확인해보자
// cmd node app.js
서버가 실행되었다!
서버가 실행되었으니, 한 번 주소를 치고 들어가서 확인해보자. 우리는 도메인이 없지 않냐고? 그냥 로컬에서 서버를 구동하면 우리의 도메인 주소는 localhost 이다. 아까 app.listen의 첫 번째 인자가 3000이었으니 localhost:3000 이 우리의 도메인이 된다.
나의 test1.ejs 코드는 이렇다.
<html>
<head>
<title>TESTESTEST</title>
</head>
<body>
<h1>테스트중입니다</h1>
</body>
</html>이제, localhost:3000/으로 들어가보자!
잘 된다!
이번 글에서는 우리의 app.js가 서버구실을 조금이나마 하게끔 만들었다. 저 app.js 코드에서 app.get 코드를 늘려서 여러 디렉토리를 만들 수 있다. 그걸 다음 글에서 해보도록 하겠다.
'node.js' 카테고리의 다른 글
| [node.js][3] ejs 사용설명서 (8) | 2019.02.21 |
|---|---|
| [node.js][2] GET과 POST 써보기 (3) | 2019.01.17 |
| [node.js][0] 야매로 시작하기 (0) | 2019.01.09 |
