이 글에서는 SPA에서 페이지 새로고침 없이 URL을 변경하고 검색 기능을 구현하는 방법을 알아본다.History API를 활용한 클라이언트 사이드 라우팅은 프레임워크 없이도 효과적인 SPA를 구현할 수 있는 핵심 기술이다.클라이언트 사이드 라우팅 구현History API 활용history.pushState()를 사용하면 페이지 새로고침 없이 브라우저의 URL을 변경할 수 있다.// App.jshandleClick: async () => { // 브라우저 히스토리에 새 항목 추가 (URL을 홈으로 변경) history.pushState(null, null, "/"); // 포켓몬 목록 데이터 다시 불러오기 const pokemonList = await getPokemonList(); // 앱 전..

바닐라 자바스크립트로 SPA를 구현할 때 컴포넌트 패턴을 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있다.이 글에서는 React와 같은 프레임워크 없이 순수 자바스크립트만으로 컴포넌트 기반 아키텍처를 구현하는 방법을 알아본다.바닐라 JS 컴포넌트 설계 패턴애플리케이션 진입점 설정SPA의 시작점에서 애플리케이션을 초기화한다.import App from './App.js';const $app = document.querySelector('#app');new App($app);App 컴포넌트가 #app DOM 요소에 마운트되어 애플리케이션이 시작된다. $app 요소는 전체 애플리케이션의 최상위 컨테이너 역할을 한다. 부모 컴포넌트 구현부모 컴포넌트는 애플리케이션의 상태를 관리하고 자식 컴포넌트들..

오늘은 Node.js와 Express.js를 활용하여 간단한 서버를 구축하는 방법을 학습했다.Express.js는 Node.js 환경에서 웹 서버를 쉽게 구축할 수 있게 해주는 프레임워크로, 간결한 코드만으로 서버 기능을 구현할 수 있다.Express 서버 기본 설정const express = require("express");const path = require("path");const app = express();const PORT = 3000;app.listen(PORT, () => { console.log("START SERVER");})express와 path 모듈을 불러와 app 인스턴스를 생성하고, 포트 번호를 3000으로 설정하여 서버 리스닝을 시작한다. 정적 파일 제공 설정// 프로젝트..

오늘은 포켓몬 도감 애플리케이션에 필요한 상태를 설계해보았다.상태 관리는 SPA 개발에서 핵심적인 부분으로, 어떤 데이터를 중앙에서 관리할지 결정하는 과정이다.상태 관리란상태(state)는 애플리케이션의 데이터를 의미하며, 애플리케이션의 동작과 화면 표시 방식을 결정한다. 상태 관리는 데이터의 흐름을 제어하고 컴포넌트 간에 데이터를 공유하는 방법을 설계하는 것이다. 포켓몬 도감 애플리케이션의 상태 설계프로젝트의 구조를 보면, 여러 컴포넌트(Header, PokemonList, PokemonDetail)가 공유해야 하는 데이터가 있다. 이 데이터들은 App 컴포넌트에서 state로 관리하면 보다 효율적으로 관리할 수 있다.import Header from './components/Header.js';imp..

문제 상황Vercel로 프로젝트를 배포한 후, '/profile/edit'과 같은 하위 라우터에서 새로고침을 하니 404 Not Found 오류가 발생했다. 원인 분석SPA와 전통적인 웹 애플리케이션의 차이전통적인 웹 애플리케이션사용자가 각 페이지에 접근할 때마다 서버에서 해당 페이지의 HTML을 제공한다.'/posts', '/profile' 등의 페이지를 요청하면, 서버는 각각의 요청에 맞는 HTML 파일을 찾아서 보내주는 방식이다. 싱글 페이지 애플리케이션(SPA)초기 접근 시 단 하나의 HTML 파일인 index.html을 로드하고, 그 이후의 모든 페이지 전환은 브라우저에서 JavaScript를 사용하여 동적으로 내용을 변경한다.사용자가 '/profile/edit' 같은 URL로 이동하더라도 실제..