letsgojieun

포스팅에선 react-navigation 라이브러리 사용 예정. yarn add @react-navigaiton/nativereact-navigation 설치 yarn add react-native-screens react-native-safe-area-contextreact-navigation 의존 라이브러리 설치 IOS 테스트를 한다면,npx pod-install  1. 리액트 네이티브 내비게이션 설정import {NavigationContainer} from '@react-navigation/native';function App() { return ... }export default App;  ... 안에 내비게이션 설정을 JSX로 선언이 가능하다. 기존 웹의 경우, 웹 브라우저에 탑재되어있는 히..

현재 벨로퍼트님의 리액트 네이티브를 다루는 기술 책의 예제를 익혀가며 리액트 네이티브를 학습하고 있다.이번장에서 Firebase와 ReactNative를 연동하여 Firebase storage에 이미지를 저장하려 하는데,좀 전까지는 잘만 실행되던 시뮬레이터가 튕김 현상과 함께 아무리 켜도 계속 종료되었다.  터미널을 확인해보니 다음과 같은 에러 메시지가 출력되었다 Possible Unhandled Promise Rejection (id: 0):Error: [storage/unauthorized] User is not authorized to perform the desired action.NativeFirebaseError: [storage/unauthorized] User is not authorize..

리액트를 접하면서 불변성 개념에 대해 알게 되었다.리액트 네이티브도 역시나 불변성을 지켜가면서 변화를 줘야 한다. 불변성을 지킨다는 것은?객체 및 배열을 직접적으로 수정하지 않는다는 말이다.즉, 기존 객체는 내버려 두고 새로운 객체를 만들어서 새로운 객체에 원하는 값을 덮어씌워야한다  왜 불변성을 지켜야 할까? 렌더링 성능 최적화 방식 때문이다.리액트에서 부모 컴포넌트가 업데이트될 경우, 그 밑의 자식 컴포넌트도 전부 업데이트(리 렌더링)된다.이는 변경사항이 따로 없음에도 자동적으로 함께 리 렌더링이 된다. 만약 컴포넌트에서 처리하는 데이터 및 연산량이 많을 경우에는 이러한 성능 최적화에 더욱 신경을 써야 한다.리액트의 Virtual DOM이 Props의 변화를 감지하기 위해, 이전의 Props와 새로 ..

1. 시뮬레이터 인풋 창을 눌렀음에도 키보드가 나타나지 않는 경우  시뮬레이터 활성화 상태에서 위에 I/O > Keyboard > Toggle Software Keyboard를 클릭해주면인풋 창을 다시 눌렀을 때, 키보드 입력이 활성화된다. 이렇게 키보드가 나타날 경우, 안드로이드에선 자동으로 화면이 줄어들지만 IOS는 화면을 그대로 다 가려버린다react-native의 KeyboardAvoidingView를 이용하여 키보드가 올라올 때 IOS 화면을 가리지 않도록 할 수 있다   2. IOS 키보드가 화면을 가리는 경우 (키보드 활성화 시 화면 줄어들게 하기)import {KeyboardAvoidingView, Platform} from 'react-native'; ... const styl..

리액트네이티브와 리액트에서 상태 값을 관리하는 방법으로 useState를 사용할 수 있다import React, {useState} from 'react';function App() {const [value, setValue] = useState('');return (...)} useState는 구조분해할당(=비구조화 할당) 문법을 사용한다. const number = ['one', 'two', 'three'] const one = number[0];const two = number[1];const three = number[2]; 이렇게도 가능하지만, 구조 분해 할당을 통해 더 쉽게 작성이 가능하다 const [one, two, three] = number 이 같은 방법으로 useState도 첫 번째 ..

1. ReactNative 컴포넌트  컴포넌트는 '구성 요소'라는 의미를 갖고 있다. 즉, UI를 구성하는 요소라고 이해하면 된다.리액트의 경우, 여러 컴포넌트로 쪼갠 뒤 그 컴포넌트를 이어 붙이면서 작업하는데 이는 리액트 네이티브에서도 마찬가지다. import React from 'react';import {SafeAreaView, StyleSheet, View, Text} from 'react-native';function App() { return ( React Native! );}; const styles = StyleSheet.create({ // 스타일 지정 방법 block: { ..

새로운 RN 프로젝트 생성npx react-native init  npx는 Node.js와 함께 설치되며, node 환경에서 구동되는 CLI 도구를 간단하게 사용할 수 있도록 도와준다.  yarn android 또는 yarn ios를 터미널에 입력하여 각 환경에서 앱을 구동할 수 있다.yarn start는 Metro를 구동해준다. Metro란, 리액트 네이티브를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다. 참고로 yarn android, yarn ios 스크립트를 입력하면 start 스크립트가 자동으로 시작되어 따로 입력하여 실행하는 일은 드물다.   1. 안드로이드 환경에서 리액트 네이티브 앱 구동 안드로이드 스튜디오에서 새로운 프로젝트..

node.js와 npm, VSCode 설치되어있다는 가정하에 진행  1. yarn : npm과 같은 패키지 관리 도구. npm보다 패키지를 더 빨리 설치한다npm install --global yarn 2. Java Development Kit : 안드로이드 앱 개발을 위해 필요하다 (버전 8 이상 설치)HomeBrew를 통해 편하게 설치가 가능하다brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 3. WatchMan (권장) : 페이스북이 만든 파일 모니터링 도구 (MacOS만 지원)brew install watchman 4. 안드로이드 스튜디오 : 안드로이드 앱 개발을 위해 필요하다 https://developer.android.com/studio?hl..

next.js error: cannot find module 'react' 프로젝트 진행하고 실행하는데 갑자기 에러가 발생하면서 react 모듈을 찾을 수 없다는 에러가 발생했다응? 분명 react 설치했을 텐데.. 해서 구글링을 통해 github에 누군가 남겨놓은 해결방안을 따라 해 봤다local에 react react-dom을 설치하라 해서 그대로 따라 했는데,, (이러면 안 됬었는데,,,)   Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:You might have mismatching version..

클론코딩 강의를 참고하면서 나만의 개인 프로젝트를 실행시키고 있는 중이다아무래도 페이지, 컴포넌트, 스타일링이 거의 다르기 때문에 강의에서 설명해주지 않는 부분은 내가 직접 찾아야 하는데오늘 styled-component를 이용해서 styling을 어떻게 주는지에 대한 설명을 들었지만.. 만약 스타일링이 정의된 하나의 클래스를 만들어서 여러 요소에 적용시키고 싶으면 어떻게 하지?라는 의문이 생겼다우선, styles 폴더를 생성한다.그리고 styles폴더 안에 css파일들을 추가하면 된다   1. 모든 페이지에 공통으로 적용시키고 싶다면 global.css를 이용하자 폰트, body html * a 등.. 모든 페이지에 공통으로 적용되는 스타일링을 주고 싶다면?styles폴더 안의 global.css파일에..