[Express, ejs 모듈] 노드 모듈을 이용한 웹 서버 구축

npm

• Node Package Manager ( https://www.npmjs.com/ )
• 노드 패키지를 관리해주는 틀
 

node 패키지

- Npm에 업로드 된 노드모듈
- 패키지들 간 의존관계가 존재

 

npm 사용하기

: package.json을 설치하기 위해 필요한 npm

 

npm init 

• 프로젝트를 시작할 때 사용하는 명령어
• package.json에 기록될 내용을 문답식으로 입력한다. 

(모듈은 어떤 걸 사용하는지에 대한 것이 자동으로 생성)

npm init --yes
• package.json이 생성될 때 기본값으로 생성된다. 

(이름을 변경하지 않고 모든 것을 기본 값으로 넣겠다)

npm install 패키지 이름
• 프로젝트에서 사용할 패키지를 설치하는 명령어
• 설치된 패키지의 이름과 정보는 package.json의 dependencies 에 입력된다.

 

 

package.json

• 패키지들이 서로 의존되어있어, 문제가 발생할 수 있는데 이를 관리하기위해 필요한 것
• 프로젝트에 대한 정보와 사용중인 패키지 이름 및 버전정보가 담겨있는 파일 (내용기록용)

 

“name” : 패키지이름
“version” : 패키지의 버전
“main” : 자바스크립트 실행파일 진입점 ( 문답식에서의entry point )
“description”: 패키지에 대한 설명
“scripts” : npm run 을 이용해 정해놓는 스크립트 명령어
“license”: 해당 패키지의 라이센스

 

---

 

Express

• 웹 서버를 생성하는것과 관련된 기능을 담당하는 프레임워크

(모듈을 다운받아서 이 프레임워크를 사용한다.)

• 웹 애플리케이션을 만들기 위한 각종메소드와 미들웨어 등이 내장되어 있다.
• http 모듈 이용시 코드의 가독성↓ 확장성↓
→ 이를 해결하기위해 만들어진 것이 Express 프레임워크

 

Express 설치

(http는 내장이었지만 express는 따로 설치해야한다.)

• npm_modules 가 만들어지며 express에 관련된 폴더가 생성 

• package.json의 dendencies 에 express 기록

 

.gitignore

다운받은 노드모듈과 package-lock.json은 기록이 필요없는 파일이므로 .gitignore한다.

노드모듈들은 깃헙에 올리면 용량만 크고 다운받기도 쉬우므로, 기록되지 않아도 된다.

- 정상적으로 무시되면 회색처리가 된다.

- **/ 어떤폴더에서든지 다 무시하겠다는 의미로, 현재위치에서 무시라면 /node_modules라고 적는다.

 

Express 사용하기 - 메소드

express()

• Express 모듈이export 하는 최상위 함수로, express application을만듦

• app 객체
- Express () 함수를 호출함으로써 만들어진 express application

- get 이라는 메소드 : http 요청을 처리해준다. (클라이언트 to server)

 

• app 객체의 method
• HTTP 요청을 각 요청에 맞는 경로로 전송하는 메소드 (라우팅)

// express 를 통해 웹서버 여는 코드 작성
// express를 가져와서 사용하겠다.
const express = require("express");
// express로 객체 만들기 (함수처럼 사용)
const app = express(); //필요한 메소드가 app 객체에 담긴다.
//어떤 포트를 열 건지 정의
const port = 8080; //보통 8000, 8080, 3000 많이 사용한다.


// get메소드에 도메인을 제외한 주소 작성, 인자는 두개를 필요로한다. (라우터, 함수) 이때 이 함수에는 매개변수가 필요하므로 반드시 넣는다.
app.get('/', (req, res)=> { //request 요청, response인 응답의 줄임말 req는 클라이언트 to 서버, res는 서버 to 클라이언트
    res.send("hello Express!"); //메세지를 보내는 send 메소드 사용하기, 괄호 안의 메세지를 렌더링한다. (서버가 클라이언트에게 응답으로 보내는 메세지를 보낸다)
});

// 뒤에 다른 게 들어가는 주소라면 8080 이후의 문자등을 적는다.
// localhost:8080/test 라면 '/test'
app.get('/test', (req,res) =>{
    res.sendFile( __dirname + "/views/index.html" ); //sendfile에 들어올 경로는 무조건! 절대경로가 작성되어야한다.이때 __dirname을 쓰면 알아서 이 변수가 뒤 파일의 절대 위치를 찾아준다.
}) // __dirname : C~~~~~/index.html

//localhost:8080/ejs에 접속하게 하기
app.get('/ejs', (req,res) =>{
    res.render("index"); //render라는 메소드를 통해 원하는 view를 가져올 수 있다. 이때, view engine이 설정되어 있으므로 뒤에 확장자(.ejs)를 붙이지 않아도 찾아간다. 
})

app.listen( port, ()=> { //listen이라는 메소드를 통해 웹서버를 연다. 이때 인저는 두개 (포트번호, 함수)
    console.log("server open :", port);
}); // 서버는 열렸는데, 이 줄만 있으면 내용 없음

//index.js는 서버를 건드리는 것이므로 수정사항이 있을 때마다 서버를 껐다켜야하는데, html 파일 즉 프론트 언어쪽을 수정시에는 새로고침만 해도 변경사항이 적용된다.

HTTP method

이렇게 다양한 메소드가 올 수 있다. app.get처럼

//index.js는 서버를 건드리는 것이므로 수정사항이 있을 때마다 서버를 껐다켜야하는데, 
html 파일 즉 프론트 언어쪽을 수정시에는 새로고침만 해도 변경사항이 적용된다.

 

express이용시 static 파일을 읽을 수 있도록 설정을 저장해줘야 한다.

 

//html에서 클라이언트가 접근할 수 있는 권한을 만들어주어야한다.

이때 사용하는 것이 미들웨어이다.  

//html에서 클라이언트가 접근할 수 있는 권한을 만들어주어야한다. == 미들웨어
//미들웨어 등록은 app.use를 사용한다. /public은 가상경로, 그 다음 들어오는 인자는 express.static안에 감싸서 넣어준다. 
//기본구조 app.use("/가상경로", express.static("파일이름")); 

app.use("/public", express.static("static")); //express 안에 static메소드를 사용해 static을 등록 이때 "static"은 실제 존재하는 폴더이름을 적는다.
//static이라는 실제 존재하는 폴더에 public이라는 경로로 접근할 수 있도록 함. 
//src="/public/img/cat1.jpeg" (즉, ststic이 아닌 가상경로 public을 이용해 접근하게 된다.)
//그 아래 하위파일들에 이제 모두 접근이 가능하다!
//이때 편하게 하려면 가상경로도 static으로 만들면 된다. app.use("/static", express.static("static"));

//app.use(express.static("static")); 사용 시 바로 이미지에 접근 가능하다.

---

미들웨어

• 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
• 서버와 클라이언트를 이어주는 중간작업
• use() 를 이용해 등록할 수 있다.

 

미들웨어- static

• 이미지, css 파일 및 Javascript 파일과 같은 정적파일 제공
• Express 에 있는 static 메소드를 이용해 미들웨어로 로드

 

 

---

템플릿 엔진

EJS 템플릿

• 템플릿 엔진
• 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈

 

ejs 사용시 장점

- ejs를 사용하면 전체적으로 html 파일을 작성하듯이 하면 되며, 다양한 기능을 사용할 수 있다. 

- js코드가 html 내부에 내장되게 된다. 

그냥 js를 html 바디태그 안에 내장시킬 수 있다. (오른쪽을 왼쪽으로 가능하게!)

ejs

• Embedded Javascript 의 약자로, 자바스크립트가 내장 되어 있는 html 파일
• 확장자는.ejs

그냥 js를 html바디태그 안에 내장시킬 수 있다. (오른쪽을 왼쪽으로 가능하게!)

 

ejs 템플릿

외부 모듈이므로 설치하기

 

 

//ejs 모듈 설치 후에
app.set('view engine', 'ejs'); //view engine으로 ejs템플릿 쓸 것이다. view가 모여있는 기본 디렉터리 = views

//localhost:8080/ejs에 접속하게 하기
app.get('/ejs', (req,res) =>{
    res.render("index"); //render라는 메소드를 통해 원하는 view를 가져올 수 있다. 이때, view engine이 설정되어 있으므로 뒤에 확장자(.ejs)를 붙이지 않아도 찾아간다.
})

    <% for(var i =0; i<5; i++) { %> 
        <div>CAT-Holic</div>
    <% } %>

    <% if(true) { %>
    <%} else {%>

    <%} %>

사용시 주의, 

if 등 중괄호를 통해 구분지어주는 구간이 함께 있어야 한다. <% %>가 있는 곳에

 

ejs 문법 사용하기

• 무조건 자바스크립트 코드가 들어가야 하고, 줄바꿈을 할 경우에는 새로운 <% %> 를 이용 해야 한다.
• 변수의 값을 출력할 때 사용
• 다른 view 파일을 불러올 때 사용

    <!-- 숫자가 반복되게 만들기, 변수추가방법 -->
    <% for(var i =0; i<5; i++) { %> 
        <div>CAT-Holic<%=i+1%> </div>
    <% } %>
        <!-- = 뒤에 있는 변수 및 문자는 바로 나오게 된다. -->
    <div style="color:aquamarine">        
        <%="안녕"%> </div>
    <!-- 문자열 안에 태그가 들어가는 경우 -->
    <!-- 즉 출력하기 위해 = 사용, but 태그를 인식하지 않음 (문자열 처리)-->
    <div style="color:rgb(233, 175, 88)">        
        <%="<span style='color:blue;'>안녕</span>"%> 하세요 </div>
    <!-- 이때 - 사용, 그럼 태그를 인식함 -->
      <div style="color:rgb(233, 175, 88)">        
     <%-"<span style='color:blue;'>안녕</span>"%> 하세요 </div>

     <!-- ejs 내장함수 include()사용하기 ejs파일을 ejs로 불러올 수 있다는 장점-->
     <!-- 파일이 같은 경로이므로, 상대경로로 파일이름만 작성하여 불러온다. -->
     <!-- 이를 이용하면 navbar를 불러오는 식의 사용이 가능하다. footer를 가져와서도 이 파일로 다 불러올 수 있다! -->
     <%-include("test.ejs")%>
     <!-- 이때 -를 써야 ejs 안의 태그가 인식이 되게 된다. =을 쓰면 그냥 태그도 그대로 출력된다. -->

// 이 코드는 index.js에서 작성중

app.get('/ejs', (req,res) =>{
    res.render("index", { //render한 다음 index파일을 보여주겠다라는 의미에서, (옵션)두번째 인자를 넘겨준다면 객체(딕셔너리) 형태로 넘겨주면 된다.
        title : "index 페이지입니다😎",
        data : ["a", "b", "c"]
    }); //이제 이 모든 데이터는 index.ejs로 넘겨주었다. 가서 활용하면 된다.
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%-title%></title> 
    <!-- index.js에서 ejs로 보내준 값을 사용할 수 있게 되었다. 해당 키가 index.ejs에서 사용하는 변수가 되므로 title을 변경한다.-->
</head>
<body>
    <h1>ejs로 만들다!</h1>
    <img width="500[x;" height="500px;" src="/static/img/cat1.jpeg">

    <% for(var i = 0; i< data.length; i++) { %> 
        <div>CAT-Holic<%=data[i]%></div>
    <% } %>
    </body>
    </html>

 

실습시 참고

https://alexband.tistory.com/16

6장 express 정적파일 컨트롤 + 뷰시스템 (ejs)