Hayo's

1. git pull 받을 목록을 repository 에서 업데이트 git fetch --all 2. git reset 으로 head를 최신으로 가리킨다 git reset --hard origin/{branch명} 3. git pull 로 확인 git pull origin {branch명}

1. Install 'Craco' # npm npm i -D @craco/craco # yarn yarn add @caraco/craco 2. Update package.json CRA로 프로젝트를 생성했을 때 default로 생성되는 package.json파일의 "scripts" 부분을 하기와 같이 수정해줘야 합니다. "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" } 3. Create craco.config.ts 프로젝트의 root 경로에 craco.config.ts 파일을 생성합니다. // craco.config.ts import path from "path"..

1. Expo 프로젝트에 Firebase를 적용하기 위한 준비 2. React Native Firebase를 Expo 프로젝트에 적용(+ Firebase Analytics) 앞서 custom native code를 추가한 Expo 프로젝트에 Firebase를 연결해 보자! 사실 React Native Firebase의 내용을 차근차근 따라하면 적용시키는데에 전혀 문제가 없지만, 그래도 간략히 정리해보자. Installation NPM 또는 Yarn을 사용하여 프로젝트의 root에 @react-native-firebase/app 을 설치 → Firebase의 기능들을 사용하기 위해서는 @react-native-firebase/app 모듈이 반드시 설치되어 있어야 한다! # Using npm npm inst..

Google Analytics를 Expo 프로젝트에 적용하기 위해 고군분투한 내용을 최대한 정리하여 작성해 보고자 한다. 1. Expo 프로젝트에 Firebase를 적용하기 위한 준비 2. React Native Firebase를 Expo 프로젝트에 적용(+ Firebase Analytics) What to do? React Native + Expo 로 만들어진 App에 Google Analytics를 적용하기 > How to use Firebase on Expo project? Expo 프로젝트에 Firebase를 적용하는 방법은 2가지가 있다. Using Firebase JS SDK Using React Native Firebase BUT! Analytics를 적용하기 위해서는 React Nativ..

리액트 웹 애플리케이션에서 API가 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 하기 때문에, '리덕스'가 주로 사용된다. 그 중에서도 효율적이고 편하게 비동기 작업에 대한 상태 관리를 하고 싶다면 '미들웨어(Middleware)'를 사용하면 된다. 1. 미들웨어란? 액션과 리듀서 사이의 중간자라고 볼 수 있다. 액션을 디스패치했을 때, 리듀서에서 이를 처리하기 전에 지정된 작업을 실행한다. 미들웨어는 전달받은 액션을 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 추가로 디스패치하는 등 여러가지 작업을 할 수 있다. 함수를 반환하는 함수이다. middleware의 구성 store - 리덕스 스토어 인스턴스 next - 파라미터 함수 형태. - st..

* 문제상황 * Expo의 EAS Build로 빌드한 .aab 파일을 이미 Play Store에 올라가 있던 앱에 새 버전으로 업로드 하려고 시도했으나, 기존에 설정되어있던 서명 키와 다른 키로 빌드가 되어서 잘못된 키로 서명이 되었다는 에러 문구를 만났다..! WHY? 기존에 설정되어있던 키 파일이 없었음 EAS Build로 빌드하면서 새로운 keystore를 생성함 앱 무결성(Play Integrity) - Play 앱 서명 사용하기 Google에서는 Play 앱 서명으로 앱의 서명 키를 관리하고 보호하며, App Bundle에서 생성된 최적화된 배포 APK에 서명하는 데 이 키를 사용합니다. Play 앱 서명은 Google의 보안 인프라에 앱 서명 키를 저장하고 보안 강화를 위한 업그레이드 옵션을 ..

1. Context API를 사용한 전역 상태 관리 흐름 이해하기 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 말들어 단 한 번에 원하는 값을 받아와서 사용할 수 있다. 2. Context API 사용법 익히기 1. 새 Context 만들기 새 Context를 만들 때는 createContext 함수를 사용한다 파라미터에는 해당 Context의 기본 상태를 지정한다 // contexts/color.js import { createContext } from 'react'; const ColorContext = createContext({ color: 'black' }); export default Color..

1. 크롬 개발자 도구를 통한 성능 모니터링 → 리액트 v17부터는 리액트 전용 개발자 도구인 ReactDevTools를 사용하여 자세한 성능 분석이 가능하다. 리액트 개발자 도구의 Profiler 탭 클릭 후 좌측 상단의 파란색 녹화 버튼 클릭 성능 분석하고 싶은 작업 실행 작업 완료 후, 파란색 녹화 버튼을 다시 한번 클릭하면 성능 분석 결과가 나타남 Render duration: 리렌더링에 소요된 시간. **소요 시간은 컴퓨터 환경에 따라 다를 수 있음 Profiler 탭 상단에 있는 랭크 차트 아이콘을 클릭하면, 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해 줌 3. 느려지는 원인 분석 컴포넌트가 리렌더링 되는 상황 자신이 전달 받은 props가 변경될 때 자신의 state가 바뀔 때 부..

Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는, 리액트 v16.8에 새로 도입된 기능이다. useState 가장 기본적인 Hook 함수 컴포넌트에서 상태 관리를 할 때 사용 하나의 useState 함수는 하나의 상태 값만 관리할 수 있으므로, 컴포넌트에서 여러 개의 상태를 관리해야 한다면 여러 개의 useState를 사용 useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태라고 볼 수 있음 useEffect의 활용 us..

* 문제상황 * Expo + React Native 로 개발한 어플리케이션을 testFlight에 올리고 싶은데, 이전에는 가능했던 Standalone app으로 빌드하는 서비스가 더이상 사용할 수 없게 되었다! 대신 EAS를 사용해서 빌드가 가능하다고 하는데, Docs 안에 내용이 여기저기 분산되어 있어서 빌드하는 데에 어려움이 있었다. 2023년 1월 4일 이후, Expo의 모든 SDK 버전에서 Building Standalone Apps(독립형 앱 구축) 서비스가 중단되었고, 해당 서비스 대신 EAS 빌드 서비스만 이용할 수 있다고 한다. EAS Build EAS Build는 'Expo 및 React Native 프로젝트용 앱 바이너리를 구축하기 위한 호스팅 서비스'이다. 하기 명령어로 .ipa 파..