[SPA] HTML 대신 JavaScript로 웹페이지 제작 후 이벤트 함수 등록

1. SPA 구현 : HTML 대신 JavaScript로 웹페이지 제작
2. Vanilla JavaScript 사용 : React의 JSX 문법 없이 진행
3. 해당 웹 페이지에 이벤트 할당

 

Single Page Application를 구현하는 과정에서,

HTML이 아닌 JavaScript로 대부분의 웹 페이지를 제작해야 했다.

 

리액트를 사용할 경우 JSX 문법을 사용할 수 있었지만 Vanilla JS에서는 그것이 불가능하다.

아래와 같은 방법으로 JavaScript를 사용해서 웹 페이지를 제작했고, 이벤트 함수를 등록했다.

 

1. Template literals 사용 (이벤트 함수 등록 실패)

모듈 내 함수에서 HTML 문법을 Template literals 로 리턴한다.

그리고 특정 HTML 엘리먼트에 innerHTML 메소드로 이 리턴값을 할당한다.

이 경우 리턴값인 HTML 문법을 String 타입으로 인식하여 이벤트 함수 등록이 불가능했다.

 

// page.js

module.exports = function createHTML () {

  return `
  <h1>페이지</h1>
  <div>내용</div>
  `
}


// index.js

const Template = require("./page.js");
const contentDiv = document.querySelector('#root')

contentDiv.innerHTML = Template();

 

2. Handlebars (이벤트 함수 등록 실패)

Handlebars를 사용해도 HTML 템플릿을 만들 수 있다.

그러나 위 경우와 마찬가지로 Handlebars의 HTML 문법을 String 타입으로 인식한다.

따라서 이벤트 함수 등록이 불가능했다.

 

// page.hbs

<h1>페이지</h1>
<div>내용</div>


// index.js

const Template = require("./page.hbs");
const contentDiv = document.querySelector('#root')

contentDiv.innerHTML = Template();

 

 

3. DOM 문법으로 HTML 엘리먼트 생성 (이벤트 함수 등록 성공)

DOM 문법을 사용해서 HTML 엘리먼트를 생성할 수 있다. (createElement)

여기서 HTML 엘리먼트를 DOM 객체로 인식하기 때문에 이벤트 함수 등록이 가능했다.

 

// page.js

module.exports = function createHTML () {

  const main = document.createElement('main');
  const h1 = document.createElement('h1');
  h1.textContent = '페이지';
  const div = document.createElement('div');
  div.textContent = '내용';
  const button = document.createElement('button');
  button.textContent = '클릭';
  button.onclick = function () {
    console.log('이벤트 할당 성공')
  }
  
  main.append(h1, div, button)

  return main;
}


// index.js

const Template = require("./page.js");
const contentDiv = document.querySelector('#root')

contentDiv.append(Template());