이번에는 React Native 의 레이아웃 구성에 대해서 간단하게 알아보겠습니다. React Native에서는 대표적으로 레이아웃 구성을 View 컴포넌트 구성 요소를 활용하여 만듭니다. App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button , TextInput} from 'react-native'; export default function App() { return ( 목표 리스트... ); } const styles = StyleSheet.create({ appContainer: { padding: 50 } }); - 레이아웃 일반 html 에서 레이아웃을 구분하기 위해 보통 div 태그..

React Native에서는 어떻게 구성 요소들을 스타일링 하는지 알아보겠습니다. 이전에도 정리했듯 React Native는 브라우저에서 동작하는 것이 아니기 때문에 일반 html 처럼 css 파일을 만들어 적용할 수 없습니다. 대신에 인라인 방식으로 스타일을 구성 요소에 직접적으로 적용시켜 사용하거나, StyleSheet 과 같은 개체를 사용하여 JavaScript를 사용하는 것처럼 특정 스타일 변수를 만들어 구성 요소에 적용시키는 것이 대표적이라고 했습니다. 스타일링 개체 사용 / Inline 방식의 스타일 적용 App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-..

이번에는 , 와 같은 핵심 컴포넌트 구성 요소를 조금 더 자세하게 사용하고 알아보며 정리하겠습니다. App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Test Project ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); 현재 App.js 컴포넌트 전체 구성입니다. 지금 가상 머신을 통해 프..

React Native 를 처음 시작하면서 React가 그렇듯 핵심적인 컴포넌트들에 파악을 하는 것이 중요하다고 생각하기에 이번에는 핵심 컴포넌트들을 간단하게 확인하고 파악해보도록 하겠습니다. import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( sehun's project day2 ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'ce..

React Native 프로젝트를 Expo Go라는 앱을 통해 QR 코드를 생성하여 스캔 후 실행하는 방법에 대해서 정리해보았는데, 매번 이러한 작업 내용에 대한 반영 사항 여부를 앱을 매번 열어 확인할 수 없는 노릇이기 때문에 이와 같은 앱 변화 및 작업 사항을 즉각적으로 확인하기 위해 웹 상의 로컬 환경에서도 확인할 수 있도록 세팅하는 작업도 필요합니다. (1) 로컬 개발 환경 구성을 위한 특정 플랫폼 프로그램 설치 (window 환경) 저는 일단 안드로이드 환경으로 진행하기 위해 Android Studio 프로그램을 설치하도록 하겠습니다. https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Androi..

지난 번에는 초기 React Native 프로젝트를 세팅하고 생성하는 과정에 대해서 정리해보았습니다. 이번에는 생성한 프로젝트를 실행해보는 과정을 간단하게 정리해보겠습니다. (1) 생성한 React Native 프로젝트 경로 진입 Visual Studio Code 코드 편집기 프로그램의 터미널에서 지난 번에 생성한 프로젝트의 경로로 들어갑니다. (2) 프로젝트 실행 npm start 혹은 npx expo start 명령어를 실행하여 프로젝트를 실행합니다. 정상적으로 실행에 성공하게 되면 QR 코드가 생성됩니다. npx expo start 명령어는 프로젝트를 초기에 생성할 때 Expo CLI 방식으로 생성했기 때문입니다. (3) QR 코드 실행 앱 설치 QR 코드를 실행할 Expo Go 앱을 설치해줍니다...