전체 글159 [RN] react-native-root-toast 라이브러리로 gif 넣어 커스텀 Toast 만드는 법 라이브러리 공식문서https://www.npmjs.com/package/react-native-root-toast?activeTab=readme react-native-root-toastreact native toast like component, pure javascript solution. Latest version: 4.0.1, last published: 4 months ago. Start using react-native-root-toast in your project by running `npm i react-native-root-toast`. There are 89 other projects in the npm registrwww.npmjs.com기본 사용법에서 텍스트 넣는 자리에 컴포넌트 .. 2025. 7. 16. [RN] expo Stack과 Tabs의 차이 이전화면으로 뒤로 가기 안되는 이유 회사에서 프로젝트 하나를 처음부터 혼자 맡아서 해보고 있다.api 나오기 전에 얼추 ui는 완성 했는데탭화면을 이동하다가 각 기종별로 제스처에 뒤로가기를 하면 이전화면으로 돌아갈 수 있도록 하라는 피드백을 받게 됐다.import { openModal } from "@/components/atom/Modal";import { useFocusEffect, useRouter, useSegments } from "expo-router";import { useCallback } from "react";import { BackHandler } from "react-native";import { colors } from "../constants";export const useBackHandler = () => { .. 2025. 7. 7. 자주 사용하는 lodash 메서드 정리 ✅ 배열 관련 메서드_.chunk(array, size)배열을 지정한 크기만큼 나눔_.compact(array)falsey 값(false, 0, '', null, undefined, NaN) 제거_.uniq(array)중복 제거_.flatten(array)한 단계 평탄화_.flattenDeep(array)깊이 있는 배열을 완전히 평탄화_.difference(arr1, arr2)arr1에만 있는 값 반환_.intersection(arr1, arr2)두 배열의 공통 요소 반환_.zip(arr1, arr2)같은 인덱스끼리 묶어서 배열로 만듦 ✅ 객체 관련 메서드메서드설명_.get(object, path, defaultValue)깊은 객체 접근 (예: user.profile.name)_.set(object, .. 2025. 5. 30. yarn local package 만드는 법 ✅ 목표 구조my-ui-kit/├── src/│ ├── MyButton.tsx //예시│ └── index.ts ├── package.json├── tsconfig.json├── .gitignore├── README.md├── babel.config.js└── .npmignore (또는 설정으로 src 제외하지 않도록 주의) ✅ 1. 패키지 초기화 (터미널 사용)mkdir my-ui-kitcd my-ui-kityarn init -y ✅ 2. TypeScript 설정yarn add -D typescriptnpx tsc --init // build 시 타입에러 나면 타입스크립트 설치yarn add typescript --dev// 다시 빌드yarn build 🔍 왜 필요한가요?tsc는 TypeSc.. 2025. 5. 29. [expo] expo-camera를 이용해서 바코드 스캔 구현하기 qr 말고 바코드 스캔하는 기능을 만들어야 하는데 전에 만든 기능은 RN 라이브러리이다 보니 Expo에서 제공하는 기능으로 바꾸려고 한다. Expo면 Expo 답게! RN이면 RN답게 ! 공식 문서를 보면 Expo BarCodeScanner 라이브러리가 있는게 이제는 사용하지 않는다고 나와 있으니 주의하시길! 안내문처럼 expo-camera를 사용하면 된다고 한다. https://docs.expo.dev/versions/latest/sdk/camera/ CameraA React component that renders a preview for the device's front or back camera.docs.expo.dev 위에 링크 들어가서 Expo 공식 문서 그대로 설치하고 사용하면 된다. 1. .. 2025. 4. 29. [expo] eas buil 및 배포하기 및 재배포 expo eas 공식 문서 보고 그대로 따라하면 되는게 그냥 복기할겸 한번 더 남겨야징 1. 최신 eas cli 설치npm install -g eas-cliyarn global add eas-cli 2. expo 계정 로그인eas login 3. 프로젝트 구성eas build:configure 여기서 안드로이드 빌드 중 에러가 날 수 있음🤖 Android buildThe field "cli.appVersionSource" is not set, but it will be required in the future. Learn moreIt looks like that you are using a custom metro.config.js that does not extend @expo/metro-config... 2025. 4. 29. JavaScript 실행컨텍스트(Execution Context) 이해하기 Execution Context(실행 컨텍스트)란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아 올린 후 실행하며 코드의 환경과 순서를 보장스택은 LIFO(Last In, First Out)의 구조로 마지막에 들어온 정보를 가장 먼저 접근한다.한다.여기서 환경이란 전역공간 또는 함수 내부의 환경이 될 수 있다. ✅ 예제var temp = 'temp'; function b (){ console.log('안녕하세용');} function a (){ b();} a(); (1) 콜스택에는 전역 컨텍스트말고 다른 컨텍스트는 없기 떄문에 전역 컨텍스트와 관련된 코드를 진행한다.(2) 전역 컨텍스트와 관련된 코드를 진행 .. 2025. 2. 28. Error: EBUSY: resource busy or locked, rmdir 키보드에서 Windows 키 와 R을 눌러 실행 명령 상자를 열고 다음을 입력하세요.resmon.exe확인을 클릭하여 리소스 모니터를 엽니다.모니터에서 CPU 탭 으로 이동합니다.검색 상자의 관련 핸들 에서 해당 파일 또는 폴더 경로 를 복사하여 붙여넣습니다.검색아이콘을 클릭하세요해당 파일이나 폴더를 사용하는 모든 프로그램을 볼 수 있어야 합니다.각각 마우스 오른쪽 버튼을 클릭하고 프로세스를 종료합니다.이제 파일이나 폴더에서 하려고 했던 것을 계속하세요. https://stackoverflow.com/questions/55212864/error-ebusy-resource-busy-or-locked-rmdir 2025. 2. 27. [React] 새 프로젝트 설치 + tailwindcss 설치 npm create vite@latest [프로젝트명] --template react-ts 위 설치 후 아래의 공식문서 그대로 따라하기 https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com 2025. 2. 21. [RN] forwardRef를 사용하는 이유 1. forwardRef 없이 구현하는 경우import React, { useRef, useState } from "react";import { TextInput, View, Button } from "react-native";// CustomInput 컴포넌트 (ref를 사용하지 않음)const CustomInput = ({ value, onChangeText }) => { return ( );};const App = () => { const [text, setText] = useState(""); const inputRef = useRef(null); const focusInput = () => { if (inputRef.current) { inputRef.current.. 2025. 2. 21. [RN] 프로젝트 시작하기 (+svg 넣는법) 1. expo 설치당연히 node 설치되어 있어야 함npx create-expo-app@latest 폴더명cd 폴더명 yarn 설치도 바로 하면 됨 2. expo app 실행npx expo satrt// yarnyarn start 3. npm run reset-projectsvg 넣기 1. 라이브러리 설치yarn add react-native-svgyarn add --dev react-native-svg-transformer 2. Update the Metro ConfigurationOpen your metro.config.jsconst { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");const defaultConf.. 2025. 2. 13. [RN] Failed to build iOS project. "xcodebuild" exited with error code 65. build 에러 Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this issue, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods')› .. 2025. 2. 11. 이전 1 2 3 4 ··· 14 다음
