메티의 블로그

블로그 글에서는 OpenAI의 LLM API를 활용하여 블로그 글 요약 기능을 도입하는 과정과 그에 따른 문제 해결 방법을 설명하고 있습니다. 또한, 로컬 LLM인 Ollama를 사용하여 개발 환경에서 비용을 절감하며 기능을 검증한 경험을 공유하고 있습니다.

이 글은 리액트의 디자인 패턴인 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 설정 및 도메인 인증 방법에 대한 세부적인 내용도 포함되어 있습니다.

이 블로그 글에서는 Next.js 14를 사용하여 Notion API를 연동하는 방법에 대해 설명하고 있습니다. Notion에서 작성한 글을 블로그에 쉽게 게시할 수 있도록 API를 활용하는 과정과 필요한 라이브러리, 주의사항 등을 다루고 있습니다.

이 글에서는 Mock Service Worker (MSW) 라이브러리를 사용하여 Next.js 애플리케이션의 클라이언트 사이드에서 백엔드 서버를 모의하는 방법을 설명합니다. 또한, 클라이언트 컴포넌트를 테스트하기 위한 환경 설정과 테스트 진행 과정에 대해 언급하고 있습니다.

이 블로그 글은 자바스크립트의 객체 리터럴에 대한 설명과 함께, 객체 생성 방식, 프로퍼티의 구조, 그리고 V8 엔진의 히든 클래스 캐싱 메커니즘에 대해 다루고 있습니다. 또한, 자바스크립트 객체의 동적 특성과 성능 최적화 방법에 대해서도 언급하고 있습니다.

이 글은 react-hook-form 라이브러리에 대한 간단한 소개와 사용 방법을 설명하고 있습니다. 특히 성능과 확장성, 폼 검증 기능을 강조하며, 제어 컴포넌트와 비제어 컴포넌트의 차이점도 다루고 있습니다.

이 블로그 글은 TanStack Query(구 React Query)의 기능과 장점을 설명하며, 비동기 상태 관리의 필요성과 이를 통해 개발자가 경험하는 변화에 대해 논의합니다. 또한, queryKey와 queryFn을 활용한 데이터 관리 방법 및 v5 버전의 새로운 기능에 대한 의견을 공유하고 있습니다.

이 블로그 글은 Linux에서 SSH 서버를 설치하고 설정하여 팀원들이 원격으로 접속할 수 있는 환경을 구축하는 과정을 설명하고 있습니다. 또한, 보안상의 이유로 22 포트를 직접 열어두는 것을 권장하지 않는 점도 언급하고 있습니다.

이 블로그 글은 잘못 설정된 verdaccio 서버의 볼륨을 찾아 백업하는 과정을 설명하고 있습니다. 저자는 컨테이너가 종료될 경우 데이터 손실을 방지하기 위해 필요한 조치를 취한 경험을 공유하고 있습니다.

이 글은 AWS Lightsail을 사용하여 Next.js 프로젝트를 배포하는 과정에 대해 설명하고 있습니다. 인스턴스 생성, 도메인 연결, 그리고 배포 과정에서의 문제 해결 방법을 다루고 있습니다.

이 글에서는 유닉스 계통 파일 시스템에서 사용되는 Inode와 링크의 종류인 하드 링크와 심볼릭 링크에 대해 설명하고 있습니다. 하드 링크는 원본 파일과 동일한 Inode를 공유하여 원본 파일 삭제 후에도 사용 가능하며, 심볼릭 링크는 원본 파일의 포인터만 포함하여 원본 파일 삭제 시 에러를 발생시킵니다.

이 글에서는 textarea 입력란의 높이를 3줄로 제한하는 방법에 대해 설명합니다. CSS와 JavaScript를 활용한 구체적인 코드 예시가 포함되어 있습니다.

Margin Collapsing은 여러 요소의 위아래 마진이 가장 큰 마진 값을 가진 요소의 마진으로 합쳐지는 현상입니다. 이 현상이 발생하는 상황에 대한 설명이 이어질 것으로 보입니다.

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

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

이 글은 JSX의 개념과 React에서의 역할, 그리고 JSX 코드가 어떻게 JavaScript로 변환되는지를 설명하고 있습니다. 또한 JSX 사용 시 유의사항과 17버전에서의 새로운 변환 방식에 대해서도 언급하고 있습니다.

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

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