jonbeo 님의 블로그

React의 상태 관리는 프로젝트 규모와 요구사항에 따라 달라집니다.단순히 useState로 충분한 경우도 있지만, 전역 상태 관리가 필요해지면 선택지가 다양해집니다.이번 포스팅에서는 대표적인 세 가지 접근법을 살펴봅니다.🧩 1. Context APIReact 기본 제공 전역 상태 관리 도구✅ 특징React에 내장 → 별도 라이브러리 설치 불필요createContext + useContext 사용전역 상태를 Provider로 감싸서 하위 컴포넌트에서 접근 가능📌 예시 const ThemeContext = React.createContext();function App() { return ( );}function Toolbar() { const theme = React.us..

TypeScript(이하 TS)는 **JavaScript(이하 JS)의 상위 집합(Superset)**입니다.즉, JS 문법을 그대로 사용하면서 타입 시스템을 추가한 언어입니다.👉 "JS는 자유롭고, TS는 안전하다" 라고 이해하면 쉽습니다.📌 1. TypeScript를 쓰는 이유✅ 타입 안정성: 런타임 에러를 컴파일 단계에서 방지✅ 코드 가독성 & 유지보수성: 협업에서 타입이 문서 역할✅ IDE 지원 극대화: 자동완성(IntelliSense) 강화✅ 대규모 프로젝트 필수: 규모가 커질수록 버그 줄이고 개발 속도 ↑📌 2. JavaScript vs TypeScript 비교JS 예시 (타입 자유로움) function add(a, b) { return a + b;}console.log(add(10, ..

기존의 웹사이트는 URL 변경 시 서버에서 새로운 페이지를 로드하는 방식이었습니다.하지만 SPA에서는 실제 HTML은 하나(index.html)만 존재하고,페이지 전환은 자바스크립트로 UI를 바꿔주는 방식으로 이루어집니다. 👉 이 과정을 쉽게 구현해주는 게 React Router입니다.⚙️ 1. React Router 설치 npm install react-router-dom 📌 2. 기본 구조 import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( ..

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.🧠 1. 이벤트 위임이란?하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법 브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.📌 2. 기본 예제 – 잘못된 방식 document.querySelectorAll(".item").forEach(item => { item.addEventListener("click"..

안녕하세요 😊JavaScript로 버튼이나 리스트 항목에 이벤트를 걸다 보면,요소가 많아질수록 코드가 복잡해지고 성능 문제가 생기기 쉽습니다. 이럴 때 효과적으로 사용하는 기법이 바로 **이벤트 위임(Event Delegation)**입니다.📍 1. 이벤트 위임이란?개별 요소에 직접 이벤트를 붙이지 않고,공통 부모 요소에 이벤트를 한 번만 등록해서하위 요소들의 이벤트를 **버블링(bubbling)**으로 처리하는 방법입니다.👉 즉, 수많은 자식 요소 대신 부모 한 곳에서 이벤트를 관리하는 방식입니다.📍 2. 기본 예시 (비효율적인 방법)리스트 항목마다 클릭 이벤트를 붙이면, 항목이 많을수록 비효율적입니다. Home About Contact 👉 항목이 1,000개라면 이벤트 리스너도 1,0..

안녕하세요 😊웹 개발에서 자주 만나는 개념이 바로 **비동기 처리(Asynchronous)**입니다.API 요청, 파일 읽기, setTimeout 같은 작업은 즉시 끝나지 않기 때문에 비동기 방식으로 처리됩니다.자바스크립트는 이런 작업을 다루기 위해 콜백(callback) → Promise → async/await 순으로 발전해 왔습니다.오늘은 그 중에서도 Promise와 async/await을 쉽게 설명해드리겠습니다.📍 1. Promise란?Promise는 “결과를 약속한다”는 의미 그대로, 비동기 작업의 성공/실패 결과를 표현하는 객체입니다. const fetchData = new Promise((resolve, reject) => { const success = true; if (succes..

안녕하세요 😊웹에서 텍스트를 강조할 때 흔히 자바스크립트를 이용해 애니메이션을 넣곤 합니다.하지만 요즘은 CSS만으로도 충분히 세련된 애니메이션 효과를 줄 수 있습니다.오늘은 초보자도 따라 할 수 있는 반짝이는 글자 애니메이션을 만들어 보겠습니다.📍 1. 기본 아이디어반짝이는 효과를 주기 위해서는 크게 두 가지 기법을 사용할 수 있습니다.linear-gradient + background-clip:text → 빛이 지나가는 효과text-shadow 애니메이션 → 글자 주위가 번쩍이는 효과이 두 가지를 조합하면 다양한 스타일의 반짝임을 표현할 수 있습니다.📍 2. 빛이 스쳐 지나가는 반짝임 Shiny Text.shine { font-size: 3rem; font-weight: bold; colo..

안녕하세요 😊React에서 검색 기능이나 필터링 기능을 만들다 보면, 입력할 때마다 화면이 순간적으로 버벅거리는 경험을 하신 적 있으실 겁니다.특히 데이터가 많거나 무거운 연산을 수행할 경우, 사용자가 타이핑하는 속도를 UI가 따라가지 못해 불편해질 수 있습니다. 이때 React가 제공하는 useDeferredValue Hook을 사용하면 문제를 쉽게 해결할 수 있습니다.📍 1. useDeferredValue란?useDeferredValue는 값 업데이트를 지연 처리하여, 사용자 인터랙션(입력)은 바로 반영되지만 무거운 연산은 조금 늦게 처리되도록 도와주는 Hook입니다.즉, UI 우선 / 연산 지연이라는 전략을 통해 UX를 개선합니다.📍 2. 기본 사용법 import { useState, useD..

안녕하세요 😊웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠? 이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.📍 1. Debounce – 마지막 동작만 실행Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다. 예시: 검색창 자동완성 function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeo..

안녕하세요 😊이번 포스팅에서는 CSS Grid와 Flexbox를 “어떤 상황에서 무엇을 써야 하는지” 관점에서 깊게 풀어보겠습니다.두 기술은 모두 강력한 레이아웃 시스템이지만 목적이 다릅니다. 초보자 분들도 헷갈리지 않도록,개념 → 속성 → 실전 패턴 → 선택 체크리스트 → 자주 하는 실수 순서로 차근차근 정리 해보겠습니다.1) 핵심 요약이 아니라 “핵심 이해”: Grid는 2차원, Flex는 1차원Flexbox는 1차원(행 또는 열 한 방향) 정렬에 특화되어 있습니다. 버튼 그룹, 네비게이션 바, 카드 내부 정렬처럼 한 줄 안에서의 배치·정렬·간격 제어에 특히 강합니다.Grid는 2차원(행 + 열 동시) 레이아웃에 적합합니다. 페이지 전체 레이아웃, 대시보드, 잡지형 배치처럼 행과 열을 동시에 설계해..