Embedded JavaScript (EJS)
florent의 개발 적응기
이 글의 주요 내용
[Embedded JavaScript (EJS)]
[EJS 활용 방법]
[EJS 태그의 종류]
[EJS 태그 사용 시 주의사항]
[정적 파일 제공하기: express.static]
[EJS 템플릿에 데이터 전달]
[부분 파일(Partial)과 레이아웃(Layout)]
[Embedded JavaScript (EJS)]
[Embedded JavaScript (EJS)란?]
EJS는 JavaScript를 위한 템플릿 언어(Templating Language)
서버 사이드 렌더링(Server-Side Rendering)을 위해 사용되며, HTML 안에 JavaScript 코드를 삽입할 수 있게 해줌
[EJS의 필요성 - EJS 사용시와 미사용시 비교]
[EJS의 이점]
(1) 동적 콘텐츠 생성: 서버에서 생성된 데이터를 쉽게 HTML에 삽입 가능
(2) 코드 재사용: 반복되는 HTML 구조를 템플릿화하여 재사용 가능
(3) 조건부 렌더링: JavaScript 로직을 사용하여 조건에 따라 다른 내용을 표시 가능
(4) 관심사의 분리(Separation of Concerns): 프레젠테이션 로직을 비즈니스 로직과 분리 ⇒ 각 로직이 담당하는 부분을 명확하게 만들어 코드의 가독성과 유지보수성이 높아짐
[EJS 활용 방법]
(1) EJS 설치: npm을 사용하여 프로젝트에 EJS를 설치합니다.
(2) Express 설정: Express 앱에서 EJS를 뷰 엔진으로 설정 ⇒ 뷰 파일들이 위치할 디렉토리를 지정
(3) EJS 파일 생성: .ejs 확장자를 가진 파일을 생성(HTML 파일 대체) ⇒ 이 파일들은 기본적으로 HTML 구조를 가지며, 특별한 EJS 태그를 포함
(4) 동적 콘텐츠 삽입: EJS 태그를 사용하여 HTML 내에 동적 콘텐츠를 삽입 ⇒ 변수 출력, 조건문, 반복문 등을 구현
(5) 데이터 전달: 라우트 핸들러에서 res.render() 메서드를 사용하여 EJS 파일을 렌더링 ⇒ 렌더링 시 필요한 데이터를 객체 형태로 전달
(6) 부분적 템플릿 사용: 재사용 가능한 코드 조각을 별도의 EJS 파일로 분리 ⇒ include 태그를 사용하여 이러한 부분적 템플릿을 메인 템플릿에 포함시킴
(7) 폼 처리: HTML 폼을 생성하여 사용자 입력을 받음 ⇒ 서버에서 POST 요청을 처리하고, 필요한 경우 결과를 다시 EJS 템플릿으로 전달
(8) 레이아웃 구성: 공통적인 페이지 구조를 레이아웃 파일로 만듬 ⇒ 각 페이지별 고유 콘텐츠를 레이아웃에 삽입하는 방식으로 구성
(9) 에러 처리: try-catch 구문을 사용하여 렌더링 과정에서 발생할 수 있는 에러를 처리 → 에러 발생 시 적절한 에러 페이지를 렌더링
(10) 최적화: 캐싱을 활용하여 자주 변경되지 않는 콘텐츠의 렌더링 속도를 향상시킴 ⇒ 큰 페이지의 경우, 부분적 렌더링을 고려하여 성능을 개선
[EJS 태그의 종류]
[EJS 태그 사용 시 주의사항]
(1) 중괄호 사용: 모든 EJS 태그는 중괄호(<% %>)로 감싸야 함
(2) Escape와 Unescape: <%= %>: 변수를 HTML에 안전하게 출력하기 위해 escape 처리, <%- %>: 변수를 HTML에 그대로 출력하기 위해 unescape 처리 (주의: 사용자 입력 데이터에는 XSS 공격의 위험이 있을 수 있음)
(3) include 사용: include 태그를 사용할 때는 파일 경로를 정확히 지정해야 함 ex. <%- include('partials/header') %>
(4) 주석 사용: 주석 태그 <%# %>는 템플릿 렌더링 시 무시되며, 주석을 사용하여 코드를 설명하거나 일시적으로 비활성화할 수 있음
(5) HTML 내 JavaScript 실행: JavaScript 코드를 HTML 내에서 실행할 때는 <% %> 태그를 사용
(6) HTML 렌더링: HTML 콘텐츠를 그대로 렌더링하려면 <%- %>를 사용
(7) 특수 기호 표시: <%% %%>를 사용하여 템플릿 내에서 <% 또는 %> 기호를 직접 표시 가능
(8) 파일 경로: include를 사용하여 다른 파일을 삽입할 때는 파일 경로를 상대 경로로 지정 ⇒ views 디렉토리를 기준으로 경로를 지정
[정적 파일 제공하기: express.static]
app.use(express.static('public')); 코드는 Express에게 public 디렉토리에 있는 모든 파일들을 정적 파일로 제공하라는 지시
파일 구조를 다음과 같이 저장하여 활용
express.static을 사용하면 'public' 폴더 외부의 파일에 직접 접근할 수 없어 보안이 향상되며, Express는 정적 파일 제공을 최적화하여 더 빠른 응답 시간을 제공
[EJS 템플릿에 데이터 전달]
EJS(Embedded JavaScript) 템플릿에 데이터를 전달하는 것은 동적 웹 페이지를 생성하는 데 핵심적인 부분 ⇒ 이 과정은 크게 두 가지 방향으로 구성: (1) 서버에서 EJS로의 데이터 전달, (2) EJS에서 서버로의 데이터 전달
[서버에서 EJS로 데이터 전달]
res.render() 메소드를 사용하여 EJS 템플릿을 렌더링할 때 데이터를 객체 형태로 전달
전달된 데이터는 EJS 템플릿 내에서 변수로 사용될 수 있음
locals 객체를 통해 모든 전달된 변수에 안전하게 접근 가능
데이터가 없거나 undefined일 경우 EJS 렌더링이 실패할 수 있으므로, 조건부 렌더링이나 기본값 설정이 중요
[EJS에서 서버로 데이터 전달]
주로 HTML 폼(form)을 통해 이루어짐
POST 메소드를 사용하여 서버로 데이터를 전송
서버에서는 req.body 객체를 통해 전송된 데이터에 접근 가능
[부분 파일(Partial)과 레이아웃(Layout)]
[부분 파일이란?]
여러 페이지에서 공통으로 사용되는 HTML 코드 조각 ⇒ 헤더, 푸터, 네비게이션 바 등 반복되는 요소를 별도의 파일로 분리
<%- include("파일명") %> 구문을 사용하여 필요한 곳에 삽입
코드 중복을 줄이고 유지보수를 용이하게 함
부분 파일 활용 예시
[레이아웃이란?]
웹사이트의 전체적인 구조를 정의하는 템플릿 ⇒ 공통 요소(예: <html>, <head>, <body> 태그)를 포함하고, 페이지별 고유 콘텐츠를 삽입할 위치를 지정
일관된 페이지 구조를 유지하면서 개별 페이지의 내용만 변경
