이 글에서는 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 요소는 전체 애플리케이션의 최상위 컨테이너 역할을 한다. 부모 컴포넌트 구현부모 컴포넌트는 애플리케이션의 상태를 관리하고 자식 컴포넌트들..

ES6에서 도입된 화살표 함수와 함수의 스코프, 객체 지향 프로그래밍의 기본이 되는 객체와 메서드 활용에 대해 알아보자.스코프와 호이스팅스코프는 변수의 유효 범위를 결정하는 규칙이다. 자바스크립트에서는 전역 스코프, 함수 스코프, 그리고 ES6부터 추가된 블록 스코프가 있다. 호이스팅은 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 올라가는 현상을 말한다. 정확히 말하면, 실제로 올라가는 것이 아니라 끌어올린 것처럼 선언부를 먼저 인식한다는 개념이다.function sumNumbers(a, b) { const modifiedB = b + 5; return a + modifiedB;}console.log(sumNumbers(3, 7)); // 15 (3 + (7 + 5))함수 내에서 선언된 변수 (..

클라이언트와 서버의 통신웹 애플리케이션은 클라이언트(웹 브라우저)와 서버가 통신하며 데이터를 주고 받는다. 통신 과정웹브라우저에서 서버에게 원하는 데이터를 요청한다.서버는 데이터베이스에서 요청받은 데이터를 찾는다.서버가 데이터베이스에서 찾은 데이터를 꺼내온다.꺼내온 데이터를 서버가 웹브라우저에게 전달한다.클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클라이언트에게 전달하는 과정이라고 할 수 있다. API란?API(Application Programming Interface) 란 컴퓨터나 컴퓨터 프로그램 사이의 연결을 말한다.좀 더 풀어서 얘기하자면 웹 브라우저와 같은 클라이언트와 서버 사이의 연결, 즉 서버에 원하는 데이..

async와 await은 Promise 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있는 문법이다. Promise 객체Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효devmark.tistory.com 먼저, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보자.const delay = (ms) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); });};const start = () => { delay(2000).then(() => ..

Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하devmark.tistory.com setTimeout를 이용하면 작업을 비동기적으로 처리할 수 있다. setTimeout은 콜백함수와 ms 단위의 지연 시간을 매개변수로 받는다. 아래는 workA, workB, workC 함수를 비동기 함수로 작성하고, workD는 동기적으로 작성한 예시이다.const workA = (value, callback) => { setTimeout(() => ..

자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하는지 알아보자.동기와 비동기동기란?동기(Synchronous) 처리는 작업을 순차적으로 하나씩 처리하는 방식이다. 이전 작업이 완료되어야만 다음 작업을 시작할 수 있다. 스레드와 멀티 스레드작업 처리 방식을 이해하기 위해 먼저 스레드 개념을 알아보자.아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기까지 걸리는 시간이 각각 5초, 3초, 10초라고 가정해보자.const workA = ()=>{ //5초 console.log("workA");}const workB = ()=>{ //3초 co..