나만을 위한 블로그

https://reactnative.dev/docs/environment-setup Get Started with React Native · React NativeReact Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.reactnative.dev 리액트 네이티브 공식문서에서 아래 명령어로 프로젝트 생성을 권장한다. npx create-expo-app@latest 이 방식으로 만들면 프로젝트가 타입스크립트 전용으..

컴포넌트를 추가만 할 게 아니라 배경색을 어떻게 바꾼다든지, 컴포넌트 안의 글자색을 어떻게 한다든지 같은 스타일링도 UI 개발에 있어선 필수적인 부분이다.가장 간단하면서 가장 쓰기 싫은 방법은 인라인 형태로 컴포넌트 옆에 붙여 쓰는 방식이다. import React, {Component} from 'react';import {View, Text, SafeAreaView} from 'react-native';class App extends Component { render() { return ( Hello, World! ); }}export default App; 어떤 뷰에 어떤 스타일이 먹혔는지 바로 알 수는 있겠지만 스타..

이 에러의 원문은 아래와 비슷한 형태일 것이다. BUILD FAILED in 10serror Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk...

https://reactnative.dev/docs/state State · React NativeThere are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.reactnative.dev컴포넌트를 제어하는 데이터엔 props, state 2개 유형이 있다. props는 부모가 설정하며 컴포넌트의 생명주기 동안 고정된다. 바뀌는 데이터는 state를 써야 한다일반적으로 생성자에서 state를..

https://reactnative.dev/docs/view View · React NativeThe most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running oreactnative.devUI를 구축하는 가장 기본 컴포넌트. View는 flexbox, style, 일부 터치와 접근성 컨트롤을 갖춘 레이아웃을 지원하는 컨..

react native cli로 프로젝트를 만들고 ios 에뮬레이터로 실행하니 이 에러가 발생했다.해결법은 아래 순서대로 진행한다. 프로젝트 안에서 cd ios를 실행해 ios 폴더로 이동pod install 실행pod 설치가 끝나면 cd ..를 실행해 이전 폴더(=루트)로 이동react-native run-ios 명령어로 실행 몇 분 뒤 정상적으로 ios 에뮬레이터에 프로젝트가 설치된 후 실행까지 완료됐다. 참고한 사이트) https://stackoverflow.com/a/57286808

윈도우 환경에서의 설치법은 다른 설치글이나 아래 링크를 참고한다. https://onlyfor-me-blog.tistory.com/401 [React-Native] 윈도우에서 vs code에 리액트 네이티브 개발 환경 설정하는 법 (2022 ver)수정 내역) 2022.04.13 - 오랜만에 해봤는데 에러 발생해서 구글링으로 해결함. 에뮬레이터와 실기기에서 작동하는 것 확인 후 올림 이 글은 윈도우 기준으로 작성됐으니 주의하자. 이 포스팅을 진onlyfor-me-blog.tistory.com 맥북에 리액트 네이티브 환경을 처음부터 설정한다면 설치해야 하는 것들은 아래와 같다. Node.jsnpmyarnjavacocoapods안드로이드 스튜디오 + XCode 하나씩 설치해 보자. 먼저 아래의 깃허브 링크로..

※ 이 포스팅은 리액트 네이티브와 npm 등 설치, 환경설정을 모두 완료했다고 가정하고 작성됐다※ 이 포스팅은 윈도우에서 테스트 후 작성됐다. 그러나 맥이라고 별다를 것 없다 리액트 네이티브 프로젝트를 만드는 법은 리액트 네이티브 CLI 방식 외에도 Expo CLI 방식도 있다.개인적으로 프로젝트를 만들 땐 리액트 네이티브 CLI 방식을 더 선호하지만 간단한 앱이라면 Expo로 만드는 것도 나쁘지 않아 보여서 사용한 후 방법을 정리한다.Expo CLI로 프로젝트를 만드는 법은 공식문서에 잘 나와 있어서 그대로 따라하기만 하면 된다.Expo CLI를 설치하려면 아래 명령어를 터미널에 입력한다. yarn add expo 사용할 수 있는 Expo CLI들을 확인하려면 터미널에 아래 명령어를 입력한다. npx ..

전에 잠깐 리액트 네이티브를 찍먹 느낌으로 해봤었는데 어쩌다 vs code를 키니 예전에 작성했던 리액트 네이티브 프로젝트가 나와서 이대로 버리기엔 아까워서 개념이라도 적어둔다. 이 태그에 대한 리액트 네이티브의 공식 홈페이지 설명은 아래와 같다. https://reactnative.dev/docs/safeareaview SafeAreaView · React Native The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. reactnative.dev Sa..

수정 내역) 2022.04.13 - 오랜만에 해봤는데 에러 발생해서 구글링으로 해결함. 에뮬레이터와 실기기에서 작동하는 것 확인 후 올림 이 글은 윈도우 기준으로 작성됐으니 주의하자. 이 포스팅을 진행하기 전에 설치돼 있어야 하는 것들은 아래와 같다. vs code 파이썬 JDK (내 노트북은 13.0.1 버전이 설치돼 있다. 굳이 이 버전 기준으로 진행할 필요는 없다) Node.js (npm도 필요한데 Node.js를 설치하면 덤으로 깔린다) Android Studio (에뮬레이터로도 돌려봐야 하니까. 나중에는 자바 코드도 수정해야 하니 안드로이드 스튜디오는 깔려 있어야 한다) Node.js는 아래 링크에서 다운받을 수 있다. https://nodejs.org/ko/ Node.js Node.js® is..