웹 개발에는 개발자가 선택할 수 있는 도구가 많이 있습니다. 올바른 도구와 기술을 선택하면 프로젝트의 효율성과 기능에 큰 영향을 미칠 수 있습니다. 웹 개발에서 널리 사용되는 도구 중 하나는 Embedded(Embedded)를 의미하는 EJS입니다. 자바스크립트 . EJS는 다음을 생성하는 간단한 JavaScript 템플릿 언어입니다. HTML 일반 JavaScript로. 이 기사에서는 EJS가 무엇인지, 왜 필요한지, 기능, 설치 방법을 다루고 출력 예제를 제공합니다.
EJS란 무엇인가
EJS 또는 Embedded JavaScript는 사용자가 HTML 템플릿 내에서 JavaScript 코드를 사용하여 동적 HTML 마크업을 생성할 수 있도록 하는 웹 개발에 사용되는 JavaScript용 템플릿 엔진입니다. 웹 애플리케이션에서 동적 콘텐츠를 렌더링하는 프로세스를 단순화하도록 설계되었습니다. 여기에는 HTML과 JavaScript가 혼합되어 있어 애플리케이션의 데이터를 기반으로 동적 콘텐츠를 쉽게 생성할 수 있습니다.
EJS의 특징
- 간단한 구문: EJS는 HTML과 JavaScript를 결합한 간단한 구문을 제공하므로 쉽게 배우고 사용할 수 있습니다.
- 동적 콘텐츠: EJS를 사용하면 HTML 태그 내에서 HTML 및 JavaScript 콘텐츠를 동적으로 생성할 수 있으므로 콘텐츠 생성의 유연성이 향상됩니다.
- 레이아웃 및 부분: EJS는 레이아웃과 부분을 지원하므로 사용자는 템플릿을 재사용 가능한 구성 요소로 분할하여 코드 중복을 줄이고 유지 관리성을 향상시킬 수 있습니다.
- 오류 처리: EJS는 개발자의 디버깅을 지원하는 오류 메시지를 제공하여 전반적인 개발 경험을 향상시킵니다.
왜 EJS가 필요한가요?
- 동적 HTML 생성: EJS를 사용하면 변수, 조건, 루프 및 기타 JavaScript 논리를 기반으로 동적 HTML 콘텐츠를 생성할 수 있습니다. 이는 데이터베이스나 API에서 가져온 동적 데이터를 렌더링하는 데 특히 유용합니다.
- 코드 재사용성: EJS 템플릿을 사용하면 재사용 가능한 구성 요소나 여러 페이지에 포함될 수 있는 부분을 만들 수 있습니다. 이는 코드 모듈성을 촉진하고 웹 애플리케이션의 중복을 줄입니다.
- 서버측 렌더링: EJS를 사용하면 웹페이지의 서버측 렌더링(SSR)을 수행할 수 있습니다. SSR은 React 또는 Angular와 같은 프레임워크에서 수행되는 클라이언트 측 렌더링(CSR)에 비해 검색 엔진이 콘텐츠를 더 효과적으로 크롤링하고 색인화할 수 있도록 하므로 SEO(검색 엔진 최적화)에 유용합니다.
- Node.js 및 Express.js와 쉽게 통합: EJS는 Node.js 및 Express.js와 원활하게 통합되므로 서버 측 JavaScript 애플리케이션을 작업하는 개발자에게 널리 사용됩니다. Express.js 프로젝트 내에서 설정하고 사용하기 쉽습니다.
- 익숙한 구문: 이미 HTML과 JavaScript에 익숙하다면 EJS를 배우고 사용하는 것은 간단합니다. 구문은 JavaScript 코드가 포함된 HTML과 유사합니다.
>태그를 사용하여 다양한 기술 수준의 개발자가 액세스할 수 있도록 합니다. - 템플릿 상속 및 레이아웃: EJS는 템플릿 상속과 레이아웃을 지원하므로 웹 페이지에 대한 일관된 레이아웃을 만들 수 있습니다. 기본 레이아웃을 정의하고 이를 다른 템플릿으로 확장하여 애플리케이션 전체에서 일관된 모양과 느낌을 더 쉽게 유지할 수 있습니다.
EJS를 사용하는 방법?
1 단계: 프로젝트에 EJS를 종속성으로 설치
자바의 버블 정렬
npm install ejs>
2 단계: 프로젝트 디렉터리에 'views' 폴더가 아직 없으면 만듭니다. views 폴더 내에서 확장자가 .ejs인 새 파일(예: index.ejs)을 만듭니다.
3단계: Express.js 애플리케이션에서 EJS를 Express와 통합하려면 Express 앱 구성에서 EJS를 뷰 엔진으로 설정하세요. 이 구성을 통해 Express는 뷰 렌더링에 EJS를 사용할 수 있습니다.
app.set('view engine', 'ejs');>4단계: EJS 템플릿 렌더링, Express 경로 핸들러에서 다음을 사용하여 EJS 템플릿을 렌더링합니다. 'res.render()' 템플릿에 전달되는 데 필요한 데이터를 제공합니다.
res.render('hello', { name: 'Geeks' });>프로젝트 구조:
업데이트된 종속성 패키지.json 파일은 다음과 같습니다:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>예: 예를 들어 ejs의 사용을 보여주기 위한 구현입니다.
CSS의 가운데 버튼HTML
EJS 예제제목> 머리> <body> <h1>안녕하세요,<%= name %>!h1> 본문> html>></pre> </code>자바스크립트<code class='hljs'> <pre class='hljs'>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hello', { 이름: 'Geeks' }); }); app.listen(port, () => { console.log(`서버가 http://localhost:${port}에서 실행 중입니다`); });></pre> </code> <p dir='ltr'> <b> <strong>애플리케이션 실행 단계:</strong> </b> <span>프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>산출:</strong> </b> <span>프로젝트는 URL http://localhost:3000/에 표시됩니다.</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="산출"></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python/">파이썬</a> </li><li> <a href="/data-visualization/">데이터 시각화</a> </li><li> <a href="/vba-tutorial/">Vba 튜토리얼</a> </li><li> <a href="/neet/">니트</a> </li><li> <a href="/maven-tutorial/">메이븐 튜토리얼</a> </li><li> <a href="/parents/">부모</a> </li><li> <a href="/cpp-control-flow/">Cpp 제어 흐름</a> </li><li> <a href="/chemistry-difference-between/">화학-차이-사이</a> </li><li> <a href="/daa-tutorial/">Daa 튜토리얼</a> </li><li> <a href="/html-attributes/">Html 속성</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">고등학교에서 클럽을 시작하는 방법: 8단계 안내</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> 고등학교 클럽을 시작하는 방법이 궁금하십니까? 이 가이드는 아이디어 브레인스토밍부터 첫 번째 활동 계획까지 프로세스를 단계별로 안내합니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-start-club-high-school-131868"> <i class="fa fa-external-link"></i> 자세히보기</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">재미있는 기사</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/javafx-tutorial/">Javafx 튜토리얼</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-convert-long-int">Java long을 int로 변환</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lambda-expression-java">Java의 람다 표현식</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/balanced-binary-tree">균형 잡힌 이진 트리</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-replace-all-occurrences-substring-string">Python – 문자열에서 하위 문자열의 모든 항목 바꾸기</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">인기 게시물</h2>
<div class="content">
<ul class="list"> <li><a href="/when-was-first-computer-invented">최초의 컴퓨터는 언제 발명되었나요?</a>
</li><li><a href="/java-convert-int-double">int를 double java로 변환</a>
</li><li><a href="/javascript-example">자바스크립트 샘플 코드 예</a>
</li><li><a href="/fibonacci-series-java">피보나치 수열 자바</a>
</li><li><a href="/how-iterate-map-java">자바 반복 맵</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 판권 소유 | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>