반응형 전체 글155 [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. [RN] FlatList 사용 시 스크롤 막고 싶을 때 데이터가 적어서 화면 밖으로 나가지 않을때에도 FlatList를 사용하면 위아래로 스크롤 시 요소가 움직인다.이를 막기 위해 찾아보니 1 ? [groupedData.length - 1] : undefined} scrollEnabled={groupedData.length > 3} renderItem={/* 생략 */} keyExtractor={(item) => item.orderDate}/> stickyHeaderIndices에 데이터의 갯수를 주고scrollEnabled에는 화면에 넘어가지 않을만큼의 제한 갯수를 정해준다. 2025. 2. 6. [RN] 기초 개념 이해하기 1. StyleSeet를 사용하지 않아도 css 적용은 가능. 하지만 사용하면 자동완성이 되어 사용하기 훨씬 편하다. 2. React Native는 이전에 제공하는 API와 Components가 훨씬 많았다. 하지만 유저 관리와 업데이트 및 빠른 속도를 위해 최소화하였고 필요한 컴포넌트들은 커뮤니티 라이브러리를 사용해야한다. 그래서 버그가 있거나 업데이트가 늦은 라이브러리가 많을 수 있다. (React Native와 Expo에서 기본제공하는 것 먼저 사용할 라이브러리 찾아보기!) 3. 리액트 네이티브에서는 flex가 기본적으로 column 값을 가지고 있다. 행 나열을 하기 위해서는 flexDirection:"row"를 주면 된다. 4. 레이아웃을 그릴 때에는 width나 height 값을 사용하지 않는.. 2025. 1. 20. Redux 사용법 Redux의 핵심 개념Store : 애플리케이션의 전역 상태를 보관Action : 상태를 변경하기 위한 "의도"를 나타내는 객체Reducer : Action에 따라 상태를 업데이트하는 순수 함수Dispatch : Aciton을 Store로 보내는 메서드Selector : 상태를 조회하기 위한 함수 Redux 사용법1. Redux 설치npm install @reduxjs/toolkit react-redux @reduxjs/toolkit은 Redux를 쉽게 사용할 수 있도록 도와주는 공식 도구 2. 간단한 예제 Store 설정// src/store/counterSlice.tsimport { createSlice } form '@reduxjs/toolkit';const counterSlice = createS.. 2025. 1. 12. [모던 리액트 Deep Dive] 4장 서버 사이드 렌더링 4.1 서버 사이드 렌더링이란?4.1.1 싱글 페이지 애플리케이션의 세상 싱글 페이지 애플리케이션이란?렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고한다. 실제로 소스 보기로 HTML 코드를 봤을 때는 내부에 아무런 내용이 없다. 이는 사이트 렌더링에 필요한 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 .. 2025. 1. 10. 이전 1 2 3 4 ··· 13 다음 반응형
