15.1 프로젝트 생성 및 초기 설정하기
이 장에서는 다음 기능을 갖춘 앱을 만들어 볼 것입니다.
• 회원가입 / 로그인
• 게시글 등록 / 조회 / 수정 / 삭제
• 댓글 등록 / 조회 / 수정 / 삭제
이 기능을 한 화면에서 모두 구현하기는 어려우니 리액트 내비게이션을 사용해 여러 화면으로 앱을 구성하겠습니다. 또한, 이번 프로젝트도 타입스크립트 환경에서 개발을 진행합니다.
다음 명령어를 사용하여 새 프로젝트를 생성하세요.
$ npx react-native init ArticlesApp --template react-native-template-typescript
프로젝트가 생성됐으면 리액트 내비게이션에 관련한 라이브러리를 설치하세요.
$ cd ArticlesApp $ yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs
이번 앱에서는 아이콘도 사용해야 하니 react-native-vector-icons 라이브러리도 설치하세요.
$ yarn add react-native-vector-icons @types/react-native-vector-icons
앱을 종료해도 사용자의 인증 상태를 유지하기 위해 AsyncStorage 라이브러리를 설치합니다.
$ yarn add @react-native-async-storage/async-storage
마지막으로 이번 프로젝트에서 학습할 라이브러리인 리액트 쿼리와 HTTP 요청을 할 때 사용하는 라이브러리인 axios를 설치하세요.
$ yarn add react-query axios @types/axios
라이브러리 설치가 끝났습니다. iOS 환경에서 앱을 실행할 경우 npx pod-install 명령어를 입력하세요.