Front-end 개발

[Vue] Vue에서 props가 부모 변경을 반영하지 않을 때 원인과 해결법

Vue로 컴포넌트를 만들다 보면, 부모에서 내려준 props 값이 변경되지 않거나 자식 컴포넌트에서 반영되지 않는 문제를 자주 만나게 됩니다. 이번 글에서는 그 원인과 해결책을 정리합니다.1. props는 단방향 데이터 흐름Vue의 **props는 단방향(One-way)**입니다.부모 → 자식으로만 데이터가 전달자식이 props를 직접 수정하면 Vue 경고 발생즉, props는 “읽기 전용” 속성으로 생각해야 합니다. 부모 값 변경 자식에서 받은 값: {{ count }}✅ 부모의 parentCount가 변경되면, 자식의 count도 자동 반영됩니다.2. 반영되지 않는 흔한 원인(1) 객체/배열을 직접 변경이름 변경👉 Vue 3의 **reactivity 시스템(Proxy 기반)**에서는 객체 속..

[React] React에서 input 값이 업데이트되지 않을 때 해결법

1. Controlled vs Uncontrolled ComponentReact의 input은 크게 Controlled Component와 Uncontrolled Component로 나뉩니다.Controlled Componentvalue 속성을 state와 연결한 형태React의 상태(state)가 UI를 "완전히 제어"값 변경 시 onChange 이벤트로 상태를 업데이트해야 함import { useState } from "react";function ControlledInput() { const [text, setText] = useState(""); return ( setText(e.target.value)} /> );}✅ 이 방식은 React 철학에 맞고, 대부분의 경우 권장되는 ..

[JS] JavaScript 비동기 함수 순서 문제 디버깅 가이드

