케빈의 기술블로그

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

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

VM Ware에 해킨토시를 설치하고 React Native 개발환경 구성을 해보겠습니다. 아래는 제가 설치한 해킨토시 버전입니다. catalina를 설치 했고, 해킨토시 설치 하는 방법은 구글에 많이 있으니 참고하시면 됩니다. 개발을 위해서 램을 10기가를 잡았는데도 조금은 버벅 거리네요. 1. Homebrew 설치 homebrew 설치 확인을 위해서 brew 버전을 확인해 봅니다. $brew --version Homebrew 2.2.5 Homebrew/homebrew-core (git revision 52ab; last commit 2020-02-12) 저는 2.2.5가 설치되어 있네요. 만약 설치가 안된 분들은 아래 링크로 접속하셔서 homebrew을 설치하시기 바랍니다. 아래 내용을 복사하셔서 te..

const는 ES6에서 새로 도입한 것으로 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드이며, let은 동적인 값을 담을 수 있는 변수 값을 선언할 때 사용하는 키워드입니다. ES6 이전에는 var 키워드를 사용했는데요, var 키워드는 사용할 수 있는 범위가 함수 단위였습니다. function fun1() { var val = 'hello' if(true) { var val = 'bye' console.log(val) //bye } console.log(val) //bye } 실제 결과 bye bye 위의 결과를 보면 5라인에서 출력한 변수 값은 bye가 출력되고, {} 불럭이 끝난 8라인에서는 'hello'가 'bye' 가 출력되는 것을 볼 수 있습니다. 이유는 위에서도 언급했..

요번 강좌에서는 자바스크립트의 확장형인 JSX에 대해서 알아보도록 하겠습니다. 또한, JSX에서 사용하는 조건부 연산과 자바스크립트 표현에 대해서 간략하게 살펴보겠습니다. 1. 코드 이해 Node.js의 주요 특징은 코드를 모듈화하여 재사용할 수 있다는 것입니다. Node의 내장된 모듈을 사용하거나, 자신의 코드를 모듈화 하여 재사용할 수 있습니다. 또한 남들이 만든 모듈도 npm 을 이용해서 쉽게 적용할 수 있습니다.이렇게 설치된 모듈은 import라는 키워드를 사용해서 불러와서 사용할 수 있습니다. 하지만 이는 Node.js의 기능이기 때문에 자바스크립트에서 이 기능을 지원하지 않습니다. 이러한 기능을 사용하기 위해서는 번들링(bundling) 도구를 이용해야 합니다. 번들은 파일을 묶는다는 의미로 ..