프론트엔드 개발자의 개발 놀이터

자주 사용하는 어플 중에 패션 아이템(옷, 모자, 신발 등등)의 이미지의 배경을 지워서 개인 옷장을 관리할 수 있는 어플이 있습니다. 해당 어플의 주요 기능이 이미지의 배경을 지워주고 각 아이템 이미지들로 스타일을 조합할 수 있도록 해주는 기능이 있는데, 해당 기능을 RN에 적용해보고 싶어서 찾다보니 Photoroom API를 찾게 되었지만 이미지 편집 갯수에 따라 요금이 발생하다보니 개인 프로젝트에 사용하기에는 부담이 되었습니다. Remove Background API and Generative AI API by Photoroom Enhance your e-commerce visuals and increase sales with Photoroom Remove Background API and Gener..

화면에서 햄버거 메뉴 버튼을 누를 시 좌측 또는 우측 사이드바가 나오는 화면을 만들고 싶을 땐 Drawer Navigator를 사용하면 됩니다. 1. 설치 yarn add @react-navigation/drawer 2. 등록 여기서 기존의 Bottom Navigator를 등록하는 방식에서 약간의 차이점이 발생합니다. 기존엔 안에 를 등록하는 방식이였다면, 가 등록되기 전에 가 먼저 등록되고 그 다음 를 등록하는 방식으로 변경이 되어야 합니다. before : NavigationContainer > Bottom.Navigator > Bottom.Screen after : NavigationContainer > Drawer.Navigator > Drawer.Screen > Bottom.Navigator >..

import {useIsFocused} from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if (isFocused) { // 포커싱이 되면 tabBar display none navigation.getParent().setOptions({tabBarStyle: {display: 'none'}}); } else { // none 포커싱이 되면 바뀐 tabBarStyle을 재설정 해주어야 합니다. navigation.getParent().setOptions({ tabBarStyle: { display: 'flex', backgroundColor: '#000000', borderTopColor: '#59565..

일반적으로 Bottom tabs Navigator에 등록된 Screen을 누르면 component에 등록된 첫번째 스택이 보여지게 됩니다. 하지만 메모 앱과 같이 Screen을 누르면 다음 스택(메모 작성 화면)으로 이동하는 기능을 추가하고 싶을 때는 Screen에 listeners를 등록해주고 navigation.navigate() 함수를 사용하여 이동되도록 하면 됩니다. flow : 앱 실행 -> Bottom tabs Navigator의 첫번째 Screen Load -> 첫번째 Screen의 component에 등록된 첫번째 Stack이 화면에 보여짐 -> tabBarIcon을 누르면 listeners에서 다음 스택으로 이동하는 함수 호출 // BottomNavigation.tsx ({ tabPres..

async-storage 라이브러리 @react-native-async-storage/async-storage GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native. An asynchronous, persistent, key-value storage system for React Native. - GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native. github.com RN cs..

1. React-Query 란? 데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리. Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구. npm i @tanstack/react-query # or yarn add @tanstack/react-query TanStack | High Quality Open-Source Software for Web Developers tanstack.com 2. Server State 란? Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지된다. Fetching이나 Updating에 비동기 API가 필요하..

1. 'value' is unavailable: introduced in iOS 12.0node_modules/react-native/scripts/cocoapods/codegen_utils.rb 경로의 87 라인'ios' => '11.0', 를  'ios' => '12.0’, 로 변경 후ios 폴더 경로에서 pod install 2. [!] CocoaPods could not find compatible versions for pod "react-native-safe-area-context" ~~~Podfile 의 platform :ios, '11.0’ 를 ’12.0’로 변경 후 pod install 3. [!] Unable to find a specification for `React-hermes` ..

redux redux/toolkit store 생성 createStore() configureStore() reducer 연결 combineReducers() - action 액션 타입, 액션 생성, 리듀서 생성 createSlice() 비동기 처리 redux-saga 또는 redux-thunk createAsyncThunk()

oh-my-zsh에는 개발자들이 개발한 많은 테마가 있는데 국룰테마 agnoster 대신 common theme를 적용해보겠습니다. https://github.com/jackharrisonsherlock/common GitHub - jackharrisonsherlock/common: A simple, clean and minimal prompt. A simple, clean and minimal prompt. Contribute to jackharrisonsherlock/common development by creating an account on GitHub. github.com 먼저 해당 테마를 install하기 전에 Homebrew로 wget 패키지를 설치해야 합니다. brew install wg..

1. MongoDB 모듈 NodeJS 드라이버 모듈로 MongoDB를 자체 콘솔에서 사용하는 것처럼 명령어를 그대로 사용할 수 있습니다. npm i mongodb mongodb nodejs 연결 // MongoClient : MongoDB에 연결해서 요청을 보낼 클라이언트 객체 const client = require('mongodb').MongoClient // useUnifiedTopology : 통합모드 client.connect(url, {useUnifiedTopology:true}, 콜백 함수); 로컬 pc에 연결할 때 url : mongodb://127.0.0.1:27017 다른 pc에 연결하고 싶을 때 url : mongodb://ip주소:port번호/데이터베이스 데이터베이스 연결 const..