Per ardua ad astra.

Console Error Attempting to parse an unsupported color function "lab" 문제 해결 방법 (html2canvas)들어가며Next.js와 TailwindCSS를 이용하여 개발할 때, @html2canvas@ 라이브러리를 이용하여 웹피이지를 이미지 파일로 저장하는 기능을 구현하려고 할 때, 다음과 같이 @lab()@ 관련 오류가 발생할 수 있다.Console Error Attempting to parse an unsupported color function "lab" Call Stack 10 Show 10 ignore-listed frame(s)이때 이 문제를 해결하는 방법을 간단하게 정리해본다. 해결 방법이 문제는 TailwindCSS / PostCSS..

Zustand들어가며전역 상태 라이브러리 중 하나인 Zustand에 대해 간단하게 정리해본다. Zustand개념독일어로 상태(Status)라는 뜻리액트 앱에서 전역 상태 관리를 해주는 아주 가볍고 단순한 라이브러리Redux의 복잡한 구조(Action, Reducer, Dispatch)를 사용하지 않고, Hooks 기반의 간단한 API 제공"minimal, fast, scalable"을 목표로 만들어졌다. 비교Redux와 비교Redux는 boilerplate한 코드가 많다.@action@, @reducer@, @slice@를 작성해야 한다.// Redux Toolkitconst slice = createSlice({ name: "counter", initialState: { count: 0 }, re..

AsyncStorage들어가며리액트 네이티브(React Native)에서 로컬에 간단한 데이터를 저장할 수 있는 비동기 저장소인 AsyncStorage에 대해 간단하게 정리해본다. AsyncStorage개념로컬에 간단한 데이터를 키-값(Key-Value) 쌍으로 저장하고 불러오는 비동기 저장소모바일 기기 내부에 데이터를 영구 저장하는 공간웹의 localStorage와 비슷하지만, 비동기 방식이며, 네이티브에 최적화되어 있다.앱 재실행 후에도 데이터를 유지할 수 있다.용량이 크지 않은 간단한 데이터 저장에 적합하다. (예: 토큰, 사용자 설정, 간단한 캐시 등) 설치리액트 네이티브 0.60 이상에서는 공식 패키지 @＠react-native-async-storage/async-storage@를 사용한다.$..

로딩 스피너(Loading Spinner) 만들기들어가며리액트 네이티브(React Native) 개발 중, 간단하게 로딩 스피너(Loading Spinner)를 만드는 방법을 정리해본다. 방법ActivityIndicator 이용하기리액트 네이티브 자체적으로 제공하는 @ActivityIndicator@를 이용하여 간단하게 로딩 스피너를 만들 수 있다. ① 로딩 스피너 컴포넌트 만들기로딩 스피너는 @ActivityIndicator@ 컴포넌트를 이용하여 만들 수 있다.import { View, ActivityIndicator, StyleSheet } from 'react-native';function LoadingOverlay() { return ( );}export default..

BlurView들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 블러 효과를 주는 BlurView 컴포넌트에 대해 간단히 정리해본다. BlurView개념Expo에서 제공하는 화면의 일부분에 블러(Blur, 흐림 효과)를 적용할 수 있게 해주는 시각적 컴포넌트React Native에서는 iOS와 Android의 네이티브 블러 효과를 직접 구현하는 것이 번거롭기 때문에, Expo는 이러한 블러 효과를 쉽게 적용할 수 있도록 @expo-blur@ 패키지를 제공한다. 사용 방법@BlurView@는 배경 이미지나 비디오 위에 올려야 효과가 명확하게 보인다.iOS에서는 기본적으로 잘 지원되며, Android는 일부 기기에서 제한될 수 있음에 주의한다.React Navigation 라이..

