[포스코x코딩온] 웹개발자 풀스택 과정 4주차 회고록 - Express, EJS

이번 블로그는 내가 지금까지 배운 백엔드 과정을 정리하는 시간을 가질 것이다. 

 

1️⃣ npm 사용하기

nodejs를 사용하기 위해서는 필수적으로 npm을 사용해야한다.

백엔드를 할 때 여러 패키지가 필요한데, 이를 기록해주고 정리해주는 관리 역할을 하기 때문이다.

npm은 필수

이러한 정보들은 package.json에 기록된다. (주로 프로젝트에 설치된 패키지 종류를 본다.)

 

1. package.json에 직접 내용을 입력하고 싶을 때

npm init

 

2. package.json을 기본값으로 생성하고 싶을 때

npm init --yes
npm init -y

 

3. 패키지를 설치하고 싶을 때

npm install 패키지 이름
npm i 패키지 이름
// 둘다 가능하다

설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력된다. 

 

그리고 리더님이 말씀해주셨는데 node_modules의 용량이 크기 때문에 파일을 옮기거나 그럴때 node_modules는 제외하고 전달을 한다고 한다.

받은 사람은 package.json의 내용을 보고 npm init을 통해 그 프로젝트에 설치된 패키지를 모두 설치해 준다고 하셨던거 같다.. (기억이 잘 안남🥹)

package.json의 dependencies에 필요한 module 이름이 기록되어 있기 때문에 받는 사람은 npm install을 통해 이 파일에 기록된 module을 한번에 설치 할 수 있다😁

 

2️⃣ 서버(Express) 설치하기

express란 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크이다.

http 모듈을 사용하는 것보다 코드의 가독성과 확장성이 좋아진다는 장점이 있다.

 

설치 방법은 간단하다.

npm init -y 
npm i express	// i = install

 

 

2️⃣ 서버(Express) 사용하기

const express = require("express");
const app = express();
const PORT = 8000;

1. express 모듈을 불러 온다.

2. express 서버 객체인 app객체를 호출한다.

3. 포트 번호를 지정한다.

 

지금까지는 서버를 열기위한 과정이었다. 이제 서버를 열어볼 것이다.

서버를 열기 위해서는 라우터를 설정해줘야 한다.

 

 

1. 라우터 지정하기

app.get("/", function (req, res) {
  res.send("신기하당~");
});
  // get방식으로 통신
  // 첫번째 값 = 도메인 위치 ( 예)localhost:8000/ )
  //   res.send("Hello Express");
  // send => 데이터를 보낼 때 사용, 클라이언트에 응답 데이터를 보낼 때

 

 

get 방식으로 통신하며 도메인 위치를 지정해줘야 한다. 

res.send는 주로 데이터를 보내거나, 클라이언트에 응답 데이터를 보낼 때 사용하지만 리더님이 말씀해주셨을 때의 느낌은  별로 중요하지 않은 듯했다.

 

 

2. 서버 열기

app.listen(PORT, function () {
  console.log(`Listening in port ${PORT}! http://localhost:${PORT}`);
});

서버를 열 때에는 listen()함수를 사용해서 열어주면 된다. (아까 8000번 포트로 설정해줬기 때문에 localhost:8000이 열릴 것이다.)

 

node 파일이름

서버를 열 때에는 gitbash에 위와같이 입력해주면 된다. 

 

서버가 잘 작동한다!

 

잘 나오지만 뭔가 부족하다. 나는 HTML파일을 열고 싶다. 

 

nodejs에서는 EJS템플릿을 사용해서 HTML을 대신한다.

 

🤔 view Engine이란...?

NodeJS에서 사용하는 veiw Engine중 하나이다. 

 

Pugs(좌), EJS(우)

 

view Engine은 쉽게 설명해서 서버에서 js로 만든 변수를 보내줘서 클라이언트에서 활용할 수 있도록 해주는 엔진이다. 

정적인 HTML을 동적으로 만들어줄 수 있다는 뜻인데, 주로 Pugs나 EJS를 사용한다. 

 

부트캠프에서는 EJS를 사용하기 때문에 EJS를 사용할 것이다.

 

⚒️ EJS 설치 방법 & 사용법

 

EJS도  모듈이기 때문에 설치를 해줘야 한다. 

npm install ejs

 

EJS는 쉽게 말하면 JS가 내장되어 있는 html 파일이다. 

정적이였던 html 파일을 서버와 연동되게 동적으로 만들어주는 역할을 한다.

 

백엔드에서 사용할 때는 이 두 코드를 사용한다.

app.set("view engine", "ejs");
app.set("views", "./views");

 

첫번째 코드는 view engine을 ejs로 사용한다는 뜻이고

두번째 코드는 경로를 설정해준다는 뜻이다. view파일을 만들때에는 주로 views폴더에 생성하기 때문에 미리 경로를 설정해둔 것이다. 따라서 나중에 ejs 파일을 사용 할 때에는 경로를 제외하고 파일명만 쓰면된다.

 

이건 좀 개인적으로 헷갈렸던 것인데 

두번째 코드의 첫번째 인자는 views 고정이고 두번째 인자 ./views는 경로 설정이라서 내가 만든 ejs의 폴더 명을 적으면 된다.  ( 앞에는 뭐고 뒤에는 뭔지 헷갈렸음..🥲)

 

경로 설정 모습

🏫 EJS 문법

 

EJS 에서는 <%%> 를 사용해서 자바스크립트 문법을 사용 할 수 있고  <%= %>를 사용해서 서버에 저장된 변수를 불러올 수 있다.

<% %> -> 자바스크립트 문법을 사용 할 때
<%= %> -> 서버의 데이터를 가져올 때

 

예를 들어

// 백엔드
app.get("/", (req, res) => {
  console.log(req.body);
  res.render("index", { title: "폼 전송 실습" });
});

// 프론트 엔드
<h1>
    <%= title %>
</h1>

이런식으로 서버에서 보낸 데이터를 받을 수도 있고 

 

<select name="birth_year" id="birth_year">
    <% for(let i=1990;i<2010;i++) {%>
        <option value="<%=i%>">
            <%=i%>
        </option>
    <% } %>
</select>

ejs에서 프론트엔드에서 스스로 자바스크립트의 값을 출력할 때도 사용된다. 

 

🔥백엔드 코드

const express = require("express");
const app = express();
const PORT = 8000;

// view engine
app.set("view engine", "ejs");
app.set("views", "./views");

// 라우터 설정
app.get("/", function (req, res) {
  res.render("index");
});

// 포트 열기
app.listen(PORT, function () {
  //   console.log(`Listening in port ${PORT}! http://localhost:${PORT}`);
});

 

여기에 있는 코드는 필수로 쓰이는 것들이라 꼭 이해하고 외우도록 하자!

순서도 중요하다.

 

모듈 설치 - view engine 설정(미들웨어 설치) - 라우터 설정 - 포트 열기