CRNA로 만들어진 사이드프로젝트 Netflify 앱- Movies 화면 스냅샷

 

여러 플랫폼에 서비스중인 영화,TV 소개 앱 (Netflify)

Netflify

 

영화와 TV 정보를 가져와 최신소식을 보여주는 간단한 앱 - Netflify(넷플리파이) 

 

앱 설명

처음에는 넷플릭스를 대상으로만 최신 트랜드를 보여주고 싶었으나, 필터링 하는것이 까다로워 일단 모든 OTT를 대상으로 최신 정보만을 일주일 단위로 표시하도록하였다. 

 

Movies 스크린 사용한 기능설명 

Movies.jsx

0.00MB

현재는 하단 탭 중 Movies 만 구현되었고, ScrollView로 구현된 리스트를 FlatList로 수정해봤다. Movies 구역은 swiper로 자동으로 화면이 넘어간다. 사용자가 컨트롤 할 수는 없다.

Trending Movies 는 오른쪽으로 스크롤하는 리스트, Comming Soon은 아래로 내려가는 리스트이다. 

Trending Movies 에서는 카드이미지와 제목, 별점이 하나의 컴포넌트로 렌더링 되도록 컴포넌트를 분리하였다. (HMedia.tsx)

마찬가지로 Comming Soon 에서 표시되는 카드이미지 , 계봉예정일, 줄거리도 하나의 컴포넌트로 분리하였다. (VMedia.tsx)

리스트를 당겨서 새로고침하는 기능은 ScrollView로 구현되었을 때 refreshControl Prop 을 사용하고 , FlatList 일때의 당겨서 새로고침 기능은 onRefresh prop 을 사용하였다. 

 

<ScrollView> 일때 컴포넌트 구조

최상위 컴포넌트 안에 swifer / scrollview 를 모두 랜더링한다.

<ScrollView> 			//horizontal list
	<Swifer/> 		//vetical swifer
	<ScrollView> 		//vetical list
    	<item>...<item> 	//vertical item rendering
    </ScrollView>
    <item>...<item> 		//horizontal item rendering
</ScrollView>

<FlatList> 일때 컴포넌트 구조

최상위 컴포넌트는 FlatList가 되고 이것은 Comming soon 리스트를 랜더링 한다. ListHeaderComponent 프랍을 이용하여 Headeritem을 swifer + flatlist(tranding movies)를 묶어 랜더링 한다.

<FlatList  //horizontal item (comming soon) rendering
	data = {comming_soon_data}
	ListHeaderComponent = {
		<> // 다중 컴포넌트를 묶어주는 Fragment
        	<swifer/>
            <FlatList/> // Vetical item (Tranding Movies) rendering 
        </> 
    }
>

Fragements  설명  

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다. 아래 두 문법은 동일한 효과가 납니다.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

Fragements 단축문법 <> </>

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

남겨진 문제점

darkMode/liteMode 의 Theme 이 적용되지 않는다. 

아직 코드가 정리 되지 않았다.

Header Title 인 Movies 가 가운데 정렬 되지 않았다. 

 

# 개발환경과 사용한 컴포넌트(기능)관련 포스팅 글들

node version - v16.0.0

expo - ^46.0.0

 

#package.json

{
  "name": "netflify",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/bottom-tabs": "^6.5.3",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "expo": "^46.0.0",
    "expo-blur": "~11.2.0",
    "expo-cli": "^6.1.0",
    "expo-device": "~4.3.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.2",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-swiper": "^1.6.0",
    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@tsconfig/react-native": "^2.0.3",
    "@types/jest": "^29.2.6",
    "@types/react": "^18.0.27",
    "@types/react-test-renderer": "^18.0.0",
    "@types/styled-components": "^5.1.26",
    "@types/styled-components-react-native": "^5.2.0",
    "typescript": "^4.9.4"
  },
  "private": true
}

#ReactNative 패키지

ScrollView , FlastList  https://greenerydeveloper.tistory.com/179

@React-navigation/native-stack , @react-navigation/bottom-tabs https://greenerydeveloper.tistory.com/164

 

# 추가설치 패키지

styled-components https://greenerydeveloper.tistory.com/167

expo-blur  https://greenerydeveloper.tistory.com/174

expo-splash-screen

react-native-swiper

@expo/vector-icons

TypeScript  https://greenerydeveloper.tistory.com/166

# 그외 

fetch / await / async https://greenerydeveloper.tistory.com/171 

https://greenerydeveloper.tistory.com/172

 

 # 프로젝트 생성과 일반

https://greenerydeveloper.tistory.com/161

처음 생성한 프로젝트에 필요없는 부분 삭제하기 with npx create-react-native-app

https://greenerydeveloper.tistory.com/162

리엑트네이티브 어플리케이션 생성 방식 종류와 차이점 정리

 

https://greenerydeveloper.tistory.com/163

OPEN API 무료 영화정보 조회 사이트

https://greenerydeveloper.tistory.com/165

node version 변경하기 NVM 명령어 정리

 

끝