Express 모듈

2022. 11. 23. 22:51ㆍWEB개발/TIL

반응형

npm(Node Package Manager)

: 노드 패키지(npm에 업로드 된 노드 모듈)를 관리해주는 틀

  • 패키지들 간 의존 관계 존재

 

npm 사용하기

터미널 열기

npm init  //프로젝트를 시작할 때 사용하는 명령어
  • package.json(프로젝트에 관한 내용을 기록한 파일)에 기록될 내용을 문답식으로 입력

package.json파일 생성

npm init —yes  //package.json파일을 기본값으로 생성
npm install 패키지 이름  //프로젝트에서 사용할 패키지를 설치
  • 설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력됨

 

 

package.json

패키지들이 서로 의존되어 있어, 문제가 발생할 수 있음

→  이를 관리하기 위해 필요한 것

  • 프로젝트에 대한 정보와 사용중인 패키지 이름 및 버전 정보가 담겨있는 파일

 

파일 내용 살펴보기

package.json 파일 내용

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

 

 

 

 

 

 

Express 모듈

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

  • 웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있음
미들웨어?
: 서로 다른 애플리케이션이 서로 통신하는데 사용되는 소프트웨어
  • http 모듈 이용 시 코드의 가독성과 확장성이 낮음

      →  이를 해결하기 위해 만들어진 것이 Express 프레임워크

 

 

Express 설치하기

https모듈은 내장 모듈이기 때문에 따로 설치 과정이 필요 없고 바로 사용 가능

그러나, express 모듈은 내장 모듈이 아닌 외부 모듈이기 때문에 npm을 사용하여 express를 설치해야 함

  • 다운받은 모듈 정보는 package.json에서 확인 가능

 

터미널 열기

npm install express  //express 모듈 설치

terminal에 입력

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

express모듈 설치 확인

>> > package.json의 dependencies에 express 기록됨

npm 및 모듈을 설치해서 생긴 node_modules와 package-lock.json파일은 git에 올리지 않아도 되는 파일이기 때문에 .gitignore에 파일명 입력해놓기!

.gitignore에 업로드 무시할 파일 입력

  • .gitignore > **/파일명 입력  → 어떤 폴더던지 입력한 파일명과 동일한 파일명은 다 무시

 

 

Express 사용하기

//express사용을 위한 기본 문법
const express = require("express");
const app = express(); 
const port = 8080;  //1023이상의 숫자입력
app.listen(port, () => {  //웹 서버 여는 코드 작성
    console.log("server open: ",port);
})
  • express(): express application을 만듦
  • app 객체: app객체가 express함수를 받음
  • app객체의 method(app.method())

      : http요청을 각 요청에 맞는 경로로 전송하는 메소드(라우팅)

요청? 클라이언트가 서버에게 보내는 요청
라우팅? 최적의 경로를 찾는/선택하는 과정(라우트: 경로)

app.method() 참고

app.method() 작성 예시(app.get() 사용)

// "localhost:8080/" 열기
app.get('/', (req,res) => {
    //주소에 들어갔을 때 어떤 행동을 할 것인지 코드 입력
    res.send("hello express");
})

→ “localhost:8080/”에 들어가면 화면에 hello express 문자 나타남

 

 

 

 

미들웨어

: 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것

  • 서버와 클라이언트를 이어주는 중간 작업
  • use함수를 이용해 등록함

 

미들웨어를 사용하는 이유?

express로 서버를 만들면, static폴더(정적파일이 들어있는 폴더)를 인식할 수 있도록 설정을 해주어야 함

설정을 하지 않을 경우, static폴더를 인식하지 못해 그 안에 들어있는 파일을 못 찾음

//index1.html 파일 생성
<!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>study1</title>
</head>
<body>
    <img src="../static/img/풍경.jpg">  //static/img폴더 내 jpg사진 가져옴 
</body>
</html>
//views폴더에 있는 index1.html파일을 화면에 나타내고자 함
app.get('/study1', function(req,res) {
    res.sendFile(__dirname+"/views/index1.html");
})
  • sendFile()은 절대경로를 입력해야 함!

결과: 

/static/img/풍경.jpg 경로를 인식하지 못함

 

 

 

 

 

 

미들웨어 - static

: 기본 제공 미들웨어 함수인 express.static함수는 이미지, css파일 및 javacsript파일과 같은 정적 파일을 클라이언트에게 제공

//app.use('미들웨어 사용 경로',미들웨어 함수);
//express.static('정적폴더명')
app.use('/static', express.static('static'));
  • app.use(): 클라이언트의 모든 요청에서 미들웨어 실행

    >> /staitc에서의 모든 요청에 express.static함수 실행

  • express.static(): 지정한 정적 폴더 내 정적 파일 제공

    >>  static폴더 내 정적 파일 클라이언트에게 제공

 

 

