본문 바로가기

전체 글158

ReactNative 리액트 네이티브 : 키보드 컨트롤하기 (IOS, Android 시뮬레이터 키보드) 1. 시뮬레이터 인풋 창을 눌렀음에도 키보드가 나타나지 않는 경우  시뮬레이터 활성화 상태에서 위에 I/O > Keyboard > Toggle Software Keyboard를 클릭해주면인풋 창을 다시 눌렀을 때, 키보드 입력이 활성화된다. 이렇게 키보드가 나타날 경우, 안드로이드에선 자동으로 화면이 줄어들지만 IOS는 화면을 그대로 다 가려버린다react-native의 KeyboardAvoidingView를 이용하여 키보드가 올라올 때 IOS 화면을 가리지 않도록 할 수 있다   2. IOS 키보드가 화면을 가리는 경우 (키보드 활성화 시 화면 줄어들게 하기)import {KeyboardAvoidingView, Platform} from 'react-native'; ... const styl.. 2022. 2. 10.
ReactNative 리액트네이티브 : useState Hook으로 상태값 관리하기 (feat. 구조분해할당) 리액트네이티브와 리액트에서 상태 값을 관리하는 방법으로 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도 첫 번째 .. 2022. 2. 8.
ReactNative 리액트네이티브 : 기본 컴포넌트 구성 및 CSS 스타일링 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: { .. 2022. 2. 8.
ReactNative 리액트네이티브 안드로이드,IOS 시뮬레이터 이용하기 새로운 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. 안드로이드 환경에서 리액트 네이티브 앱 구동 안드로이드 스튜디오에서 새로운 프로젝트.. 2022. 2. 4.
ReactNative 리액트네이티브 시작을 위한 설치목록 (MacOS 환경) 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.. 2022. 2. 4.
Three.js/Canvas Uncaught TypeError: Cannot read properties of null (reading 'width') 요즘 하루에 한 강의씩 udemy Three.js 강의를 수강하고 있다 처음엔 화면에 4개의 renderer가 잘 출력되다가 다시 확인해 보니 아무것도 나오지 않았다 콘솔창에는 Uncaught TypeError: Cannot read properties of null (reading 'width') 라는 에러 메세지가 출력되었다 ... 스택오버플로에서 찾아보니 아이디가 제대로 주어졌는지, 스크립트를 body의 제일 하단에 두었는지를 확인 해보라 한다 난 세 번째 아이디를 c3가 아닌 c2로 되어있어서 생긴 에러였고, 아이디를 수정하니 바로 해결되었다 하하 별다른 오타가 없는데 이와 같은 에러를 만난다면 script를 body의 제일 하단으로 옮기면 될 것 같다 script를 body의 하단으로 옮기는 이.. 2022. 1. 9.
반응형

티스토리툴바