Express와 ejs

isTuna·2021년 2월 17일
0

NodeJS

목록 보기
2/3

Express

ExpressNodejs를 위한 프레임워크로 자유도가 높았던 Nodejs를 얇은 계층으로 나누어 코드의 양을 줄이고, 추후 유지보수를 쉽게 만들어줍니다. ExpressKoa Hapi등과 비슷하지만 더 대중적이고 인기도 가장 많습니다.

express-generator로 프로젝트를 생성하면 Express에 맞게 디렉토리를 구조화 시켜주어 bin, public, routes, views,app.js로 나뉘게 됩니다.

bin
bin/www는 서버를 실행하는 스크립트로, 포트를 지정해 줄 수 있습니다.

public
public에는 image,javascript,stylesheet 파일들이 들어있는 디렉토리입니다.

routes
routes는 라우터들을 관리하는 디렉토리로 로직을 작성한 파일들이 저장됩니다. django에서 urls.pyviews.py를 합친것과 비슷합니다.

views
views에는 html또는 ejs파일들이 저장되어 있는 디렉토리로 서버가 열리면 이곳의 파일들을 렌더링합니다.

app.js
app.js는 서버의 축이되며 미들웨어를 관리하는 js파일입니다.

Express는 MVC(Model,View,Controller) 패턴을 띄고있습니다.

ejs

ejs는 Embedded Javascript로 ejs의 가장 큰 장점은 javascripthtml태그 처럼 삽입할 수 있다는 것입니다. 코드와 변수를 내장시키는 예제를 보겠습니다.

<% if(message.user == user && user!=undefined){ %>
 	<div class="card mt-4"  style="float: left; clear:both; margin: 5px 45px 5px 20px; background-color: cornflowerblue;">
   	<div class="card-body"> 
     	<span class="card-title" style="font-size: 10px;"><%= message.id%></span>
     	<p class="card-body" style="text-align: justify;"><%= message.content %>			<span style="font-size: 10px;display:block;text-align:right;"><%=message.createdAt %></span></p>
         	</div>
          </div>
 <% }  else { %>
    	<div class="card mt-4"  style="float: right; clear:both; margin: 5px 20px 5px 45px;">
                                                                                   <div class="card-body">
				<span class="card-title" style="font-size: 10px;"><%= message.id%></span>
                            <p class="card-body" style="text-align: justify;"><%= message.content %><span style="font-size: 10px;display:block;text-align:right;"><%=message.createdAt %></span></p>
          		</div>
         	</div>
<% } %>

<% %>

<%= %>

profile
청소연구소 개발자 (2021. 05~ )

0개의 댓글