기술 창고(229)
-
[React Native] 핵심 컴포넌트 간단하게 다뤄보기
이번에는 , 와 같은 핵심 컴포넌트 구성 요소를 조금 더 자세하게 사용하고 알아보며 정리하겠습니다. 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 컴포넌트 전체 구성입니다. 지금 가상 머신을 통해 프..
2024.01.04 -
외부 프로젝트를 정상적으로 import 하는 방법 (npm install)
가끔 외부 프로젝트를 visual studio code 에 import 할 때 그 프로젝트의 dependency나 gitIgnore 처리되거나 혹은 따로 프로젝트에 제외 처리가 되어있는 파일들이 있을 경우 import 하여 프로젝트를 실행하려고 해도 제대로 실행이 되지 않는 경우가 많습니다. 완벽한 모든 상황을 해결할 수는 없겠지만 이를 해결하기 위해서 간단한 방법을 알아보자면, 컴퓨터에 node가 설치되어 있는 경우 visual studio의 터미널에서 import 한 프로젝트에 들어간 뒤 터미널에서 npm install 명령어를 입력하면 기존에 제외 처리 되어있거나 프로젝트 파일에 포함되지 않았던 시스템 파일들이 새롭게 설치되어 정상적으로 프로젝트를 실행할 수 있게 됩니다.
2024.01.04 -
[React Native] 핵심 컴포넌트 및 스타일링 컴포넌트 확인
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..
2024.01.04 -
[React Native] 앱 실행을 확인하기 위한 로컬 개발 환경 세팅
React Native 프로젝트를 Expo Go라는 앱을 통해 QR 코드를 생성하여 스캔 후 실행하는 방법에 대해서 정리해보았는데, 매번 이러한 작업 내용에 대한 반영 사항 여부를 앱을 매번 열어 확인할 수 없는 노릇이기 때문에 이와 같은 앱 변화 및 작업 사항을 즉각적으로 확인하기 위해 웹 상의 로컬 환경에서도 확인할 수 있도록 세팅하는 작업도 필요합니다. (1) 로컬 개발 환경 구성을 위한 특정 플랫폼 프로그램 설치 (window 환경) 저는 일단 안드로이드 환경으로 진행하기 위해 Android Studio 프로그램을 설치하도록 하겠습니다. https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Androi..
2024.01.03 -
[React Native] 리액트 네이티브 프로젝트 실행
지난 번에는 초기 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 앱을 설치해줍니다...
2024.01.03 -
[React Native] 리액트 네이티브 프로젝트 만들기 (Expo CLI VS React Native CLI)
React Native 프로젝트를 시작하려면 환경 설정부터 구성한 후 프로젝트를 만들어야 합니다. 방식에는 대표적으로 Expo CLI 방식, React Native CLI 방식 두 가지가 있으며 구성 후 프로젝트 생성까지의 과정을 정리해보도록 하겠습니다. Expo CLI / React Native CLI 두 도구 모두 React Native 프로젝트를 생성하고 테스트 장치 및 시뮬레이터에서 React Native 앱을 실행하며 React Native 앱을 빌드하여 앱 스토어에 제공할 수 있도록 돕는 도구입니다. 두 도구의 차이점을 알아보자면, [Expo CLI] 1. 기본적으로 써드 파티 서비스를 사용함으로서 비용이 무료. (예 : 앱 생성) 2. Expo를 사용 시 CLI와 관리되는 앱 개발 워크 플로..
2024.01.03