케빈의 기술블로그

개념 소개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, ..

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

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앱 ..

우리는 지금 기술의 대변혁기에 살고 있습니다. 10년 전만 해도 상상 속에서나 가능했던 일들이 이제는 일상이 되었죠. 스마트폰으로 전 세계 정보를 손바닥 안에서 확인하고, AI 비서와 대화를 나누며, 가상현실 속에서 여행을 즐기는 시대입니다. 그렇다면 앞으로는 어떤 변화가 우리를 기다리고 있을까요? 2025년은 그리 멀지 않은 미래입니다. 하지만 이 짧은 시간 동안 IT 기술은 또 한 번 큰 도약을 이룰 것으로 예상됩니다. 저는 IT 분야에서 15년 넘게 일하면서 기술의 발전 속도가 점점 더 빨라지고 있음을 체감하고 있습니다. 특히 최근 몇 년간의 변화는 그 어느 때보다도 급격했죠. 이 글에서는 제가 경험과 연구를 바탕으로 예측한 2025년의 주요 IT 트렌드 5가지를 소개하려고 합니다. 이 트렌드들은 ..

리액트에서 컴포넌트는 가장 큰 장점 중 하나이며, 리액트를 쓰는 가장 큰 이유이기도 합니다. 컴포넌트는 단순한 템플릿 이상이라고 표현합니다. 쉽게 재 사용이 가능할 뿐만 아니라 라이플 사이클 API를 통해서 작업들을 처리할 수 있으며, function 또는 method 등을 이용해서 화면을 정의할 수 있습니다. 무엇보다도 기능 단위 또는 화면 단위로 컴포넌트를 관리할 수 있어서 관리도 수월하며, 한 파일에 모두 작성하지 않아도 되어, 코드 작성 시 가시성이 좋습니다. 1. 컴포넌트 생성 그럼 이제 간단한 컴포넌트를 생성하는 실습을 해보도록 하겠습니다. 어떠한 편집기를 사용해도 상관 없지만, 필자는 Visual Studio Code를 사용하였습니다. 그럼, 아래 그림과 같이 src/sample 하위에 오른..