공식 문서와 함께하는 리액트 네이티브 [1]

https://reactnative.dev/docs/getting-started

Introduction · React Native

 

들어가며

nestJS, typeORM를 도입해서 토이프로젝트 서버 쪽을 1차로 개발을 끝내고, 앱 화면 구성을 위해 리액트 네이티브를 채택하게 되는데..

당장 프론트쪽 지식을 깊게 알고싶지않다(?) 라는 오만방자한 생각을 하며 chatGPT를 통해 화면을 구성하려다 된통 삽질만하고 결국 공식문서로 공부해가면서 천천히 초기 세팅부터 진행하기로 하게 되는데....

 

 

React Native

React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 IOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임 워크

flutter도 써보고 싶지만 일단 당장 자바스크립트를 통해 상대적으로 빨리 구현할 수 있도록 React Native 먼저 해보기로 결정

(현재 상태에서 가장 뛰어난 접근성)

 

뷰의 종류 (뷰는 UI의 기본 구성 요소)

핵심

 

환경 설정

• 시작
• 환경 설정
  a. Android Studio 설치
  b. watchman 설치 (brew install watchman)
  c. 자바 개발 키트 설치 

brew install openjdk@17
brew link --force --overwrite openjdk@17

export JAVA_HOME=/usr/local/opt/openjdk@17
export PATH=$JAVA_HOME/bin:$PATH

source ~/.zshrc

 옵션으로 타입스크립트를 사용하려면 
    npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

 

프로젝트 생성

• npx react-native init [프로젝트명]
• 최초 테스트
  npm run android

프로젝트 구조 생성
도움을 많이 받은 블로그(https://windevelteam.notion.site/React-Native-1b3131d85c9c46a6b51dae4cef16a1c1)

• src 와 하위 디렉토리 생성

 

components: 재사용 가능한 컴포넌트 (Button, Header 등)

screens: 주요 화면 컴포넌트 (Home, Login,,)

services: API 호출 및 비즈니스 로직 포함

utils: 유틸리티 함수와 상수를 정의하는 파일들

navigation: 네비게이션 관련 파일

(icons, images, pages, settings 도 추가)

• React Navigation 
  Routing을 위한 라이브러리 (R-Nav)
  npm install @react-navigation/native
  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
• ios, android 세팅

테스트

간단히 데이터를 불러와 보여주는 화면을 구성해서 테스트

• SafeAreaView 관련 에러가 나서 설치
• 서버와 연결할 때는 로컬에서 작업하더라도 로컬서버의 IP로 접속해야함 (따로 도메인이 없다면)

 

간단히 Home, Details 화면을 구현해 본 상황이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TODO: 본격적으로 미리 작업해둔 토이프로젝트 서버를 바탕으로 화면을 구성해볼 계획임.