React Native 강좌 - 4강 카카오 로그인 실습하기 (2)

 

카카오 로그인을 하기 전에 먼저 두가지의 모듈에 대해서 소개하려고 합니다

 

첫번째로 React-native 에서 화면전환을 할 수 있게 도와주는 모듈인 React-navigation 입니다.

 

https://reactnavigation.org/

React Navigation | React Navigation

위 사이트에서 공식문서와 실제 사용방법에 대해서 알 수 있습니다.

 

이번 포스트에서는 제가 사용할 기능들에 대해서 간단히 설명해 드릴겁니다.

 

두번째는 UI Kitten 입니다. 

https://akveo.github.io/react-native-ui-kitten/

UI Kitten - React Native UI Library based on Eva Design System

UI를 만들 때 도와 주는 모듈로 많은 기능을 제공하고 있어서 제가 즐겨 사용하고 있습니다.

이상 두개의 모듈을 먼저 사용하기 위해 설치하도록 하겠습니다

 

init 명령어로 만들어낸 프로젝트 폴더 내로 이동하여 Powershell을 오픈합니다

 

npm i @ui-kitten/components @eva-design/eva react-native-svg

npm install @react-navigation/native

npm install @ui-kitten/eva-icons

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

위 순서대로 다 설치를 하고 나면 Typescript를 사용하기 위해 환경을 조성합니다.

(위 두개의 모듈이 모두 Typescript 기반 설명을 제공하기 때문에 Typescript를 사용합니다.)

 

npm install typescript @types/react @types/react-native --save-dev

위 라이브러리를 설치 한 뒤에 생성한 폴더 내에 새로운 파일 하나를 생성합니다

 

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

이후 cli 오류가 발생하는 것을 막기 위해서 cli를 재설치 합니다.

npm install react-native-cli

 

여기까지 한다면 실행환경 조성은 끝납니다.

 

바로 다음장으로 따라오시면 되겠습니다.