🚦 JavaScript 비동기 함수 순서 문제 디버깅 가이드1️⃣ 비동기 함수가 순서대로 실행되지 않는 이유setTimeout, fetch, axios, DB 요청 등은 **비동기(non-blocking)**로 실행JS의 Event Loop 구조 때문에, 먼저 실행한 함수가 나중에 끝날 수 있음즉, 코드 순서 ≠ 실행 완료 순서2️⃣ 흔한 실수 & 디버깅 포인트(1) await를 안 붙였을 때async function loadData() { const data1 = fetch('/api/one'); // ❌ await 없음 const data2 = await fetch('/api/two'); console.log('data1:', data1); // Promise 객체만 출력됨 console...

[CSS] CSS z-index 안 먹을 때 확인해야 할 5가지

z-index를 크게 줬는데도 요소가 위로 올라오지 않을 때가 있습니다.대부분의 원인은 z-index 자체가 아니라 **stacking context(쌓임 맥락)**나 포지셔닝 문제입니다. 아래 5가지를 순서대로 확인하면 문제를 빠르게 해결할 수 있습니다.1️⃣ position 확인 — static이면 z-index가 무시된다z-index가 동작하려면 요소에 position이 static(기본값)이면 안 됩니다. relative, absolute, fixed, sticky 중 하나를 설정해야 합니다.Box 1Box 2해결: .box1에 position 추가.box1 { position: relative; /* 또는 absolute/fixed/sticky */ z-index: 100;}2️⃣ 부모 요소..

📌 제목React에서 상태가 갑자기 초기화되는 이유와 해결법 — 컴포넌트 리렌더링 문제 실습 예제📝 본문React에서 컴포넌트 상태가 갑자기 초기화되는 문제를 경험한 적이 있나요?보통 이는 리렌더링 구조나 상태 관리 패턴에서 발생하는 문제입니다.이번 글에서는 원인 분석, 실습 예제, 그리고 해결 방법까지 자세히 안내합니다.1️⃣ 상태 초기화가 발생하는 대표적인 이유컴포넌트가 재생성될 때 state 초기화부모 컴포넌트가 리렌더링되면, 자식 컴포넌트가 새로 마운트되며 상태 초기화Key 속성 변경에서 key가 바뀌면 React는 기존 컴포넌트를 버리고 새로 생성State를 변수로 직접 재할당useState 대신 일반 변수 사용 → 리렌더링 시 값 유지 안됨비동기 함수에서 잘못된 클로저 참조이전 렌더링의 상..

📌 제목CSS Houdini로 CSS 기능 확장하기 — Paint API, Properties & Values API 실험적 디자인 구현📝 본문CSS는 오랫동안 스타일 선언만 가능했지만, CSS Houdini를 활용하면 브라우저 엔진과 직접 상호작용하여 사용자 정의 CSS 기능을 구현할 수 있습니다.이번 글에서는 Paint API, Properties & Values API를 활용한 실험적 디자인 예제를 소개합니다.1️⃣ CSS Houdini란?CSS Houdini는 브라우저 렌더링 엔진을 확장할 수 있는 일련의 API개발자가 직접 CSS Paint Worklets, Layout, Typed OM 등을 정의 가능장점:CSS 한계 극복반복적인 패턴, 커스텀 효과 구현성능 최적화 가능2️⃣ Paint A..

📌 제목Canvas API로 브라우저에서 그래픽 그리기 — 2D 도형, 이미지 편집, 간단한 게임 예제📝 본문HTML5의 Canvas API는 브라우저에서 2D 그래픽, 애니메이션, 이미지 편집, 게임 제작까지 가능한 강력한 기능을 제공합니다.이번 글에서는 기본 도형 그리기, 이미지 처리, 간단한 게임 예제까지 단계별로 안내합니다.1️⃣ Canvas 기본 구조width, height: 캔버스 크기 지정CSS border로 영역 확인 가능JavaScript에서 그래픽 컨텍스트를 가져와 그리기const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d'); // 2D 컨텍스트2️⃣ 2D 도형 그리기2-1. 사각형과..

📌 제목Vue 3 Composition API와 watchEffect 심화 사용법 — 반응형 데이터 추적과 성능 최적화📝 본문Vue 3의 Composition API는 기존 Options API보다 더 유연하고 재사용 가능한 로직 구성이 가능합니다.특히 watchEffect를 활용하면 반응형 데이터를 자동으로 추적하고, UI 업데이트를 효율적으로 처리할 수 있습니다.이번 글에서는 watchEffect의 기본 사용법부터 심화 패턴과 성능 최적화까지 자세히 설명합니다.1️⃣ Composition API와 반응형 데이터ref: 단일 원시 값 반응형reactive: 객체, 배열 등 복합 구조 반응형computed: 종속성 기반 계산값watch / watchEffect: 데이터 변경 추적import { ref..

📌 제목React Context API로 전역 상태 관리하기 — Redux 없이 간단 실습📝 본문리액트에서 컴포넌트 간 상태 공유를 할 때, Redux나 MobX 같은 외부 라이브러리를 사용하지 않고도 Context API만으로 충분히 전역 상태 관리가 가능합니다.이번 글에서는 Context 개념, 기본 사용법, 실습 예제까지 자세히 안내합니다.1️⃣ Context API 개념Context API는 React에서 전역 상태를 공유할 수 있는 내장 기능입니다.주로 theme, 로그인 정보, 다국어, 사용자 설정 등을 관리할 때 유용합니다.Provider → Consumer 구조로 데이터를 전달합니다.핵심 특징항목 설명ProviderContext를 하위 컴포넌트에 공급ConsumerContext 값을 받..

📌 제목JavaScript Intersection Observer로 무한 스크롤 구현 — 성능 최적화까지📝 본문웹사이트에서 **무한 스크롤(Infinite Scroll)**은 사용자가 페이지 끝까지 스크롤하면 자동으로 다음 데이터를 불러오는 UX 패턴입니다.예전에는 scroll 이벤트로 구현했지만, 스크롤 이벤트는 성능 문제와 복잡한 계산을 유발할 수 있습니다.이를 해결하는 현대적인 방법이 Intersection Observer API입니다.이번 글에서는 기본 개념, 무한 스크롤 구현 예제, 성능 최적화 기법까지 자세히 안내합니다.1️⃣ Intersection Observer 개념특정 요소가 뷰포트에 진입/이탈하는 시점을 감지하는 API주요 장점:스크롤 이벤트를 직접 사용하지 않아 성능 최적화코드 간..