전체 글 (22) 썸네일형 리스트형 [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.. 🐣자바스크립트에서 덕 타이핑(Duck Typing) 이해하기 위 동물이 강아지 같으신가요? 오리 같으신가요?? 자바스크립트는 주저 없이 ‘오리’라고 말합니다. 왜냐고요? ‘오리처럼 걷고, 오리처럼 운다면 그것은 오리다.’바로 20세기 미국 철학자 제임스 휘트컴 라일리가 남긴 덕 테스트(Duck Test) 라는 격언에서 비롯된 말입니다. 이 ‘덕 테스트’에서 파생된 개념이 바로 프로그래밍 세계의 덕 타이핑(Duck Typing) 이죠. 자바스크립트는 객체가 어떤 클래스인지보다 오리처럼 행동(메서드·프로퍼티)을 할 수 있는지를 기준으로 타입을 판단합니다.우선 덕 타이핑을 알아보기 전에, 자바스크립트가 어떤 타입 언어인지부터 짚고 넘어가야 합니다.자바스크립트는 흔히 “유연한 언어”라고 불리지만, 그 이유를 정확히 이해하려면정적 타입 언어와 동적 타입 언어의 차이를 먼저.. Tree 프로젝트 | 애니메이션 구현기 – React + SVG 느낌 내기 이번 Tree 프로젝트에서는 사용자의 감정 기록 데이터를 시각화하여 보여주는 기능 중 하나로 트리 트렁크 애니메이션을 구현했습니다.이 애니메이션은 사용자가 얼마나 많은 질문에 응답했는지를 기반으로 트리 위에 알록달록한 "나뭇잎"을 떠다니듯 그려주는 방식입니다.이번 글에서는 이 트리 트렁크가 어떻게 동작하는지 코드 중심으로 분석하고 어떤 고민을 했는지도 함께 공유하려 합니다.목적: 감정 기록의 시각화사용자는 매일 감정에 대한 질문에 응답합니다.이 응답 수치를 트리 열매 개수로 시각화하면 성취감과 피드백을 줄 수 있을 것 같았고 그걸 시도한 UI 요소가 바로 트리 트렁크입니다.색상은 유저의 아바타에 따라 다르게const COLOR_MAP = { GREEN: [...], YELLOW: [...], PIN.. Tree 프로젝트 | 감정을 위한 명언 기능 구현기 – ZenQuotes API + CORS 우회 이번 프로젝트 tree는 사용자의 감정 기록을 기반으로 자기 회복을 도와주는 앱입니다.그중에서도 ‘오늘의 명언’ 기능은 감정에 직접적으로 영향을 주는 중요한 요소로 작동합니다.이 기능은 ZenQuotes API를 활용하고, 프론트엔드만으로 구현되었습니다. 왜 명언 API가 필요했을까?tree는 감정을 다루는 앱입니다.기록도 중요하지만, 사용자의 감정 흐름을 다독여줄 따뜻한 문장이 곁에 있어야 한다고 생각했습니다.명언 API 후보 정리API 이름 URL 특징ZenQuoteshttps://zenquotes.io/api/today무료, 오늘의 명언 제공, CORS 차단FavQshttps://favqs.com/api/qotd다양한 명언, API Key 필요, CORS 차단Quotablehttps://api.qu.. 🚀실시간 통신을 위한 WebSocket, 그리고 .emit, .on 개념 정리 이번에 사이드 프로젝트에서 관리자-사용자 간 실시간 채팅 기능을 설계하게 되었어요.이전까지는 HTTP 기반 REST API만 사용했는데, "서버가 먼저 사용자에게 메시지를 보내야 하는" 구조가 필요해지면서처음으로 WebSocket을 공부하게 되었습니다. 아직은 실제 구현을 하진 않았지만, 채팅 흐름을 설계하면서 익힌 내용을정리해두면 좋겠다는 생각에 이 글을 작성하게 되었습니다.🚀 WebSocket이란?🚀기존 웹 통신 방식은 주로 HTTP 기반입니다.클라이언트가 요청(request)을 보내야만 서버가 응답(response)을 줄 수 있는 구조예요.하지만 실시간 채팅이나 알림 기능처럼,👉 "서버가 먼저 말을 걸어야 하는" 상황에서는 이 구조로는 한계가 있습니다. 그래서 등장한 것이 바로 WebSocke.. Tailwind CSS – 헷갈렸던 포인트 정리 목차Tailwind CSS란?핵심 개념Tailwind의 장점반응형 디자인시행착오 및 해결방법마무리참고 자료프론트엔드 작업을 하다가 처음으로 Tailwind CSS를 도입하게 되었다. utility-first 방식이라는 건 알고 있었지만, 막상 사용해보니 클래스가 너무 많고 순서도 헷갈리고 중첩도 안 되고... 처음이라 그런지 어려웠던 점들이 많았다.이 글은 Tailwind CSS가 무엇인지 그리고 내가 겪은 시행착오와 해결 방법을 정리해둔 글이다. Tailwind를 처음 써보는 분들에게 도움이 되길! 🌟 Tailwind CSS란? 🌟Tailwind CSS는 유틸리티 퍼스트(utility-first) CSS 프레임워크이다.즉, 미리 만들어진 "작은 조각의 스타일 클래스들"을 HTML 요소에 조합하여 .. React에서 useEffect(() => {}, [])를 쓰는 이유 📚 목차useEffect란?useEffect의 두 번째 인자, dependency array빈 배열 []을 넣는 이유는?실전 예시의존성 배열을 잘못 쓰면 생기는 문제요약 정리마무리 React를 처음 접했을 때 useEffect(() => {...}, [])처럼 빈 배열이 왜 필요한지 의아했던 적 있지 않으신가요?이 글에서는 useEffect의 기본 개념부터, 왜 종종 "빈 배열"을 함께 사용하는지에 대해 하나하나 쉽게 정리해볼게요.1️⃣ useEffect란?useEffect는 React 컴포넌트가 렌더링될 때 부수 효과(side effect) 를 실행할 수 있게 해주는 Hook입니다.부수 효과란?데이터를 불러오는 작업 (fetch)이벤트 리스너 등록타이머 설정콘솔 출력, 로깅 등useEffect(() .. 이전 1 2 3 다음
