express.js에서 ejs없이 html로 데이터 넘기기(동적 웹 만들기)

웹 서비스를 만들을 때, node.js 서버에서 프론트엔드로 데이터를 보내야 할 일이 있다. 프론트엔드에서 Ajax로 한번 더 요청을 할 수도 있지만, 상당히 번거로운 방법이다. 데이터가 소량인 경우에는 ejs를 설치하기에도 곤란하다.

이럴 때 html에 특수한 문자열을 미리 적어둔 뒤, node.js에서 프론트 코드를 전달하기 전에 해당 문자열을 우리가 쓸 데이터로 replace 하는 것이다. 이는 일종의 서버 사이드 렌더링 기술이다.

그럼 이제 코드로 어떻게 하는지 알아보자.

준비하기

먼저 html에 내가 데이터를 놓을 곳에 특수한 나만의 문자열을 만들어서 넣자.

<homeSectionInnerTag />

필자의 경우 이 코드를 삽입했다. 태그의 형태를 하고 있어 Prettier와 같은 포매터가 오류를 일으키지도 않는다. 물론 Element의 class나 id에 값을 넣는다면 자신만의 아무런 값이나 써도 상관없다.

Node.js 에서 데이터 넘기기

파일을 수정후에 보내야 하므로 express.js 의 res.sendFile();함수는 사용할 수 없다. 직접 html파일을 불러오고 나만의 문자열을 데이터로 변경한 후 res.send();함수를 통해 소스코드를 전달해야 한다.

const fs = require("fs");

직접 html파일을 로드하기 위해 fs 라이브러리를 로드한다.

app.get("/", (res, req) => {
    const sourceHTML = fs.readFileSync(__dirname + "/public/index.html", "utf8");
    const replacedHTML = sourceHTML.replace("<homeSectionInnerTag />", "<div>데이터데이터데이터</div>");
    res.send(replacedHTML);
});

/public/index.html파일을 로드한 후 <homeSectionInnerTag />을 <div>데이터데이터데이터</div>로 변경해서 웹 브라우저로 전송하는 코드이다. <div>데이터데이터데이터</div>대신 자신이 실제로 웹 페이지에 삽일할 데이터를 입력해주면 된다.

html파일에 원하는 위치에 html파일을 넣어서 보내기

이를 응용하면 여러개의 html파일을 하나로 합쳐서 보낼 수 있다.

예를 들자면, 헤더 html과 내용 html, 푸터 html이 있으면, 내용 html에 각각의 문자열을 입력해 만들면 Node.js 서버에서 문자열을 html파일로 교체하는 것이다.

app.get("/", (res, req) => {
    const sourceHTML = fs.readFileSync(__dirname + "/public/index.html", "utf8");
    const headerHTML = fs.readFileSync(__dirname + "/public/header.html", "utf8");
    const footerHTML = fs.readFileSync(__dirname + "/public/footer.html", "utf8");
    let replacedHTML = sourceHTML.replace("<headerSectionInnerTag />", headerHTML);
    replacedHTML = replacedHTML.replace("<footerSectionInnerTag />", footerHTML);
    res.send(replacedHTML);
});

이 코드는 /public/index.html에 있는 파일에 /public/header.html파일과 /public/footer.html파일을 각각 <headerSectionInnerTag />와 <footerSectionInnerTag />문자열과 바꿔 하나의 html로 합쳐 전송한다. 이렇게 설계하면 ajax를 사용하는 것 보다 SEO 측면에서 좋을 것이다.

필자는 obtuse.kr 웹사이트를 헤더와 사이드바를 하나의 html로 만들고, <homeSectionInnerTag /> 문자열을 내용이 담긴 html로 변경하여 출력하게 구현하였다.

마치며

이는 단순한 데이터를 처리할 때 쓰기 좋지, 만능은 아니다. 너무 남발하면 웹 서버의 응답 속도가 느려질 수 있고, 파일을 너무 많이 쪼개 파일을 불러오는 대에 대기 시간이 길어지거나, 계산할 데이터가 많다면 차라리 ajax가 미리 레이아웃이 뜨기 때문에 사용자 입장에서 훨씬 로딩 속도가 빠르다고 느끼게 된다.

또한 코드 복잡성과 유지 보수 측면에서 복잡한 데이터를 다룬다면 ejs와 같은 템플릿 엔진 사용을 고려하자.