[조코딩 웹 개발 5주 완성] 5주차 정리 - EJS, Form 태그 이용해서 Get/Post 요청 보내는 방법

EJS

Embedded JavaScript templating

 

<%= EJS %>

 

HTML + JavaScript

 

 

 

<실습>

 

1. vscode를 열고 새 폴더에 index.js 파일을 만든다.

 

 

 

2. npm 사용을 위해 터미널에 npm init을 입력한다.

 

 

 

3. (웹 백엔드 만들 때 사용하는 프레임워크인) express를 설치한다.

 

https://www.npmjs.com/package/express

express

 

 

 

4. ejs를 설치한다.

 

https://www.npmjs.com/package/ejs

ejs

 

⬇

설치된 모습

 

5. 모듈의 사용법 알아보기

ex) 구글에 node ejs example과 같은 형식으로 검색 

https://www.digitalocean.com/community/tutorials/how-to-use-ejs-to-template-your-node-application

 

➡ 사이트에 있는 예시 코드 복사 붙여 넣기

 

 

 

코드 설명

 

ejs라는 view engine을 사용할 것이다라는 의미

 

* view engine : html 파일을 따로 만들어서 그것을 첨부해서 보낼 수 있음

➡ ejs 파일을 만들어서 그것을 응답에 실어서 보낼 수 있음

 

 

6. 코드에 맞게 폴더 만들어주기(코드도 조금 수정)

 

 

index를 render하고 view engine으로 설정한 index를 보내준다?

 

 

7. index.ejs 파일 안에 html 코드를 작성해준다. (ejs도 결국 html이므로)

 

 

 

8. node index.js를 통해 실행해보면 다음과 같이 나온다.

 

 

9. ejs 파일에 JavaScript 추가해보기

 

 

html에서는 안되지만 ejs 파일에서는 <%=%>를 통해 간단하게 JavaScript 코드를 넣을 수 있다.

 

 

어떤 값을 response에 담아서 보낼 때 대괄호 안에 객체를 담아서 보내면 ejs 파일에서 받을 수 있다.

 

 

* JavaScript 활용해보기

 

 

 

 

 

 

 

Form 태그 이용해서 Get/Post 요청 보내는 방법

 

Get 방식

 

 

 

index.ejs(프론트엔드)

action을 create라는 주소로 get 방식으로 요청을 보냈을 때 content라는 값이 전달이 되도록 함.

 

index.js(백엔드)

get 방식의 create라는 주소로 요청을 보내면 hi라는 글자가 뜨도록 함.

 

 

➡ form 태그를 이용해서 어떤 주소로, 어떤 방식으로 보냈을 때 input에 있는 값이

app.get("/create", function (req, res) {
  res.send("hi");
});

으로 잘 전달이 되었는지 확인할 수 있다.

 

 

 

 

 

 

Post 방식

 

 

Get방식과 달리 주소창에 값을 보내지 않는다. 내부적으로 보내는 것이다.

 

 

body에 있는 것을 어떻게 읽어야 하는지 기본 설정을 위해 express 문서에 있는 코드를 가져와 추가해준다.

https://expressjs.com/ko/4x/api.html#req.body

 

 

기본 설정 안하면 undefined라고 나옴