오늘은 포켓몬 도감 애플리케이션에 필요한 상태를 설계해보았다.상태 관리는 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); /..

자바스크립트에서 DOM 요소의 텍스트 내용을 다루는 세 가지 주요 속성 innerHTML, innterText, textContent의 차이점을 알아보자. 안녕하세요 저는 woodstock입니다. innerHTML이 속성은 요소의 HTML 내용을 그대로 다룬다.HTML 태그를 포함한 모든 내용을 문자열로 반환하고, 새로운 HTML을 설정할 수 있다. 다음 코드는 요소 내부의 HTML 태그를 포함한 모든 내용을 출력한다.const element = document.getElementById('example');console.log(element.innerHTML); 그리고 이렇게 새로운 HTML을 설정하면 태그가 실제로 적용되어 이탤릭체로 표시된다.const element = document.getE..

DOM(Document Object Model) API를 활용하여 웹 페이지의 요소를 동적으로 조작하는 방법을 알아보자.버튼 클릭으로 텍스트 변경하기버튼을 클릭하면 텍스트 요소의 내용이 변경되도록 이벤트 리스너를 추가해보자. 기본 텍스트 텍스트 변경 // DOM 요소 선택const button = document.getElementById('changeTextButton');const text = document.getElementById('text');// 텍스트 요소의 내용을 변경하는 함수const onClickButton = () => { text.innerText = "미션 1. DOM API 클리어 🥳";}// 이벤트 리스너 추가bu..

생성자 함수는 객체를 생성하기 위한 템플릿으로, 비슷한 구조의 객체를 여러 개 만들 때 유용하다. 다음은 동물의 종류와 소리를 인자로 받아 객체를 생성하는 Animal 생성자 함수를 만든 후, makeSound 메서드를 추가한 코드이다.function Animal(type, sound) { this.type = type; this.sound = sound; this.makeSound = function () { return `${this.type}(은/는) ${this.sound}`; };}생성자 함수 내부에서 this 키워드는 생성될 객체를 가리킨다. 생성자 함수의 이름은 일반적으로 대문자로 시작하여 일반 함수와 구분한다. const dog = new Animal("개", "멍멍");con..

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

웹이란웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다.웹 사이트의 구성HTML (Hyper Text Markup Language)브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 한다. CSS (Cascading Style Sheet)웹 페이지의 요소들을 꾸며주는 역할을 한다. JavaSCript웹 페이지의 요소들을 생성, 삭제, 변형하는 역할을 한다. 그렇다면, 자바스크립트는 어떻게 HTML로 작성된 웹 요소에 접근해 웹 페이지를 동적으로 만들고 변형시킬 수..

클라이언트와 서버의 통신웹 애플리케이션은 클라이언트(웹 브라우저)와 서버가 통신하며 데이터를 주고 받는다. 통신 과정웹브라우저에서 서버에게 원하는 데이터를 요청한다.서버는 데이터베이스에서 요청받은 데이터를 찾는다.서버가 데이터베이스에서 찾은 데이터를 꺼내온다.꺼내온 데이터를 서버가 웹브라우저에게 전달한다.클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클라이언트에게 전달하는 과정이라고 할 수 있다. 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(() => ..