케빈의 기술블로그

개념 소개Jotai는 React 애플리케이션을 위한 최신 상태 관리 라이브러리입니다. '원자적(atomic)' 접근 방식을 채택하여 글로벌 상태를 관리합니다. 이는 Recoil에서 영감을 받아 개발되었으며, React의 Context API와 useState 훅의 장점을 결합한 형태라고 볼 수 있습니다.Jotai의 주요 특징:간단한 API: useState와 유사한 직관적인 사용법타입스크립트 지원: 강력한 타입 추론 기능자동 최적화: 불필요한 리렌더링 방지유연성: 단순한 상태부터 복잡한 비동기 상태까지 처리 가능사용 방법 및 예시1. 기본 사용법먼저 Jotai를 설치합니다:npm install jotai그리고 기본적인 atom을 생성하고 사용하는 방법은 다음과 같습니다:import { atom, useA..

React Query v5로의 전환은 큰 변화를 수반하지만, 랩핑 함수를 활용한 점진적 마이그레이션 전략을 통해 이 과정을 효과적으로 관리할 수 있습니다. 이 글에서는 랩핑 함수를 사용하여 v4에서 v5로 안전하고 효율적으로 마이그레이션하는 방법을 살펴보겠습니다.마이그레이션의 필요성과 도전 과제React Query v5는 성능 개선과 새로운 기능을 제공하지만, API의 변경으로 인해 기존 코드의 수정이 불가피합니다. 대규모 프로젝트에서 모든 쿼리를 한 번에 업데이트하는 것은 위험하고 비효율적일 수 있습니다. 이때 랩핑 함수 전략이 유용합니다.랩핑 함수 전략 소개랩핑 함수 전략의 핵심은 v4와 v5 API를 모두 지원하는 중간 계층을 만드는 것입니다. 이 접근 방식의 주요 이점은 다음과 같습니다:점진적 마..

React Query v5가 출시되면서 많은 개발자들이 마이그레이션을 고민하고 있습니다. 이 글에서는 v4에서 v5로 효과적으로 전환할 수 있는 현실적인 방안을 살펴보겠습니다.마이그레이션 준비1. 의존성 업데이트먼저 package.json 파일에서 @tanstack/react-query 패키지를 최신 v5 버전으로 업데이트합니다.npm install @tanstack/react-query@latest2. 최소 요구사항 확인React Query v5는 다음과 같은 최소 요구사항이 있습니다:TypeScript v4.7 이상React v18.0 이상프로젝트의 의존성이 이를 충족하는지 확인하고, 필요하다면 업데이트합니다.주요 변경사항 적용1. 단일 객체 시그니처로 통일v5에서 가장 큰 변화는 useQuery, ..

React Query가 v5로 업그레이드되면서 더욱 강력하고 사용하기 쉬워졌습니다. 이번 버전에서는 성능 개선과 API 간소화에 중점을 두었습니다. 주요 변경사항과 새로운 기능들을 살펴보겠습니다. 주요 변경사항 🔄단일 객체 파라미터 지원 📦useQuery, useInfiniteQuery, useMutation 등의 훅들이 이제 하나의 객체만을 파라미터로 받습니다. 이는 코드의 일관성을 높이고 타입스크립트 사용성을 개선합니다.// 이전 버전useQuery(queryKey, queryFn, options)// v5useQuery({ queryKey, queryFn, ...options })네이밍 변경 🏷️cacheTime → gcTime: 가비지 컬렉션 시간을 더 명확히 표현loading 상태 → pe..

Flutter는 구글에서 개발한 크로스 플랫폼 UI 프레임워크로, 단일 코드베이스로 iOS, Android, 웹, 데스크톱 애플리케이션을 개발할 수 있습니다. Flutter의 핵심 개념과 특징을 살펴보고, 간단한 예제를 통해 기본적인 사용법을 알아보겠습니다. Flutter의 핵심 개념1. 위젯 (Widgets)Flutter에서는 모든 UI 요소가 위젯으로 구성됩니다. 텍스트, 버튼, 레이아웃 등 모든 것이 위젯입니다. 위젯은 크게 두 가지로 나뉩니다:StatelessWidget: 상태가 변하지 않는 정적인 위젯StatefulWidget: 상태가 변할 수 있는 동적인 위젯2. 상태 관리 (State Management)StatefulWidget에서는 상태를 관리할 수 있습니다. setState() 메서드를..

정지아 작가의 소설 '아버지의 해방일지'는 한국 현대사의 아픔을 개인의 삶을 통해 섬세하게 그려낸 작품입니다. 이 소설은 빨치산 출신 아버지의 장례식을 통해 한 가족의 역사와 그들을 둘러싼 사회적 갈등을 탐구합니다.줄거리와 주요 인물소설은 주인공 아리의 아버지가 갑작스럽게 사망하면서 시작됩니다[1]. 아리는 아버지의 장례식 3일 동안 다양한 조문객들을 만나며 자신이 몰랐던 아버지의 모습을 새롭게 발견하게 됩니다[6].아버지 고상욱은 평생을 사회주의자로 살아온 인물로, 그의 신념은 가족에게 큰 영향을 미쳤습니다[3]. 아리와 그녀의 친척들은 '빨치산의 자식'이라는 낙인으로 인해 많은 어려움을 겪었습니다.주제와 의미이 소설은 단순히 이념적 갈등을 다루는 것을 넘어 인간에 대한 깊은 이해와 화해의 메시지를 전..

Supabase는 개발자들이 빠르고 효율적으로 웹 및 모바일 애플리케이션을 구축할 수 있도록 돕는 오픈소스 백엔드 서비스입니다. Firebase의 대안으로 자주 언급되는 Supabase는 PostgreSQL 데이터베이스를 기반으로 하여 강력한 기능들을 제공합니다.Supabase의 주요 기능데이터베이스: PostgreSQL 기반의 관계형 데이터베이스를 제공합니다.인증: 사용자 관리 및 다양한 인증 방식을 지원합니다.실시간 기능: 실시간 데이터 동기화를 가능하게 합니다.스토리지: 파일 업로드 및 관리 기능을 제공합니다.API: RESTful API와 GraphQL을 자동으로 생성합니다.Edge Functions: 서버리스 함수를 실행할 수 있습니다.다른 서비스와의 비교Supabase vs Firebase특징..

VS Code에서 TypeScript와 Next.js를 함께 사용하기 위한 환경을 설정하는 방법을 단계별로 알아보겠습니다. 🚀1. Next.js 프로젝트 생성먼저, 터미널에서 다음 명령어를 실행하여 TypeScript를 사용하는 Next.js 프로젝트를 생성합니다:npx create-next-app@latest my-nextjs-app --typescript프로젝트 생성 중 나타나는 질문들에 적절히 답변해주세요.2. VS Code 설정생성된 프로젝트 폴더를 VS Code로 엽니다:cd my-nextjs-appcode .VS Code에서 다음 확장 프로그램들을 설치합니다:ESLintPrettier - Code formatterTypeScript TSLint Plugin3. TypeScript 설정tsco..

안녕하세요, 디자이너 여러분! 오늘은 Figma에서 사용할 수 있는 아주 유용한 플러그인, 'Google Sheets Sync'에 대해 알아보겠습니다. 이 플러그인을 사용하면 구글 스프레드시트의 데이터를 Figma 디자인에 쉽게 연동할 수 있어요. 특히 대량의 데이터를 다룰 때 정말 큰 도움이 됩니다!1. 플러그인 설치하기먼저, Figma에서 Google Sheets Sync 플러그인을 설치해야 합니다.Figma 커뮤니티에서 'Google Sheets Sync'를 검색합니다.플러그인을 찾으면 'Install' 버튼을 클릭하세요.💡 개인적인 의견: 이 플러그인은 정말 게임 체인저예요! 특히 여러 페이지의 프로토타입을 만들 때 시간을 엄청나게 절약할 수 있습니다.2. 구글 스프레드시트 준비하기이제 Figm..

윈도우와 맥 사용자들이 서로의 시스템을 사용할 때 가장 혼란스러워하는 부분 중 하나가 바로 키보드 단축키입니다. 두 운영 체제는 비슷한 기능을 제공하지만, 사용하는 키가 조금씩 다릅니다. 이 글에서는 가장 많이 사용되는 단축키들을 비교해보겠습니다.기본 단축키 비교기능윈도우맥복사Ctrl + CCommand + C붙여넣기Ctrl + VCommand + V잘라내기Ctrl + XCommand + X실행 취소Ctrl + ZCommand + Z다시 실행Ctrl + YCommand + Y모두 선택Ctrl + ACommand + A저장Ctrl + SCommand + S찾기Ctrl + FCommand + F시스템 단축키기능윈도우맥앱 전환Alt + TabCommand + Tab창 닫기Alt + F4Command + W앱 ..