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

오늘은 컴포넌트와 모듈 시스템에 대해 학습하고, 앞으로 만들 웹 페이지를 분석했다.특히 SPA 개발을 위한 컴포넌트 기반 설계에 초점을 맞추어보았다.컴포넌트란?컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, UI의 일부분을 구성한다. 컴포넌트 기반 설계의 장점:재사용성: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.유지보수성: 각 컴포넌트는 독립적이므로 변경 사항이 다른 부분에 영향을 미치지 않는다.가독성: 코드가 논리적인 단위로 분리되어 가독성이 향상된다. 리액트와 같은 프레임워크는 컴포넌트 기반 개발을 핵심으로 하지만, 바닐라 자바스크립트로도 컴포넌트 패턴을 구현할 수 있다. 모듈 시스템모듈 시스템은 자바스크립트 코드를 여러 파일로 분리하고 필요에 따라 불러오는 방식이다. ES6에서 도입된..

오늘은 자바스크립트의 this 개념을 복습하고, 자바스크립트로 간단한 멀티 페이지 애플리케이션(MPA)을 구현했다.자바스크립트의 this 이해하기자바스크립트에서 this는 호출 방식에 따라 참조하는 대상이 달라진다.// 일반 함수에서의 thisfunction normalFunction() { console.log(this); // window 객체(브라우저 환경)}// 메서드에서의 thisconst obj = { name: '객체', method: function() { console.log(this); // obj 객체 자신을 가리킴 }};// 이벤트 핸들러에서의 thisbutton.addEventListener('click', function() { console.log(this); /..