EJS 템플릿에 데이터 전달 및 그 반대로 전달 — 초보자 가이드-JS 튜토리얼-php.cn

EJS 템플릿에 데이터 전달 및 그 반대로 전달 — 초보자 가이드

DDD

풀어 주다： 2024-09-14 14:30:10

원래의

859명이 탐색했습니다.

안녕??‍♂️ ! 이제 막 EJS(Embedded JavaScript)를 시작했고 서버와 EJS 템플릿 간에 데이터를 전달하는 방법이 궁금하다면 잘 찾아오셨습니다 ! 저는 이번 주 내내 EJS에 대해 배우고 있었는데, EJS에 데이터를 전달하는 방법과 데이터 작업 방법에 대해 제가 배운 내용을 공유하고 싶었습니다.

서버에서 EJS 템플릿으로 데이터를 전달하는 방법

따라서 서버(Node.js + Express)에서 EJS 템플릿으로 데이터를 전송하려는 경우 매우 간단합니다. res.render() 메소드를 사용하면 서버에서 .ejs 파일로 데이터를 보낼 수 있습니다.

방법은 다음과 같습니다.

res.render("ejs_file_name", { data });

로그인 후 복사

이 예에서는 EJS 파일(index.ejs라고 가정)을 렌더링하고 데이터 개체를 템플릿에 전달합니다.

그런 다음 EJS 템플릿에서 이 데이터를 사용하려면 다음과 같이 액세스하면 됩니다.

<%= data %>

로그인 후 복사

간단한 분석은 다음과 같습니다.

res.render()는 데이터를 템플릿으로 보내는 역할을 담당합니다.
EJS의 <%= data %> 태그에는 전달된 데이터가 표시됩니다.

데이터 이름(이 경우 데이터와 같은)이 두 위치(서버 코드와 EJS 템플릿)에서 동일한지만 확인하세요. 일치하지 않으면 상황이 이상해집니다!

잠깐… 데이터가 없으면 어떻게 되나요? ?

여기에 까다로운 부분이 있습니다. EJS는 사용하기 전에 데이터가 존재하는지 확인하지 않습니다. 데이터가 항상 존재하는 것처럼 사용합니다. 따라서 존재하지 않는(또는 제대로 전달되지 않은) 일부 데이터에 액세스하려고 하면 EJS에서 오류가 발생하고 앱이 중단될 수 있습니다. 이제 막 시작하는 경우에는 매우 실망스러울 수 있습니다!

Passing Data to EJS Templates and Vice-Versa — A Beginner

하지만 걱정하지 마세요. 간단한 해결 방법이 있습니다. 사용하기 전에 데이터가 존재하는지 확인할 수 있습니다. 다음과 같이 if 조건 안에 데이터를 래핑할 수 있습니다.

<% if (locals.data) { %>
  <%= data %>
<% } else { %>
  No data available!
<% } %>

로그인 후 복사

이렇게 하면 문제가 발생하거나 데이터가 전달되지 않더라도 앱이 중단되는 일이 발생하지 않습니다. 대신 대체 메시지를 표시하거나 다른 조치를 취할 수 있습니다.

? 프로 팁: 사용하기 전에 항상 템플릿에 데이터가 있는지 확인하세요. 이렇게 하면 많은 어려움을 겪을 필요가 없습니다!

챌린지 타임: EJS에서 서버로 데이터 전달

이 학습 여정을 재미있게 만들기 위해 저는 사용자 이름을 입력으로 사용하고 이름에 몇 글자가 있는지 알려주는 간단한 프로젝트를 만들기로 결정했습니다. 간단하죠? 제가 한 방법은 다음과 같습니다.

입력 데이터 가져오기:
사용자의 성과 이름을 사용하는 HTML 양식을 사용했습니다.
서버로 데이터 보내기:
POST를 이용해 입력 데이터를 서버로 보낸 뒤, 이름의 글자수를 계산해봤습니다.
처리된 데이터를 템플릿으로 다시 보내기:
페이지에 표시하기 위해 문자 수를 EJS 템플릿에 다시 전달했습니다.

이를 처리하는 서버측 코드는 다음과 같습니다.

app.post("/submit", (req, res) => {
  const charCnt = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { charectercount: charCnt });
}); // I used body-parser to get the data from the form

로그인 후 복사