React Native로 영화소개 서비스 만들기-1. UI 만들기(1)

저번엔 TodoList를 만들었는데, 이번에는 이 후 강의에서 배운 여러 라이브러리,API들을 통해서 영화들을 소개하는 서비스를 만들어보려고 한다.

오늘 강의는 여러 라이브러리를 사용해서 UI 만드는 것을 배웠고, 그것들을 적용해서 오늘의 과제인 UI를 만들어보려고 한다.

그리고 오늘부터 모든 설치는 yarn 으로만 기재하기로 했다.

 

 

목표

위와 같은 이미지를 만드는것이 목표이다.

 

1. EXPO Project 설치 및 셋업

1-1. EXPO Project 설치

 

https://reactnative.dev/docs/environment-setup

 

React Native 공식문서에서 Expo Go를 터미널 통해 설치한다.

만들 파일명은 Movie-introduction-task 이다.(파일명 자유)

설치 완료가 되면 vscode에서 해당 파일을 열어준다.

 

 

1-2.  배포하기

 eas update

터미널에 입력.

 

 

EXPO 사이트에 로그인이 되어있으면 이런 문구가 나온다.

만약 로그인이 안되어 있으면 아이디,비밀번호 입력하라는 문구가 나올 것이다.

아까 설치 때 약간 문제가 있어서 my-app으로 만들어졌는데 그냥 y를 눌렀다.

 

 

웹사이트 링크가 나오면 cmd+마우스왼쪽 클릭하여 배포가 잘 되었는지 확인한다.

 

 

 

2. App icon, Splash Screen 이미지 변경

 

휴대폰에서 어플을 다운받으면 나오는 그 앱의 아이콘과, 앱 처음 화면 켰을 때 로딩 시 나오는 Splash Screen을 변경해보고자 한다.

 

expo에서 제공해주는 템플릿이라고 한다.

https://docs.expo.dev/guides/app-icons/

 

Figma template 클릭

 

Get a copy 클릭

 

 

이런 화면이 나오는데, 뭐가 뭔지 대충 적어봤다.

저 아이콘을 클릭해서 직접 아이콘을 변경할 수 있다.

나는 그냥 대충 만들었다..아이콘 만들기 왜케 어려움..?

 

그지같이 만들어놨다..

일단 만들었으니 다음챕터!!!!!

오른쪽 Export 탭을 열어 버튼을 누른다.

 

받은 파일을 vscode assets 파일에 넣어준다.

파일이름은 현재 있는 adaptive-icon.png / icon.png / splash.png 와 동일하게 넣어주어야 한다.

 

잘 됐는지 확인하려면, yarn start를 해서 expo go 앱에 접속한다.

이렇게 잘 나오고 있다...

 

 

 

3. Native Stack Navigator 설치 및 적용

React에서 사용했던 Router 기능 + navigation을 위한 Layout도 지원해주는 라이브러리이다.

현업에서도 아주 많이 사용하는 아주아주 강력한 라이브러리 라고 한다!!!

 

https://reactnavigation.org/docs/getting-started

yarn add @react-navigation/native-stack --save

설치설치~

 

 

 

 

지원하는 Navigators는 총 6가지, 왼쪽 메뉴에서 확인할 수 있다.

 

Native Stack : Native module을 이용하여 Navigating을 하고있다.

IOS - UINavigationController module 사용 / Android - Fragment module 사용

일반 Stack보다 속도나 퍼포먼스적인 면이 좋고 커스터마이징은 비교적 다양하지 않지만 그래도 다양한 커스터마이징이 가능하다는 점에서 현업에서는 Native Stack을 더 많이 사용하고 있다고 한다.

Stack : Javascript 자체적으로 구현한 Navigator

Native Stack보다 속도나 퍼포먼스는 조금 떨어지지만 비교적 다양한 커스터마이징이 가능하다는 특징이 있다.

 

Bottom Tabs : 화면 최 하단 탭

 

Drawer Navigator : 서랍을 꺼내듯이 나오는 Nav Bar 같은것..

Material Bottom Tabs : Bottom Tabs인데 구글이 디자인한 Material 테마가 적용되어있다.

Material Top Tabs : 상단에서 이용 가능한 Tabs, 그 외 상동

 

 

작성중....