React-Native

항상 ios 시뮬레이터로만 확인하다가 직접 핸드폰에 빌드해서 어플을 테스트해보니 아래 사진과 같이 키보드 창이 입력칸을 가리는 문제가 있다는 것을 알게 되었다. 보이던 화면에서 그대로 키보드가 올라오면서 패스워드 입력칸 같은 경우는 입력하면서 확인을 할 수 없었다. 이는 리액트 네이티브의 로 해당화면의 전체 뷰를 구성해주면 된다. behavior : 키보드에 반응하는 방식 지정 keyboardVerticalOffset : 사용자 화면 상단과 리액트 네이티브 뷰 사이의 거리 지정 https://reactnative.dev/docs/keyboardavoidingview KeyboardAvoidingView · React Native This component will automatically adjust i..

아래와 같이 값을 입력할 때 직접 입력하는 것이 아니라 선택지를 주고 그 중 하나를 고르게 하는 picker 방식을 사용하기 위해 드롭다운 형식의 picker를 지원해주는 'react-native-dropdown-picker' 라이브러리를 사용하였다. react-native-dropdown-picker 공식 사이트 https://hossein-zare.github.io/react-native-dropdown-picker-website/ React Native Dropdown Picker React Native Dropdown Picker is a single / multiple, categorizable, customizable, localizable and searchable item picker (d..

리액트 네이티브 어플을 만들면서 사진을 직접 업로드 하는 기능을 구현하기 위해 'react-native-image-picker' 패키지를 사용하였다. https://github.com/react-native-image-picker/react-native-image-picker GitHub - react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select m :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device li..

컴포넌트 (Component) : 화면에 나타나는 UI 요소 (= 재사용 할 수 있는 조립 블록) 컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트 네이티브는 컴포넌트를 이용하여 화면을 구성한다. import React from 'react'; -> 리액트를 불러와서 사용. JSX는 React.createElement를 호출하는 코드로 컴파일되므로, 컴포넌트를 작성할 때 반드시 작성해야 하는 코드임 props -> props란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다. -> 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자..

React-Native 2015년 3월에 페이스북에 의해 공개된 오픈소스 프로젝트 사용자 인터페이스를 만드는 React(리액트) 에 기반을 두고 제작됨 웹 브라우저가 아닌 iOS와 안드로이드에서 동작하는 Native Mobile 애플리케이션을 만드는 자바스크립트 프레임워크 [ 장점 ] 작성된 코드 대부분이 플랫폼 간 공유가 가능해서 iOS, 안드로이드 두 플랫폼을 동시에 개발 가능 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작 작성된 구성 요소들이 재사용 가능 [ 단점 ] 네이티브의 새로운 기능을 사용하는 데 오랜 시간이 걸림 유지보수의 어려움 잦은 업데이트 리액트 네이티브의 동작 방식 리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할..

한 2주 정도 전부터 리액트 네이티브 프로젝트 작업을 하면서 ios 시뮬레이터를 작동시키면 5~10 이내로 맥북이 멈추고 재부팅 되는 현상이 나타나기 시작했다. 내 기억상으론 Xcode를 업데이트 하고 나서 이 문제가 시작됐거나 더 심해졌다. 항상 패턴이 똑같은데, 일단 화면이 다 멈추고 클릭해도 반응이 없다. 근데 마우스 포인터는 움직이는게 보인다. 그 상태로 30초~1분 정도가 지나면 갑자기 팬이 윙! 하고 컴퓨터가 꺼진다. 그 다음은 굉장히 기분 나쁜 메세지와 함께 맥북이 재부팅 됐다. (메세지는 your computer restarted because of a problem 어쩌고 였던것 같은데 여러 언어로 나오고 한국말은 없다. 빡쳐서 오류 사진도 안찍어놓음) 재시동 돼도 이상은 없었는데 계속 ..

리액트 네이티브 Drawer Navigation 공부를 하기 위해 Drawer 설치를 진행하고 예제 코드를 입력해 보려는데 const Drawer = createDrawerNavigator(); 코드를 추가하니까 이런 오류가 뜬다. reanimated 2 failed to create a worklet maybe you forgot to add reanimated's babel plugin https://github.com/software-mansion/react-native-reanimated/issues/2774 ERROR Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? ·..

리액트 네이티브 공부를 시작해야 하는데 3일동안 환경세팅만 붙잡고 있다가 아무것도 못했다. 결국 문제가 있어 보이는 nvm, node.js, npm, cocoapod, react-native-cli 모두 삭제하고 최신 LTS버전으로 설치 후 프로젝트를 생성 및 실행해보니 된다. 모두 삭제하고 다시 설치하는 과정에서 사용했던 명령어들을 정리해보았다. [ nvm, node, npm 삭제 ] 터미널에 아래 명령어들 입력 sudo npm uninstall npm -g sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.* sudo rm -rf /usr/local/include/node /Users/$USER..

리액트 네이티브 환경 세팅 중 이것저것 문제가 많다. 이번에는 vscode에서 터미널을 켤 때마다 해당 메세지가 뜬다. nvm is not compatible with the npm config "prefix" option: currently set to "/usr/local" 매번 nvm use [버전] 명령어를 사용해서 원하는 node.js 버전을 선택해줘야 된다. 터미널에 rm -R /usr/local/bin/npm /usr/local/lib/node\_modules/npm/bin/npm-cli.js rm -R /usr/local/bin/npx /usr/local/lib/node\_modules/npm/bin/npx-cli.js 라고 입력해주면 더이상 이 메세지가 뜨지 않는것 같다. 근데 일단 나는..

졸업프로젝트를 위해 리액트 네이티브 공부를 하고 있다. 강의를 하나 들으며 초기 개발 환경 세팅을 해놨었다. 하지만 nvm 버전을 다시 확인하기 위해 nvm --version 커맨드를 입력했더니 없는 커맨드라고 뜬다. .bash_profile에 환경변수 초기화 설정을 해 준 것이 터미널을 새로 켤때마다 적용이 안되며 원상복구가 되는 것이었다. .bash_profile 파일 내용이 바뀐건 아니지만 터미널을 새로 켤 때마다 source ~/.bash_profile을 해주어야 적용이 되기 때문에 상당히 귀찮게 한다. [원인] 구글링 해 본 결과 원인은 zsh에 있었다. 터미널 테마의 변경으로 bash가 아니라 zsh쉘이 된 것으로 인해 생긴 문제이다. zsh는 터미널이 실행될 때 ~/.bash_profile이..