바닐라 자바스크립트로 SPA 개발하기

F-Lab : 상위 1% 개발자들의 멘토링

2024-05-19

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!

소개

바닐라 자바스크립트로 싱글 페이지 애플리케이션(SPA)을 개발하는 것은 많은 개발자들에게 도전이 될 수 있습니다. 특히, 리액트와 같은 프레임워크를 사용하지 않고 순수 자바스크립트로 구현하는 것은 더욱 그렇습니다.

이번 블로그 포스트에서는 바닐라 자바스크립트로 SPA를 개발하는 방법에 대해 다루겠습니다. 프로젝트의 구조 설계부터 라우팅, 데이터 관리, 그리고 MSW를 사용한 목 데이터 처리까지 다양한 주제를 포함하고 있습니다.

왜냐하면 바닐라 자바스크립트로 SPA를 개발하는 것은 기본적인 웹 개발 지식을 강화하고, 프레임워크에 의존하지 않는 개발 능력을 키우는 데 큰 도움이 되기 때문입니다.

이 글을 통해 바닐라 자바스크립트로 SPA를 개발하는 데 필요한 기술과 개념을 익히고, 실제 프로젝트에 적용할 수 있는 방법을 배워보세요.

그럼 시작해 보겠습니다.

프로젝트 구조 설계

SPA를 개발할 때 가장 먼저 해야 할 일은 프로젝트의 구조를 설계하는 것입니다. 이는 코드의 유지보수성과 확장성을 높이는 데 중요한 역할을 합니다.

프로젝트 구조 설계 시 고려해야 할 요소로는 라우팅, 컴포넌트 분리, 상태 관리 등이 있습니다. 왜냐하면 이러한 요소들이 프로젝트의 전반적인 아키텍처를 결정하고, 개발 과정에서 발생할 수 있는 문제를 미리 예방할 수 있기 때문입니다.

예를 들어, 라우팅을 먼저 설정하면 각 페이지의 URL과 해당 컴포넌트를 쉽게 연결할 수 있습니다. 다음은 간단한 라우터 설정 예제입니다:

const routes = {
    '/': Home,
    '/about': About,
    '/contact': Contact
};

function router() {
    const path = window.location.pathname;
    const component = routes[path];
    document.getElementById('app').innerHTML = component();
}

window.addEventListener('popstate', router);
document.addEventListener('DOMContentLoaded', router);

이와 같이 라우터를 설정하면 URL 변경에 따라 해당 컴포넌트를 렌더링할 수 있습니다.

또한, 컴포넌트를 분리하여 각 기능을 모듈화하면 코드의 재사용성과 가독성을 높일 수 있습니다. 이는 프로젝트의 유지보수성을 크게 향상시킵니다.

데이터 관리와 MSW 사용

SPA 개발에서 데이터 관리는 매우 중요한 부분입니다. 특히, 백엔드와의 통신 없이 목 데이터를 사용하여 개발을 진행할 때는 MSW(Mock Service Worker)를 활용할 수 있습니다.

MSW는 서비스 워커를 통해 목 데이터를 제공하는 서버로, 백엔드가 없는 상태에서도 API 요청을 처리할 수 있게 해줍니다. 왜냐하면 MSW를 사용하면 실제 서버와의 통신 없이도 프론트엔드 개발을 진행할 수 있기 때문입니다.

다음은 MSW를 설정하는 간단한 예제입니다:

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
    rest.get('/api/user', (req, res, ctx) => {
        return res(ctx.json({ username: 'John Doe' }));
    })
);

worker.start();

이와 같이 MSW를 설정하면, '/api/user' 경로로의 요청을 가로채고 목 데이터를 반환할 수 있습니다.

MSW를 사용하면 리스트 데이터나 상세 페이지 데이터를 목 데이터로 쉽게 관리할 수 있으며, 개발 과정에서 발생할 수 있는 데이터 관련 문제를 미리 해결할 수 있습니다.

또한, MSW의 최신 버전 독스를 참고하여 HTTP 요청 처리를 확인하고, 프로젝트에 적용해 보세요.

이벤트 루프와 비동기 처리

자바스크립트는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 처리를 지원합니다. 이는 자바스크립트가 멀티 스레드처럼 작동하는 것처럼 보이게 합니다.

이벤트 루프는 콜스택과 큐를 관리하여 비동기 작업을 처리합니다. 왜냐하면 이벤트 루프가 콜스택이 비었을 때 큐에서 새로운 작업을 가져와 실행하기 때문입니다.

다음은 이벤트 루프의 작동 원리를 설명하는 예제입니다:

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');

위 예제의 출력 결과는 'Start', 'End', 'Promise', 'Timeout' 순서로 나타납니다. 이는 이벤트 루프가 콜스택이 비었을 때 마이크로 테스크 큐(Promise)를 먼저 처리하고, 매크로 테스크 큐(setTimeout)를 나중에 처리하기 때문입니다.

이와 같은 이벤트 루프의 작동 원리를 이해하면, 자바스크립트의 비동기 처리 방식을 보다 효율적으로 사용할 수 있습니다.

또한, 이벤트 루프와 관련된 마이크로 테스크와 매크로 테스크의 차이점을 이해하고, 이를 활용한 비동기 처리 방법을 익히는 것이 중요합니다.

리액트 라이프 사이클과 바닐라 자바스크립트

리액트의 라이프 사이클 메서드는 컴포넌트의 생명주기를 관리하는 데 중요한 역할을 합니다. 바닐라 자바스크립트로 SPA를 개발할 때도 이러한 라이프 사이클 개념을 적용할 수 있습니다.

리액트의 라이프 사이클 메서드에는 componentDidMount, componentDidUpdate, componentWillUnmount 등이 있습니다. 왜냐하면 이러한 메서드들이 컴포넌트의 상태 변화에 따라 특정 작업을 수행할 수 있게 해주기 때문입니다.

다음은 바닐라 자바스크립트로 리액트의 componentDidMount와 유사한 기능을 구현한 예제입니다:

class MyComponent {
    constructor() {
        this.init();
    }

    init() {
        document.addEventListener('DOMContentLoaded', () => {
            this.componentDidMount();
        });
    }

    componentDidMount() {
        console.log('Component Mounted');
    }
}

const myComponent = new MyComponent();

이와 같이 바닐라 자바스크립트로도 리액트의 라이프 사이클 메서드를 구현할 수 있습니다.

또한, 컴포넌트의 상태 변화를 감지하고, 이에 따라 특정 작업을 수행하는 방법을 익히는 것이 중요합니다. 이는 SPA 개발에서 컴포넌트의 상태 관리와 성능 최적화에 큰 도움이 됩니다.

리액트의 라이프 사이클 메서드를 바닐라 자바스크립트로 구현하는 방법을 익히면, 보다 유연하고 효율적인 SPA 개발이 가능합니다.