Colin's Blog
[javascript] 이벤트 루프와 자바스크립트의 서버 사이드 렌더링 방식

이번에는 자바스크립트의 이벤트 루프와 서버 사이드 렌더링에 대해 알아보겠습니다. 이 두 가지 개념을 이해하면, 자바스크립트의 동작 원리와 서버 사이드 렌더링의 장단점을 더 잘 이해할 수 있습니다.

이벤트 루프(Event Loop)

이벤트 루프는 자바스크립트의 비동기 동작 방식을 제어하는 메커니즘입니다. 이벤트 루프는 자바스크립트 엔진이 비동기적인 이벤트와 콜백을 처리하는 방식을 정의합니다. 자바스크립트는 단일 스레드 기반의 언어이기 때문에, 이벤트 루프를 통해 비동기 작업을 효율적으로 처리할 수 있습니다.

// 예시: setTimeout 함수를 사용한 비동기 동작
console.log("첫 번째 줄");

setTimeout(function() {
  console.log("세 번째 줄");
}, 0);

console.log("두 번째 줄");

위의 예시에서 setTimeout 함수를 통해 0초 후에 실행되는 콜백 함수가 있습니다. 이때, 이벤트 루프는 해당 콜백 함수를 큐에 넣고, 실행 순서에 따라 처리하여 출력합니다.

서버 사이드 렌더링(Server-Side Rendering)

서버 사이드 렌더링은 웹 애플리케이션의 초기 페이지 로딩 성능을 향상시키기 위한 기술입니다. 클라이언트 측에서 동적으로 페이지를 렌더링하는 대신, 서버에서 페이지를 렌더링한 후에 전체 HTML을 클라이언트에게 보내줍니다. 이를 통해 초기 렌더링 딜레이를 줄이고, 검색 엔진 최적화(SEO)를 개선할 수 있습니다.

// 예시: 서버 사이드 렌더링을 사용한 React 애플리케이션
function renderFullPage(html, preloadedState) {
  return `
    <html>
      <head>
        <title>SSR React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>
        <script src="bundle.js"></script>
      </body>
    </html>
  `;
}

위의 예시에서, renderFullPage 함수는 서버 측에서 전체 HTML을 렌더링하여 클라이언트에 보내주는 역할을 합니다.

마무리

이벤트 루프는 자바스크립트의 비동기 동작을 제어하고, 서버 사이드 렌더링은 초기 페이지 로딩 성능을 개선하는데 중요한 역할을 합니다. 이러한 개념을 이해하고 활용하는 것은 더 나은 웹 애플리케이션을 개발하는 데 도움이 됩니다.

이상으로 이번 포스트를 마치도록 하겠습니다. 감사합니다.

참고 문헌

© 2018 Colin. All rights reserved.