전체 글
-
[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 패턴을 사용하지 않고도, 상태 로직을 추출하여 재사용할 수 있게 해 주었다. 이로써, 보다 간결하고 유연한 컴포넌트를 만들 수 있게 되었다. 이러한 변화는 객체지향 프로그래..
-
[TypeScript] 서브타입, 가변성Front-End/TypeScript 2025. 3. 8. 09:32
🍀목차글의 목적서브타입가변성공변(covariance)불변(invariance)반변(contravariance) 글의 목적 타입 시스템에서 서브타입과 가변성은 타입 안전성과 코드 유연성의 균형을 이루도록 도와준다.서브타입에 의한 다형성으로 재사용성과 확장성을, 가변성으로 제네릭 타입 간 서브타입 관계를 정의할 수 있다. 이 글은 «타입으로 견고하게 다형성으로 유연하게» 4장 3 챕터의 내용을 정리하고 추가로 학습한 내용을 담고 있다. 서브타입과 가변성(공변, 불변, 반변)을 이해하는 데 도움이 되었으면 한다. 서브타입 서브타입은 한 타입이 다른 타입의 하위 타입이 되는 관계를 의미한다. "B는 A다"가 사실이면 B는 A의 서브타입이다. // Aclass Person { age: number..
-
[WizSched] Toast Component 개선기Front-End/Project 2025. 2. 22. 09:56
🍀목차글의 목적useToast 커스텀 Hook 만들기개선 1 : Provider 사용개선 2 : useRef 사용최종 완성 글의 목적 Toast 컴포넌트는 사용자에게 일시적으로 표시되는 안내 메시지를 제공하는 컴포넌트이다. 프로젝트에 사용할 Toast 컴포넌트를 만들던 중, 겪었던 문제와 개선 방법을 정리하면 좋을 것 같았다. 같은 문제를 겪고 있는 사람에게 쉽고 유용한 정보가 되었으면 한다. useToast 커스텀 Hook 만들기 아래는 Toast 컴포넌트가 해야 할 동작을 생각하며 간단히 작성해 본 코드이다.open toast 버튼을 클릭하면 show라는 state를 true로 바꿔 🍞가 화면에 표시되었다가 3초 뒤에 사라진다. import { useState, useEffect } fr..
-
[WizSched] Supabase Table에 데이터를 넣어보자Front-End/Project 2025. 2. 14. 21:30
🍀목차Table 만들기Form 컴포넌트, Zod 라이브러리테스트 Table 만들기 Enable Row Level Security(RLS) : Database 보안 기능 중 하나, 활성화하면 Postgres Policy를 작성하여 해당 테이블에 대한 접근을 제한할 수 있다(예를 들어, 로그인한 회원만 데이터 접근이 가능하도록 할 수 있다). RLS가 어떤 기능인지 와닿지 않아 RLS를 체크한 테이블(YES_RLS)과 체크하지 않은 테이블(NOT_RLS)을 만들어 테스트해 봤다. RLS를 체크한 테이블은 기본적으로 Policy(정책)이 설정되어 있어야 데이터 조회가 된다. 정책을 설정하지 않는다면 조회가 불가능하다. 로그인한 사용자만 SELECT 접근이 가능하도록 설정해 봤다. ..
-
[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 (..
-
[React] Fiber Architecture : 어떤 것이 개선되었고, Fiber는 어떤 구조일까?Front-End/React 2024. 11. 16. 07:27
🍀목차글의 목적Virtual DOM?Stack ReconcilerFiber Reconciler코드로 이해하기 글의 목적 React의 Fiber 아키텍처는 React 16 버전부터 도입되어 현재까지 업데이트되고 있는 코어 아키텍처이다.기존 스택 기반의 알고리즘을 개선한 아키텍처이며 어떤 부분을 고민했고, 어떤 구조인지 알고 싶어 글을 작성하게 되었다. 부족한 부분이 많겠지만 나와 같은 상황의 학습자에게 도움이 되는 글이었으면 한다. Virtual DOM? HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소 중 하나이며 여러 요소들로 이루어져 있다. 이 요소들은 구문 분석 과정을 거쳐 의미 있는 토큰으로 만들어진다. 토큰들은 프로그래밍 언어가 이해할 수 있게 ..
-
[React] useMemo : 어떻게 Memoization 하는 것일까?Front-End/React 2024. 10. 25. 22:17
🍀목차글의 목적useMemo 문서 읽어보기실제로 측정해 보자코드 확인 글의 목적React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useMemo는 React의 대표적인 성능 최적화 Hook이다. 어떤 값을 계산하는 데 오랜 시간이 걸린다면 유용하게 사용할 수 있다. 어떤 식으로 메모이제이션 하며, 실제로 어느 정도의 효율을 내는 지 궁금하여 측정해보았다.useMemo 문서 읽어보기문서 useMemo(calculateValue, dependencies) calculateValue : 캐싱하려는 값을 계산하는 함수. 순수해야 하며, 모든 타입의 값을 반환할 수 있어야 한다. React는 초기 렌더링 중에서 함수를 호출한 결과를 반환한다. 다음 렌더링에..
-
[React] useEffect : 오용을 경계하자Front-End/React 2024. 9. 29. 15:46
🍀목차글의 목적useEffect 문서 읽어보기(Event vs Effect)1 - Effect는 동기화에만 사용하자2 - Effect의 생명주기는 컴포넌트의 생명주기와 다르다3 - 데이터 페칭 목적으로 사용 시 주의하자 글의 목적 React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useEffect는 컴포넌트 렌더링 후 특정 작업을 수행하거나 외부 시스템과 컴포넌트를 동기화할 때 유용한 Hook이다. 그리고 오용을 주의해야 하는 Hook이기도 하다. - Effect로 인해 무한루프에 빠질 때도- 의존성 배열에 경고가 뜰 때도- 혹은 useEffect 자체의 목적을 잊어버리는 경우도 있는데이번 글은 useEffect의 목적과 대표적인 주의점에 대해 ..
