프레임워크 없이 웹 개발하기 - Part 1: 최적화된 웹 애플리케이션 만들기

2025-05-19 23:17:08

webdevjavascriptfrontendtypescript

프레임워크란 무엇인가?

웹 개발에서 프레임워크는 흔히 사용되는 기능을 보다 쉽게 구현할 수 있도록 도와주는 코드의 집합입니다. React나 Angular 같은 프레임워크는 컴포넌트 기반 설계를 도입하여, 사용자 인터페이스의 일부분을 효과적으로 관리할 수 있게 합니다. 하지만 최근 "프레임워크 없이도" 웹 개발을 할 수 있는 방법이 주목받고 있습니다.

왜 프레임워크를 사용하지 않을까?

프레임워크를 사용하지 않는 웹 개발의 가장 큰 이점은 불필요한 코드 중복과 런타임 오버헤드를 줄이는 데 있습니다. 또한, 순수 자바스크립트를 사용하면 특정 툴체인에 얽매이지 않고, 코드 베이스가 훨씬 더 가볍고 간결해집니다. 이는 최적화된 성능으로 이어질 가능성이 높습니다.

컴포넌트 아키텍처의 적용

프레임워크 없이도 컴포넌트 기반 설계를 구현할 수 있는 방법이 있습니다. 예를 들어, 간단한 'Hello World' 애플리케이션을 다음과 같이 구현할 수 있습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Hello World</title>
</head>
<body id="app"></body>
<script defer>
    function HelloWorld() {
        const HelloWorldUI = document.createElement("template");
        HelloWorldUI.innerHTML = `<p>Hello World!</p>`;
        return HelloWorldUI.content;
    }
    document.getElementById('app').append(HelloWorld());
</script>
</html>

이러한 간단한 접근은 React와 같은 프레임워크에 익숙한 개발자에게 익숙한 컴포넌트 아이디어를 전하되, 불필요한 복잡성을 제거합니다.

반응성: 시그널의 사용

현대 프레임워크에서 반응적인 데이터 관리는 필수적입니다. 시그널(signal)을 통해 우리는 프레임워크 없이도 효율적인 반응성을 구현할 수 있습니다. 시그널은 값과 해당 값을 변경했을 때 실행 될 구독자 집합을 갖는 구조를 말합니다.

const counter = {
    value: 0, subs: new Set()
};

function HelloWorld() {
    const HelloWorldUI = document.createElement("template");
    HelloWorldUI.innerHTML = `<button>${counter.value}</button>`;
    const BTN = HelloWorldUI.content.children[0];

    BTN.addEventListener('click', () => {
        counter.value++;
        for ( let subscriber of counter.subs ) subscriber();
    });

    const onUpdate = () => {
        BTN.innerText = counter.value;
    };

    counter.subs.add(onUpdate);
    onUpdate();

    return HelloWorldUI.content;
}

document.getElementById('app').append(HelloWorld());

위 코드에서는 버튼 클릭에 따라 값이 증가하고, 그에 따라 UI가 업데이트됩니다. 이렇듯 VanillaJS에서도 필요한 구현만으로 반응성을 추가할 수 있습니다.

동적 배열, 메모 그리고 메모리 관리

프레임워크 없이도 복잡한 상태 관리와 동적 데이터 처리가 가능합니다. 단지 기본적인 구조만 이해하면, VanillaJS를 사용하여 더욱 효율적으로 이러한 기능을 구현할 수 있습니다.

다음 편에서는 배열-도 DOM 동기화, 캐시된 컴포넌트들, 구성요소 관리, 서버 사이드 렌더링 등 주제를 다룰 예정입니다. 강력한 프레임워크 없이도 효과적이고 최적화된 웹 애플리케이션을 만드는 방법을 알아보세요!

참고 자료

더 많은 자료를 확인하고 싶다면 링크를 통해 상세한 정보를 얻어보세요.