useLayoutEffect 훅들어가며리액트(React.js)의 @useLayoutEffect@ 훅에 대해 간단히 정리해본다. useLayoutEffect 훅개념컴포넌트가 렌더링되기 직전, 즉 브라우저가 화면을 그리기 전에 실행되는 훅화면에 변화가 나타나기 전에 어떠한 처리를 하고 싶을 때 사용한다. 사용 방법import { useLayoutEffect } from 'react';useLayoutEffect(() => { // 레이아웃 관련 변경, 동기적 DOM 조작 등에 사용한다.}, [dependencies]); useEffect 훅과 비교하기항목useEffect 훅useLayoutEffect 훅실행 시점컴포넌트 렌더링 후, 브라우저가 화면을 그린 뒤컴포넌트 렌더링 직후, 브라우저가 화면을 그리기 ..

화면 간 데이터 전달하기 (React Navigation)들어가며리액트 네이티브(React Native) 프로젝트에서 React Navigation 라이브러리를 이용하여 화면 간 이동(Navigation) 기능을 구현할 때, 화면 간 데이터를 전달하는 방법을 간단하게 정리해본다. 방법데이터 전달하기@navigate()@ 메서드를 사용할 때, 두 번째 인자로 객체를 전달하면 해당 데이터를 다음 화면에 보낼 수 있다.navigation.navigate('MealsOverview', { categoryId: itemData.item.id,}); ⇒ 첫 번째 인자: 이동할 화면 이름⇒ 두 번째 인자 : @params@ 객체 (원하는 데이터 포함) 데이터 추출하기방법 ① : route prop 사용하기@Meal..

React Navigation 라이브러리들어가며리액트 네이티브(React Native) 앱에서 화면 간의 전환을 쉽게 구현할 수 있도록 도와주는 라이브러리인 React Navigation에 대해 간단하게 정리해본다. React Navigation개념React Native 앱에서 화면 간의 전환(네비게이션)을 쉽게 구현할 수 있도록 도와주는 오픈소스 라이브러리React Native 앱에 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 추가할 수 있게 해준다.웹의 라우팅(@react-router@)과 비슷하지만, 모바일 환경에 맞춘 기능(스와이프, 제스처, 헤더 애니메이션 등)을 제공한다. 주요 기능기능설명스택 네비게이션(Stack Navigation)- A 화면 → B 화면 이동 및 뒤로가기를 할 수 있..

뒤로가기 기능 막는 방법들어가며리액트 네이티브(React Native)를 이용하여 만든 앱에서 특정 스크린에서 뒤로가기 기능을 막는 방법을 간단하게 정리해본다. 방법방법 ① : BackHandler API 이용하기 (Android)@react-native@ 패키지의 @BackHandler@ API를 사용해서 뒤로가기 이벤트를 무시하도록 설정할 수 있다.이 방법은 안드로이드(Android)에서 물리적인 뒤로가기 기능을 막아준다.iOS에서는 물리적인 뒤로가기 버튼이 없기 때문에 별도로 처리해주지 않아도 된다.import { useEffect } from 'react';import { BackHandler } from 'react-native';function myApp() { useEffect(() => ..

.jsx 파일 사용 하는 방법들어가며리액트 네이티브(React Native) 프로젝트에서 @.jsx@ 파일을 사용하는 방법을 간단하게 정리해본다.일반적으로 리액트 네이티브에서는 @.js@ 파일만 인식하며, @.jsx@ 파일을 사용하려고 할 경우 에러가 발생한다. 방법현재 리액트 네이티브 프로젝트의 @expo-cli@ 버전에 따라 방법 ① 또는 방법 ②의 방법을 따라한다. 방법 ① : metro.config.js 파일에 확장자 추가하기프로젝트 최상단 경로(@/@)의 메트로 설정 파일(@metro.config.js@)에 다음과 같이 코드를 추가한다.만약 해당 파일이 없을 경우 새로 생성해준다. /metro.config.jsmodule.exports = { resolver: { sourceExts: [..

StatusBar (react-native, expo-status-bar)들어가며리액트 네이티브(React Native)의 @StatusBar@와 엑스포(Expo)의 @expo-status-bar@에  대해 간단히 정리해본다. StatusBar (React Native)개념상단 상태 표시줄(시간, 배터리, 신호 등)의 스타일, 배경색, 표시 여부 등을 제어할 수 있는 React Native 내장 컴포넌트 사용 방법import { StatusBar } from 'react-native';export default function App() { return ( );} 주요 속성속성설명플랫폼@barStyle@- 텍스트 색상 설정▶ @default@ : 플랫폼별 기본 색상 (iOS ..

Platform API들어가며리액트 네이티브(React Native)의 Platform API에 대해 간단히 정리해 본다. Platform API개념리액트 네이티브에서 앱이 실행되고 있는 플랫폼(iOS, Android, Web 등)을 감지하고, 플랫폼별로 다른 동작이나 스타일을 구현할 수 있게 해주는 유틸리티 사용 방법불러오기import { Platform } from 'react-native'; ① Platform.OS현재 실행 중인 플랫폼을 문자열로 반환해 준다.@android@, @ios@, @web@, @windows@, @macos@const platform = Platform.OS;if (platform === 'android') { console.log('Running on Android'..

ScrollView들어가며리액트 네이티브(React Native)의 @ScrollView@ 컴포넌트에 대해 간단하게 정리해본다. ScrollView개념스크롤 가능한 컨테이너로, 자식 컴포넌트가 화면의 크기를 넘어설 때 스크롤(Scroll)을 통해 볼 수 있게 해주는 컴포넌트자식 요소들이 많거나 화면보다 커질 경우, 사용자가 스크롤해서 볼 수 있도록 만들어준다. 주요 속성속성타입설명@horizontal@@boolean@@true@로 설정 시, 가로 스크롤 가능 (기본 : 세로)@contentContainerStyle@@style@내부 콘텐츠 전체에 적용할 스타일@showsVerticalScrollIndicator@@boolean@세로 스크롤바 표시 여부@showsHorizontalScrollIndicato..

KeyboardAvoidingView들어가며리액트 네이티브(React Native)의 @KeyboardAvoidingView@ 컴포넌트에 대해 간단히 정리해 본다. KeyboardAvoidingView개념키보드가 화면에 나타날 때 입력 필드 등의 UI가 가려지는 문제를 해결하기 위해 사용되는 컴포넌트키보드 레이아웃이 표시될 때, 자식 요소를 위로 올려서 입력창을 가리지 않도록 해준다.Android에서는 기본적으로 잘 처리되나, iOS에서는 그렇지 않아 이 컴포넌트를 이용하면 유용하다. 주요 속성behavior키보드가 나타날 때의 동작 방식을 조절할 수 있다.플랫폼에 따라 동작이 다를 수 있기 때문에 @Platform.OS@를 통해 조건 분기해서 쓰는 것이 일반적이다.옵션설명@padding@키보드의 높이만..

에뮬레이터 디바이스 자동 회전 기능 켜는 방법 (Expo)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트를 에뮬레이터로 실행할 때, 디바이스 자동 회전 기능을 켜는 방법을 간단히 정리해본다. 방법(1) 애플리케이션 설정 파일(app.json) orientation 키 값 변경하기프로젝트 최상단 경로에 있는 애플리케이션 설정 파일(@app.json@)의 @orientation@ 키의 값을 다음과 같이 @default@로 설정해준다. /app.json{ "expo": { "name": "section-02", "slug": "section-02", "version": "1.0.0", "orientation": "default", "icon": "./as..

Dimensions API들어가며리액트 네이티브(React Native)의 내장 API 중 하나인 Dimensions API에 대해 간단히 정리해본다Dimensions API를 이용하여 현재 디바이스의 화면 정보를 가져올 수 있다. Dimensions API개념리액트 네이티브(React Native)에서 기본으로 제공하는 내장 API디바이스의 화면 크기(너비(Width)와 높이(Height)) 정보를 가져오는 데 사용된다.반응형 UI 구성에 활용할 수 있다.이러한 정보를 이용하여 폰트 크기(Font Size), 패딩(Padding), 마진(Margin) 등을 디바이스 화면 크기에 따라 조정할 수 있다. 사용하면 좋은 경우다양한 화면 크기에 맞춰 폰트, 간격, 크기를 조절할 때미디어 쿼리(Media Que..

플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)들어가며리액트 네이티브(React Native)에서 플랫폼 별(Android, iOS, Web)로 요소에 그림자 효과를 넣는 방법을 간단하게 정리해본다.  방법① AndroidAndroid에서는 @elevation@ 속성을 사용해서 요소에 그림자 효과를 넣어줄 수 있다.style={{ elevation: 5, // 숫자가 클수록 그림자가 진해진다. backgroundColor: 'white', // 배경색 있어야 그림자가 보이므로 넣어준다. borderRadius: 10,}} ② iOSiOS는 @elevation@ 속성이 인식되지 않는다.따라서 다음과 같은 4가지 속성을 사용하여 요소에 그림자 효과를 넣어줄..

아이콘 사용하기 (＠expo/vector-icons)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 아이콘(Icon)을 사용하는 방법을 간단하게 정리해본다.리액트 네이티브의 엑스포 프로젝트에서는 별다른 패키지를 설치하지 않고도 아이콘을 바로 사용할 수 있다. 방법1️⃣ 패키지 설치하기 (＠expo/vector-icons)Expo 프로젝트에서는 이미 기본적으로 @＠expo/vector-icons@ 패키지가 포함되어 있어서 따로 설치할 필요는 없다.하지만, 해당 패키지가 설치되어 있지 않을 경우, 아래 명령을 실행하여 설치해준다.$ expo install @expo/vector-icons 2️⃣ 아이콘 세트 불러오기우선, 아이콘 세트(Icon Set)를 불러와서 해당 아이콘 세..

커스텀 폰트 사용하기 (expo-font)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 커스텀 폰트를 적용하는 방법을 간단하게 정리해본다. 방법 1️⃣ 패키지 설치하기폰트 사용을 위해 @expo-font@ 패키지를 설치한다.$ expo install expo-font@expo install@ 명령은 현재 Expo 프로젝트의 버전과 호환되는 패키지를 자동으로 설치해준다.  2️⃣ 폰트 파일 준비하기프로젝트의 @/assets/fonts@ 폴더 안에, 추가할 커스텀 폰트 파일을 넣어준다.해당 폴더가 없을 경우, 새로 생성해준다. 4️⃣ 폰트 불러오기 (useFonts 훅)프로젝트 최상단에 있는 @App.js@ 파일에 다음과 같은 커스텀 폰트를 불러오는 코드를 추가해준다.@use..

SafeAreaView들어가며리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해 본다. SafeAreaView개념React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해 주는 컴포넌트@SafeAreaView@ 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다. 주요 기능노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 콘텐츠가 겹치지 않도록 자동으로 여백을 추가해 준다.다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해 준다. 사용 방법React N..

Alert API들어가며리액트 네이티브(React Native)에서 기본적으로 제공하는 Alert API에 대해 정리해본다. Alert API개념사용자가 알림을 띄울 수 있도록 도와주는 API기본적으로 네이티브(iOS와 Android) 알림 다이얼로그를 표시하는 데 사용된다.사용자가 알림을 확인하거나 취소할 수 있도록 버튼을 구성할 수 있으며, 다양한 설정 방법을 지원한다. 사용법기본 사용법@Alert@는 React Native에서 내장된 객체로, @alert()@ 메서드를 통해 알림을 띄울 수 있다.import { Alert } from 'react-native';Alert.alert('알림 제목', '알림 메시지'); 버튼 추가하기@Alert@는 기본적으로 @[확인]@ 버튼만 제공하지만, 여러 버튼을..

npm install vs. expo install들어가며리액트 네이티브(React Native) Expo 프로젝트에서 패키지를 설치하는 방법으로 @npm install@과 @expo install@ 2가지 방법이 있다.이 2가지 방법의 차이점을 간단하게 정리해본다. 패키지 설치 명령어1️⃣ npm install$ npm install 패키지명Node.js 패키지 관리 명령어npm(Node Package Manager)을 사용하여, 프로젝트의 package.json 파일에 정의된 패키지들을 설치한다.Expo 프로젝트에서 @npm install@을 사용하면, Expo와 관련된 버전 호환성 문제를 직접 해결해야 할 수 있다.Expo가 요구하는 특정 버전의 패키지와 호환되지 않을 수 있으므로 호환성 문제를 일..

환경 변수 파일 사용하기 (react-native-dotenv)들어가며리액트 네이티브(React Native)에서 환경 변수 파일(@env@)을 사용하는 방법을 정리해본다.@react-native-dotenv@ 라이브러리를 이용하여 환경 변수를 사용하는 방법이다. 방법1️⃣ react-native-dotenv 패키지 설치하기터미널에 아래 명령을 실행하여 프로젝트에 @react-native-dotenv@ 패키지를 설치한다.$ npm install react-native-dotenv # yarn add react-native-dotenv 2️⃣ @.env@ 파일 생성하기프로젝트 최상단 경로에 @.env@ 파일을 생성하고 환경 변수를 설정한다.API_URL=https://api.example.comAPP..

카메라 권한 요청 메시지 표시 방법 (Expo)들어가며엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 카메라 권한 요청 메시지를 표시하는 방법을 정리해본다. 방법패키지 설치터미널에서 아래 명령을 실행하여 @expo-camera@ 패키지를 설치해준다.$ npx expo install expo-camera 앱 설정 파일 구성하기  (@app.json@)프로젝트의 최상단에 있는 앱 설정 파일(@app.json@)에 아래의 내용을 추가해준다. /app.json{ "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) t..

TailwindCSS IntelliSense 활성화하기 (VS Code)들어가며VS Code에서 리액트 네이티브(React Native)를 이용하여 애플리케이션을 만들 때, TailwindCSS IntelliSense를 활성화 시키는 방법을 정리해본다. 방법(1) Tailwind CSS IntelliSense 확장 설치하기VS Code에서 Tailwind CSS IntelliSense 확장을 설치한다. Tailwind CSS IntelliSense - Visual Studio MarketplaceExtension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Codemarketplace.visualstudio.com (2) Tailwi..

리액트 애플리케이션 테스트 환경 구축하기 (Vite, TypeScript, React)들어가며Vite, TypeScript, React를 이용하여 프로젝트 템플릿을 생성하고, 리액트 애플리케이션 테스트 환경을 구축하는 방법을 정리해본다. 방법1️⃣ 프로젝트 생성하기Vite 프로젝트 설정하기프로젝트 이름을 설정한다.@React@와 @TypeScript@를 선택한다.$ npm create vite@latest 의존성 설치하기아래의 명령을 실행하여 패키지를 설치한 후, 실행해본다.$ npm install$ npm run dev 2️⃣ Vite 환경에서 테스트 설정하기Vitest 설치하기아래의 명령을 실행하여 Vitest를 설치한다.$ npm install -D vitest VitestVite 기반의 빠르고 간..

폼(Form) 처리 방법 (React 19)들어가며예제 코드와 함께 React 19에서 업데이트 된 폼(Form) 처리 방법에 대하여 간단하게 정리해본다. 사용 방법아래의 코드는 React 19에서 새로 추가된 Form 관련 기능들을 적용한 코드이다. Signup.jsximport { useActionState } from 'react';import { isEmail, isNotEmpty, isEqualToOtherValue, hasMinLength,} from '../util/validation';export default function Signup() { // React 19 이상에서는 폼 제출 시, formData 객체가 생성되고 함수의 인자로 가져와 특정 필드의 입력값을 가져올 수 있다..

컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법들어가며Next.js의 @@ 컴포넌트를 클릭하면, 기본적으로 화면의 최상단으로 스크롤이 된다.이러한 현상을 막는 방법을 정리해본다. 방법간단하다. 다음과 같이 @@ 컴포넌트의 @scroll@ 속성의 값을 @false@로 지정해주면 된다.import Link from 'next/link'; Move 참고 사이트 | Next.js" data-og-description="Enable fast client-side navigation with the built-in `next/link` component." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/app/api-refe..

Contentful들어가며Headless CMS 중 하나인 Contentful 서비스에 대하여 정리해본다. Contentful개념2013년 독일 베를린에서 만들어진  Headless CMS(Content Management System, 컨텐츠 관리 시스템) 서비스현재 Spotify, Red Bull, IKEA 등 굵직한 글로벌 기업들이 이 서비스를 이용하고 있다.프론트엔드와 백엔드(컨텐츠 저장 및 관리)가 결합된 구조와 달리, 프론트엔드와 백엔드가 분리된 형태의 컨텐츠 관리 시스템이다. Content that takes you everywhereBusiness moves faster when teams producing content have a platform that empowers them to ..

Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-app@latest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..