JavaScript (4) 썸네일형 리스트형 [React] Compound Component Pattern 실습 Compound Component PatternCompound Component Pattern은 부모 컴포넌트가 상태와 로직을 관리하고, 자식 컴포넌트들이 이 상태를 Context를 통해 공유하며, 사용자가 자식 컴포넌트들을 선언적으로 조합하여 복잡한 UI를 유연하게 구축할 수 있도록 하는 패턴이며, 일반적으로 React의 Context API를 활용해 구현된다.(compound = 화합물) (잠깐 ⸜(*◉ ᴗ ◉)⸝)[Context API 간단 정의]Context API는 React에서 컴포넌트 간에 데이터를 전달할 때, 중간 컴포넌트들에게 일일이 props를 넘기지 않고도 전역처럼 값을 공유할 수 있게 해주는 기능이다.부모 → 자식 → 손자 → 증손자 이렇게 깊은 트리 구조에서도 필요한 컴포넌트가 바.. [JS] V8 엔진부터 Event Loop까지: 자바스크립트 실행의 모든 것 자바스크립트는 단일 스레드 언어인데도 비동기 처리가 가능하다는 게 신기하지 않나요?그 원리를 엔진(V8)의 동작부터 브라우저 내부 구조까지 단계별로 살펴봅니다.“자바스크립트는 싱글 스레드인데 왜 비동기가 될까?”“V8 엔진은 정확히 어떤 과정을 거쳐 코드를 실행할까?”“왜 최적화를 한다고 했다가 다시 디옵트 하는가?” 이 글은 이러한 질문들의 답을 단 한 번에 “그림처럼” 이해하는 것을 목표로 합니다. ⭐ V8 엔진을 공부하고 글을 작성할 때 ‘반드시 가져가자’고 마음먹은 핵심⭐V8 엔진의 전체 실행 과정(파싱 → 바이트코드 → 인터프리팅 → JIT → GC)브라우저 환경에서 JS가 비동기적으로 동작하는 구조(Web API, Task Queue, Event Loop)왜 싱글 스레드임에도 동시성(Concu.. React에서 async/await 제대로 활용하기 🙋♂️ 왜 비동기가 필요할까?React 앱을 만들다 보면 외부 API에서 데이터를 가져오는 일이 많습니다. 그런데 자바스크립트는 싱글 스레드 기반이라 시간이 오래 걸리는 작업이 있으면 다른 작업들이 블로킹(멈춤) 될 수 있어요.이 문제를 해결하기 위해 비동기 처리가 필요하고, 이걸 깔끔하게 해주는 문법이 바로 async/await입니다.async와 await란?개념 설명async비동기 함수임을 선언합니다. 항상 Promise를 반환합니다.awaitPromise가 끝날 때까지 기다리고, 그 결과값을 반환받습니다.쉽게 말해, "동기 코드처럼 보이지만 실제로는 비동기 처리"가 되는 마법 같은 문법이에요.실전 예제: 유저 리스트 불러오기 (주석 포함)import React, { useEffect, useSt.. [refactor] Lv.1 아키텍처 개선기: FSD 도입 이야기 리팩토링의 시작: 폴더 구조부터 정리하기이 프로젝트를 시작할 때 폴더 구조나 아키텍처에 대한 개념이 부족했다. 기능을 추가하는 데 집중하다 보니 폴더 구조는 점점 복잡해졌고 유지보수가 어려운 상태가 되었다. 코드가 어디에 위치해야 하는지 명확하지 않아 개발 속도가 느려지고 협업에도 문제가 발생하기 시작했다.이 문제를 해결하기 위해 폴더 구조를 정리하기로 했고 다양한 프론트엔드 아키텍처를 조사했다. 리액트 환경에서 유지보수성과 확장성을 고려했을 때 Feature-Sliced Design(FSD) 아키텍처가 적합하다고 판단했다.기존 폴더 구조기존 폴더 구조는 기능별 분류가 명확하지 않았고 코드가 여러 곳에 흩어져 있어 유지보수가 어려웠다.├── apis/│ ├── codingzone-api.js│ ├.. 이전 1 다음
