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 앱을 설치해줍니다...

React Native 프로젝트를 시작하려면 환경 설정부터 구성한 후 프로젝트를 만들어야 합니다. 방식에는 대표적으로 Expo CLI 방식, React Native CLI 방식 두 가지가 있으며 구성 후 프로젝트 생성까지의 과정을 정리해보도록 하겠습니다. Expo CLI / React Native CLI 두 도구 모두 React Native 프로젝트를 생성하고 테스트 장치 및 시뮬레이터에서 React Native 앱을 실행하며 React Native 앱을 빌드하여 앱 스토어에 제공할 수 있도록 돕는 도구입니다. 두 도구의 차이점을 알아보자면, [Expo CLI] 1. 기본적으로 써드 파티 서비스를 사용함으로서 비용이 무료. (예 : 앱 생성) 2. Expo를 사용 시 CLI와 관리되는 앱 개발 워크 플로..

배포 서버에 배포 후 ip 주소를 입력하여 접근할 때 기본적으로 마지막에 포트 번호가 붙습니다. 이것을 명시하지 않고 접근할 수 있도록 포트 포워딩을 해줍니다. 포트 포워딩 적용 sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport {포워딩 시킬 포트 번호 : 보통 80} -j REDIRECT --to-port {현재 실행 포트 : 보통 8080} 리눅스 혹은 우분투 터미널에서 해당 명령어를 입력하여 현재 실행 포트를 리다이렉트 시켜 포워딩 시킬 포트에 매핑 시키도록 합니다. 적용이 되었으면 이제 url 주소창에 맨 뒤의 포트 번호를 제외하고 접속하면 정상적으로 접근되는 것을 확인할 수 있습니다. 포트 포워딩 해제 sudo iptables -t nat -..

[Reason] view 단을 만들고 이미지를 수정하는 부분을 만들어 업로드한 이미지들이 back 단으로 넘어가면 수정되는 코드를 작성하였다. 업로드하는 input 태그의 속성은 multiple 로서, 다중 이미지 파일이 업로드 될 수 있다. 코드 작성완료 후 기능 수행을 진행했을 때 여러 개의 이미지를 넣었을 때 정상적으로 반영되는 것을 확인할 수 있었다. 그런데, 유저 테스트를 진행하는 도중에 이미지가 정상적으로 반영이 되지 않는다는 문의를 받게 되었다. 한 번 버튼을 눌러 새로운 이미지를 추가하고 다시 반복적으로 한 번 더 버튼을 눌러 새로운 이미지를 눌러 추가하였더니 2개의 이미지가 반영되지 않고 1개의 이미지만이 반영되어 들어갔다는 이슈였다. 즉, 최신 업로드 이미지로 덮어씌워져 반영되는 이슈이..