taeo taeo

React Native에서 Navigation이란?React를 먼저 공부했다면, React 에서 다른 페이지로 화면 전환을 위해 Router라는 개념을 익히 알 것 입니다. React Native에서도 모바일 화면에서 화면 전환이 필요한 경우가 있습니다. 이때, 마찬가지로 네비게이션(Navigation)이라는 라이브러리를 이용합니다. 네비게이션(Navigation)도 다 같은 종류가 아니라, 여러 종류의 네비게이션이 존재합니다. 이를테면 모바일에서는 웹과는 다르게 하단 부분에 각 화면의 이동 버튼을 통해 이동하게 됩니다. 이러한 것을 탭 네비게이션이라고 합니다. 이런것처럼 대표적으로 세 가지의 네비게이션이 존재합니다.스택 네비게이션 (Stack Navigation)탭 네비게이션 (Tab Navigatio..

React Native를 시작하는 방법에는 두 가지가 존재합니다. 1. React Native CLI 2. Expo CLI 들어가기 전에.. React-Native-CLI 와 Expo-CLI를 비교하기전에 React Naive란 무엇이고 Native를 알아야 한다. React는 가상의 DOM을 통해 DOM을 조작하여 UI를 업데이트 하는 방식의 JavaScript기반의 오픈소스 라이브러리입니다. 이름만 들어서는 React Native도 비슷하다고 보여질 수 있습니다. 하지만 React와 React Native간의 차이는 명백히 존재합니다 React Native와 React 우선 공통점으로는 JavaScript라는 메인 언어를 두고 사용한다는 점입니다. 당연하게도(?) Typescript도 지원이 됩니다...

본 게시글은 React Native 공식문서의 내용을 참고했습니다. 앞서, 기본 폴더 및 프로젝트 구조에 대해서는 이전 포스팅을 참고하시면 좋습니다. 1. React Native 프로젝트 생성 및 TypeScript 템플릿 적용 # 프로젝트 생성 $ npx react-native@latest init [프로젝트명] # 생성된 프로젝트 폴더로 이동 $ cd [프로젝트명] 2. 템플릿 프로젝트를 부트스트랩할 때 충돌을 피하기 위해 모든 린트 구성요소를 제거 # React Native 프로젝트에서 ESLint 설치 $ yarn add @react-native-community/eslint-config eslint 다음의 명령어는 React Native 프로젝트에서 ESLint를 사용하고, 그중에서도 ESLin..

본 게시글은 React Native 공식문서의 내용을 참고했습니다. 소스 코드는 깃허브를 통해서 확인하실 수 있습니다. 1. node.js 설치 Node.js 한글 사이트는 https://nodejs.org/ko/입니다. 설치 파일을 다운로드 받습니다. Node.js 설치시 NPM도 함께 설치가 되며, 터미널 실행 후 아래 명령어를 통해 버전 체크하여 설치가 정상으로 되었는지 확인 가능합니다. npm이란 Node.js 패키지 관리자로 node.js로 만들어진 프로그램을 쉽게 설치 해주는 것입니다. # node.js 버전확인 $ node -v # npm 버전확인 $ npm -v 2. 패키지 설치 1) package.json 생성 # package.json 생성 # npm $ npm init # yarn $..