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

안녕??‍♂️ ! 이제 막 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에서 오류가 발생하고 앱이 중단될 수 있습니다. 이제 막 시작하는 경우에는 매우 실망스러울 수 있습니다!

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

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

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

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

---

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

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

1. 입력 데이터 가져오기:
   사용자의 성과 이름을 사용하는 HTML 양식을 사용했습니다.

2. 서버로 데이터 보내기:
   POST를 이용해 입력 데이터를 서버로 보낸 뒤, 이름의 글자수를 계산해봤습니다.

3. 처리된 데이터를 템플릿으로 다시 보내기:
   페이지에 표시하기 위해 문자 수를 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

• req.body는 사용자 입력에서 양식 데이터를 가져옵니다.
• 이름과 성의 문자 수를 세어 그 수를 EJS 파일에 전달했습니다.
• 그러면 EJS 템플릿에 문자 수가 표시됩니다.

여기에서 내 GitHub의 프로젝트 코드에서 전체 코드를 확인하세요

---

간단히 말하면 ?

EJS 템플릿에 데이터를 전달하고 클라이언트에서 데이터를 다시 가져오는 방법에 대한 간략한 요약입니다! EJS는 매우 유연하여 HTML과 JavaScript를 쉽게 혼합할 수 있으며 데이터 전달을 효과적으로 관리하는 방법을 배우면 프로젝트에 많은 가능성이 열립니다.

이 게시물의 주요 내용은 다음과 같습니다.

• res.render()를 사용하여 서버의 데이터를 EJS 템플릿으로 전달하세요.
• 충돌을 방지하려면 템플릿에서 사용하기 전에 항상 데이터가 존재하는지 확인하세요.
• req.body(POST 요청의 경우)를 사용하여 쉽게 데이터를 서버로 다시 보내고 처리할 수 있습니다.

저처럼 배우는 중이라면 이 게시물이 상황을 더 명확하게 하고 초기 함정을 피하는 데 도움이 되기를 바랍니다. 아래에 질문이나 의견을 남겨주세요! ?

위 내용은 EJS 템플릿에 데이터 전달 및 그 반대로 전달 — 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!