Per ardua ad astra.

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

NVM(Node Version Manager)들어가며노드(Node.js) 버전 관리자인 NVM(Node Version Manager)에 대해 간단히 정리해본다. NVM(Node Version Manager)개념Node.js 버전을 손쉽게 관리할 수 있는 명령줄(CLI) 도구Node.js는 자바스크립트 런타임이기 때문에, 프로젝트마다 다른 버전의 Node.js가 필요할 수 있다.이때 nvm을 사용하면 손쉽게 다음의 기능을 수행할 수 있다.여러 Node.js 버전 설치하기원하는 Node.js 버전으로 전환하기프로젝트에 맞는 버전만 사용할 수 있도록 제한하기 종류nvm의 종류에는 플랫폼에 따라 다음과 같이 2가지가 존재한다.플랫폼이름레포지토리 (설치 방법)MacOS / Linuxnvmhttps://g..

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 화면 이동 및 뒤로가기를 할 수 있..