Express. ESJ 구문

MJ·2023년 8월 2일
0

Express

목록 보기
8/8
post-thumbnail

EJS Tag

  • EJS에서 사용하는 태그들은 EJS에게 HTML 태그가 아니므로 HTML으로 취급하지 말라고
    지시하기 위해 사용하는 태그들입니다.

  • 태그들을 사용하면 HTML 문서 내부에 JS 코드를 사용할 수 있습니다.


👉 <%= %> 태그

태그 사이에 코드를 넣으면 그 안의 값은 템플릿으로 출력됩니다.
JS의 문자열의 템플릿 리터럴처럼 사용할 수 있습니다.

① 사용 예제 (1)

② 사용 예제 (2)


1.1 유틸리티 설치

  • VS CODE에서 제공하는 확장 기능으로 EJS 코드를 사용할 때 하이라이트 효과를
    코드에 부여합니다.


1.2 템플릿에 데이터 전달하기

  • JS로 생성한 객체를 템플릿 파일에 전달해서 사용할 수 있습니다.

① 난수를 생성해서 템플릿 파일에 전달

render() 메서드의 두 번째 인자로 템플릿 파일에게 데이터를 전송할 수 있다.
rand 라는 상수를 객체안에 프로퍼티로 넣어 전달하면 템플릿 파일에서 사용할 수 있다.


프로퍼티 키와 값이 동일한 rand 이므로, 키&쌍을 생략하고 프로퍼티 자체를 전달.
또는, { num : rand } 이런식으로 키와 값을 매핑해서 전달해도 됩니다.
브라우저 또한 num을 태그안에 기입하면 변수처럼 사용할 수 있다.

② 브라우저에서 템플릿 파일 확인하기


1.3 사용자가 입력한 매개변수를 템플릿에 전달하기

① 사용자가 검색한 경로값을 템플릿 파일에 전달

: 으로 인해 사용자가 /r/ 이후에 검색한 단어는 req.params 객체의 프로퍼티로
저장 되기에 구조분해해서 템플릿 파일에 전달합니다.

② 템플릿 파일 출력

템플릿 파일에서 서버가 전달한 객체를 변수로 가져와서 사용, 사용자가 검색한 경로가
브라우저에 출력됩니다.

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글