(정적)파일 깨짐 오류 수정하기

1) 미들웨어 함수 실행

app.use('/static',express.static('static'));
app.get('/study1', function(req,res) {
    res.sendFile(__dirname+"/views/index1.html");
})

2) index1.html의 이미지 파일 경로 수정

  • “/미들웨어 사용경로/img/이미지명.jpg”
<!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>study1</title>
</head>
<body>
    <img src="/static/img/풍경.jpg" width="100%" height="100%">
</body>
</html>

express.static함수 사용

결과:

경로 인식 오류 해결!

 

 

 

 

 

 

 

 

 

 

참고)

views 폴더: 프론트엔드(html, ejs 등) 언어 파일을 모아놓은 폴더

< 포트를 연결하고 끊는 기준 >

  • 백엔드 언어(js 등)를 수정할 때는 js를 나갔다 들어와야 함.
  • 프론트엔드 언어(html, ejs 등)를 수정할 때는 js를 나가지 않아도 화면을 새로고침하면 수정이 돼 있음.

< 정적 파일과 동적 웹 페이지 >

  • 정적 파일

: javascript, css, image 등 웹 서비스에서 사용하기 위해 미리 서버에 저장해 놓은 파일

> 파일 자체가 고정되어 있고, 서비스 중에도 추가되거나 변경되지 않음

  • 동적 웹페이지

: 웹 서버는 클라이언트의 요청(req)을 해석하여 데이터를 가공한 후 웹 페이지를 보냄

> 고정값이 있는 정적 파일과 다르게 동적 웹 페이지는 클라이언트의 요청에 따라 다양한 화면을 제공함

 

 

 

 

 

템플릿 엔진

: 템플릿 양식(html)과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서(입력 자료와 템플릿 양식이 합성된 html)를 출력

 

 

EJS 템플릿

express 모듈을 사용할 경우, EJS 템플릿을 사용하면 코드 정리가 보다 편리해짐

 

ejs(Embedded JavaScript) 파일

: javascript code가 내장되어 있는 html파일(html과 작성법 같음)

  • 확장자는 .ejs
  • body태그 내에서 script코드를 작성할 수 있음

 

EJS 템플릿 사용하기

1) 터미널에서 ejs설치하기

npm install ejs

2) js파일에서 ejs 템플릿 설정하기

app.set('view engine','ejs');
// 클라이언트에게 보낼 응답 웹 문서를 ejs로 설정

3) 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>study2(ejs)</title>
</head>
<body>
    <img src="/static/img/풍경.jpg" width="500" height="300">
    <% for(var i=1; i<3; i++) { %>
        <p>사진이 그림같다<%=i%></p>
    <% } %>
</body>
</html>

4) 작성한 파일 렌더링

app.get('/study2', function(req,res) {
    res.render('index2');
})
  • res.render(’파일명’): 클라이언트에게 ejs파일을 제공

 

결과:

ejs template사용결과

 

 

 

 

 

 

 

 

 

 

ejs 문법

<% %>

: 무조건 javascript code가 들어가야 함.

  • 줄바꿈을 할 경우 새로운 <% %> 를 이용해야 함.

<%=변수명%>

: 변수의 값을 출력할 때 사용

<%-include('파일명')%>

: 다른 view파일을 불러올 때 사용

 

<  예시  >

app.set('view engine','ejs');
app.get('/study3', function(req,res) {
    res.render('index3', {
        title: 'study3',
        data: ['안녕','반가워','정말로']
    });
})
  • res.render(’파일명’,’변수(딕셔너리형태)’)

: render함수의 두 번째 인자는 선택사항이며, 사용할 경우 딕셔너리 형태로 작성

> 렌더링 할 ejs파일에서 두 번째 인자의 key값을 변수명으로 작성하여 사용

//index3.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>
</head>
<body>
    <%-include('index2')%>
    <% for(var i=0; i<data.length ; i++) { %>
        <p style="font-weight: bold;"><%=data[i]%></p>
    <% } %>
    <%-"<span style='color: orange;'>방가방가햄토리</span>"%>
</body>
</html>
  • <%-”태그”&>

: ‘-’를 사용하면 태그를 인식함(’=’는 태그를 인식하지 못함)

 

 

 

 

반응형

'WEB개발 > TIL' 카테고리의 다른 글

Java(Array, Class)  (0) 2023.03.06
Java(개발환경구축, 프로젝트 생성, 기본 문법)  (0) 2023.03.06
http모듈  (0) 2022.11.23
fs모듈(FileSystem Module)  (0) 2022.11.23
Callback과 Promise  (0) 2022.11.23

관련글

티스토리툴바