반응형 NodeJS, NPM, Koa/handlebars (hbs)3 NodeJS Handlebars 레이아웃 분리하기: Navigation과 Bottom 웹디자인을 적용할 때,모든 페이지마다 네비게이션과 bottom의 카피라이트 영역의 코드를 작성하는 것은,매우 비효율적인 방법입니다.그래서, 이러한 레이아웃 영역을 분리해서 코딩을 하게 되는데요.오늘은 NodeJS의 뷰템플릿엔진인 Handlebars를 사용할 때,Navigation과 Bottom영역등의 레이아웃을 분리하는 방법에 대해서 정리해 보겠습니다. 참고로 Handlebars에 대한 기본적인 사항은 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 1. 파일 구성 및 nodejs 설정1-1. 파일 구성직접 코딩 작업을 하기 전에,각각의 레이아웃들을 어떻게 폴더로 나누어서 저장하는지에 대해서 먼저 보겠습니다.handlebars의 파일들은 보통 '/vie.. 2024. 9. 16. tailwind css 와 handlebars 함께 사용하기 오늘은 NodeJS에서 많이 사용하는 handlebars 뷰템플릿 엔진과,tailwind css를 함께 사용하는 방법에 대해 알아보겠습니다. 1. tailwind와 handlebars의 설치tailwind는 개발환경에서 css작성 후,최종적으로 css로 컴파일 된 파일만,production 레벨에서 사용하게 됩니다. 따라서, Production레벨에서는 tailwindcss모듈을 설치할 필요가 없습니다.그래서 설치할 때, 개발 의존성으로 -dev를 붙여줍니다. npm install tailwindcss --save-dev handlebars는 설치와 설정이 조금 더 복잡한데요.이에 관해서는 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 2. tail.. 2024. 9. 13. Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 NodeJS와 함께 널리 사용하는 뷰템플릿 엔진인 Handlebars에 대해 정리하겠습니다. 1. Handlebars Handlebars는 JavaScript 템플릿 엔진입니다. 웹 애플리케이션에서 동적으로 HTML을 생성하는 데 사용되는데요. 중괄호'{{ }}'를 사용하여 템플릿 내에 변수, 조건문, 반복문 등을 삽입해 줍니다. HTML형식을 해치지 않으면서도, 서버에서 데이터를 가져와 동적인 HTML을 생성하는 데 유용합니다. 2. Handlebars 설치 아래는 npm을 이용해서, handlebars의 모듈을 설치하는 코드입니다. npm install express-handlebars --save 3. 중괄호 문법 handlebars 를 설정하고 사용하기 전에, 핵심이 되는 중괄호 문법을 보겠습니다.. 2024. 4. 2. 이전 1 다음
