Front-End/ETC
-
[React] Favor composition over inheritanceFront-End/ETC 2025. 3. 21. 18:33
🍀목차Inheritance(상속) : 개념과 장단점Composition(합성) : 상속을 보완하는 방법균형 : IS-A와 HAS-A의 이해와 적절한 적용 글의 목적 React 컴포넌트는 클래스와 함수로 정의할 수 있다. 현재는 함수 컴포넌트가 권장되나, 여전히 클래스 컴포넌트도 지원되고 있다. 그렇다면, 왜 함수 컴포넌트로의 변화가 일어났을까? React v16.8에 도입된 Hooks에 React 팀의 고민이 담겨있다. Hooks는 고차 컴포넌트(HOC, Higher Order Component)나 Render Props 패턴을 사용하지 않고도, 상태 로직을 추출하여 재사용할 수 있게 해 주었다. 이로써, 보다 간결하고 유연한 컴포넌트를 만들 수 있게 되었다. 이러한 변화는 객체지향 프로그래..
-
[Pattern] One-way Data Flow : Flux, Redux, ReactFront-End/ETC 2025. 2. 7. 17:16
🍀목차글의 목적cf. Two-way Data FlowFlux, Redux, React느낀 점 글의 목적 1년 전, React의 상태 관리에 관한 글을 작성했다. https://youngju-js.tistory.com/42 [React] 상태 관리 (+라이브러리)🍀 목차전역 상태상태 관리의 필요성대표적 라이브러리와 콘셉트계속되는 연구들 전역 상태 상태는 변화하는 동적인 데이터이다. 웹 페이지에서 데이터는 사용자와 상호작용을 통해 변경youngju-js.tistory.com 상태 관리의 필요성과 관련 라이브러리들을 살펴보면서, Redux의 탄생에 큰 영감을 준 Flux 아키텍처도 가볍게 알아보았다. 이번 글에서는 Flux 아키텍처의 핵심인 One-way (direction) Data Flow (..
-
[2024-W28] 인풋과 인사이트 정리 : 유튜브Front-End/ETC 2024. 7. 13. 01:33
🍀목차일론 머스크의 1원칙 사고법논리적으로 삽시다. 논리의 기초 통합편사람들이 더 똑똑해질 수 있게(노션 창업자 인터뷰)Even More Secrets about Perfect Spacing성공한 부자의 자랑보다 노련한 선배의 실패가 도움되는 이유 | 최성운의 사고실험 [한기용] 2부 일론 머스크의 1원칙 사고법https://www.youtube.com/watch?v=Nt0lCENkiK0 인풋 1원칙 사고법(First Principles Thinking)은 "진짜?"를 끝까지 물어 근본적인 사실부터 하나하나 생각을 발전시키는 사고법이다. 엔지니어링 문제는 절대로 물리법칙을 어길 수 없는데, 물리법칙은 '진짜'이기 때문이다. 이렇게, 1원칙 사고법은 물리학에서 차용되었다. 일론은 사람들이 안 된다고 하..
-
[2024-W16] 공부 정리Front-End/ETC 2024. 4. 18. 00:18
🍀 목차class-variance-authoritytailwind-mergestorybook용어 tailwind CSS의 단점으로 꼽히며 css-in-js의 장점으로 꼽히는 동적 스타일링 도움을 주는 것들cn, twMerge, clsx, cva class-variance-authority문서shadcn/ui 설치 시 install 되는 tailwind의 동적 스타일링에 도움을 주는 라이브러리cva는 매우 작은 라이브러리, variant를 편하게 줄 수 있다. tailwind-mergeshadcn/ui 설치 시 install 되는 tailwind class들을 merge 시킬 때 도움을 주는 라이브러리shadcn/ui에서는 cn = clsx(조건부 렌더링에 도움) + twMerge메서드를 utils로..
