메티의 블로그

이 글은 리액트의 디자인 패턴인 HOC(고차 컴포넌트), Render Props, 그리고 Hooks에 대해 설명하고, 각 패턴의 특징과 장단점을 비교합니다. 또한, 이들 패턴이 어떻게 컴포넌트 간의 로직 재사용을 가능하게 하는지에 대해 논의합니다.

이 글에서는 Mediator 패턴과 Middleware 패턴에 대해 설명하고 있습니다. Mediator 패턴은 객체 간의 직접 통신을 제한하고 중재자를 통해 상호작용을 관리하는 방식이며, Middleware 패턴은 express.js에서 요청과 응답 사이에 여러 동작을 추가하는 역할을 합니다.

이 글에서는 모듈 패턴의 개념과 역사, 그리고 ES6 이후 JavaScript에서의 모듈 기능 지원에 대해 설명하고 있습니다. 또한, 모듈 패턴의 장단점과 트리 쉐이킹에 대한 내용을 다루고 있습니다.

이 글에서는 디자인 패턴 중 싱글턴, 프록시, 그리고 프로바이더 패턴에 대해 설명하고 있습니다. 각 패턴의 특징과 장점, 사용 사례를 다루며, 특히 자원 관리와 의존성 주입에 대한 중요성을 강조합니다.

이 블로그 글에서는 PNPM의 카탈로그 기능을 활용하여 의존성을 태그로 분류하는 방법과 그 효과에 대해 설명하고 있습니다. 또한, 의존성 관리를 더욱 가시적으로 도와주는 VSCode 플러그인도 소개하고 있습니다.

타입챌린지 스터디를 통해 타입스크립트의 다양한 타입 정의와 검사 방법을 배우고 경험한 내용을 정리한 글입니다. 스터디를 통해 얻은 인사이트와 타입스크립트의 주요 기능에 대한 설명이 포함되어 있습니다.

이 블로그 글은 타입스크립트의 특별한 타입인 never, any, unknown, mixed에 대해 설명하고 각 타입의 역할과 특징을 간략히 정리하고 있습니다. 또한, 타입스크립트의 타입을 집합으로 이해하는 것이 중요하다는 점을 강조하고 있습니다.

타입챌린지 스터디의 다양한 문제 풀이를 통합한 포스트로, 제네릭 및 타입 관련 문제들을 다루고 있습니다. 각 문제는 특정 타입을 구현하거나 변환하는 과제를 포함하고 있습니다.

블로그의 URL을 ID 기반에서 제목 기반의 유저 친화적인 slug URL로 전환하는 과정을 설명하고, 이 과정에서 발생한 문제와 해결 방법을 공유합니다. 최종적으로 리디렉션을 통해 검색엔진 최적화와 사용자 경험 개선을 목표로 했음을 강조합니다.

이 글은 B2B 커머스 앱의 프론트엔드 개발을 1인으로 진행한 경험을 회고하며, 사용한 기술 스택과 개발 과정에서의 어려움 및 배운 점을 정리한 내용입니다. 특히, 프로젝트의 구조, 라이브러리 선택, 개발 루틴 등을 상세히 설명하고 있습니다.

이 블로그 글은 React 프로젝트에서 디렉터리 기반 라우팅을 적용하기 위해 vite-plugin-pages 플러그인을 사용하는 방법에 대해 설명하고 있습니다. 또한, 이 플러그인의 기능과 제한 사항에 대해서도 언급하고 있습니다.

이 블로그 글에서는 각 프로젝트별로 Node.js 버전을 관리하는 방법으로 NVM과 .nvmrc 파일의 사용법을 설명하고 있습니다. 또한, 자동으로 Node.js 버전을 변경할 수 있는 스크립트 설정 방법과 관련된 문제 해결 과정을 다루고 있습니다.

이 블로그 글에서는 GitHub Actions와 pnpm을 사용한 CI 설정 과정에서 발생한 에러와 그 해결 과정을 설명하고 있습니다. 또한, CI 환경에서의 캐시 설정과 pnpm의 글로벌 패키지 스토어 관리에 대한 이해를 공유하고 있습니다.

이 글에서는 Vercel에 배포한 사이트에 가비아에서 구매한 커스텀 도메인을 적용하는 과정을 설명하고 있습니다. DNS 설정 및 도메인 인증 방법에 대한 세부적인 내용도 포함되어 있습니다.

이 글에서는 React의 useEffect와 useLayoutEffect의 차이를 설명하고 있습니다. useEffect는 화면이 그려진 후 콜백이 실행되는 반면, useLayoutEffect는 화면이 그려지기 전에 콜백이 실행된다는 점을 강조하고 있습니다.

이 블로그 글은 React-query의 캐시 컨트롤 방법에 대해 설명하며, HTTP 캐시와의 유사성을 강조하고 있습니다. 또한, cacheTime과 staleTime 설정을 통해 효과적으로 캐시를 관리할 수 있음을 안내합니다.

이 블로그 글은 React에서의 Virtual DOM의 개념과 그 작동 방식을 설명하며, Critical Rendering Path와 Reconciliation 과정에 대해서도 다룹니다. 또한 Virtual DOM과 일반 DOM의 차이점에 대해 논의합니다.

이 글에서는 자바스크립트의 클로저와 어휘적 범위 지정에 대해 설명하고, 클로저가 어떻게 변수의 상태를 기억하고 접근할 수 있는지를 다룹니다. 또한 클로저의 활용 예시와 일반적인 실수에 대해서도 언급합니다.