[React Native] Noovies 클론코딩 개발일지

Stack과 Tab Navigation 어떤 방법으로 동시에 사용하였을까?

1. navigation.navigate("Detail") 와 navigation.push("Detail") 기능이 같다.
   Detail로 갔을 시 탭이 사라지는 현상때문에. 어떤 함수가 적합할까?
2. Header 설정방식도 궁금하다. 각 Screen에서 설정해준건가? (결국 이름 변경 못했음)

각 Component 들

1. 별점, 출시일도 컴포넌트로 생성할만하다. 확인해보기
   • 이미지 크기들도 다 일정한 것 같다. 컴포넌트로 따로 만들었는지 확인
   • 스크롤 뷰도 같은 형태가 3개 반복되는데 이것도 확인
   • 별점 출력해주는 것까지?
2. 세로용, 가로용, 자동슬라이드 이렇게 3개 만들예정. 노마드의 네이밍이 궁금하다.
   • 가로용 ComingSoon은 date가 표시되어있고 AiringToday는 없다..
     컴포넌트를 따로 만든건지? 아니면 데이터 요청받을때 date가 값이 없어서 안나온건지?
3. 카드 리스트 형식 같은 경우에 css를 주로 어디에 작성하는지? 카드에다? 리스트에다?
   • 스크롤뷰 맨 오른쪽에 공간남게하려면 어떻게?
   • ScrollView vs FlatView 어떤거?
4. 자동 슬라이더
   • 커스텀 모듈이 너무 많다.. 어떤 것을 써야할까
5. 버튼
   • 대문자로 나온다 -> TouchableOpacity로 구현함.. 확인해보기
6. 글자수 제한
   • numberofLines 안쓴것같다. 직접 함수 구현한건가?
7. 백그라운드 이미지
   • UI 컨트롤하기 너무 어렵다. height를 %로 줬는데,
     주변 div의 margin값에 크기가 변경된다.. -> 결국 마지막에 height 수치를 조절하는 방법으로 해결....
8. 로딩창
   • react-native-progress 받아서 쓰려하는데 약간은 복잡하다. 어떤 모듈 받아썼나?
   • 못쓰는거 아닌가.. sroke prop 없는데.... 에러난다.. 예제코드도 안돌아감
9. 소제목
   • (Popular Movies) 같은 소제목들도 컴포넌트로 만들만 하지않나? 세개의 스크린에서 모두 사용...

Screen

1. 각 스크린
   • 탭과의 흰색 경계선..... 불편
2. Discovery
   • 필요기능이 무엇인지 정확히 모르겠음.
     • drag & drop
     • image포개기
     • ???
     • 라이브러리 어떤거 써야되지 ?????

API 요청

1. 요청 시점과 url주소
   • 탭 전환시 각 스크린 didMount() 에서 요청해주는 것 같은데 (movie,tv)
     응답 데이터의 크기가 너무 크다. 10000개 이상
     => .slice()로 시도해도 요청할 때 개수 제한이 되지 않음
     => 스크린 didMount ( useEffect ) 에서 요청했는데 탭 전환할 때 마다 이 함수가 실행되는 것이 아니었음! ( rerendering 도 되지 않는다 !)
   • 자동스크롤에는 무슨 영화 넣어야 됨 ?
   • Popular Movies - https://api.themoviedb.org/3/movie/popular
   • Comming soon - https://api.themoviedb.org/3/movie/upcoming
     • Noovies랑 다른 데이터..
   • Popular TV - https://api.themoviedb.org/3/tv/popular
   • Top rated TV - https://api.themoviedb.org/3/tv/top_rated
   • Airing TV - https://api.themoviedb.org/3/tv/airing_today
2. Movie는 title / TV는 name
   • 같은 컴포넌트 쓰는데..
   • 이거 때문에 Detail의 title을 지정하기 힘들어졌다. 해결하려면 Card들로 넘기기전, Screen에서 key값 통일 시킨 후 넘겨줘야한다. 아니면 이런식으로 짜야한다.

     {DetailScreen}
         options={({ route }) =>
             route.params.info.title
             ? { title: route.params.info.title }
             : { title: route.params.info.name }
         }
     ></Stack.Screen>

3. Detail Screen에서 api요청 또 해줘야한다? ' 아.. MovieDetail이랑 TvDetail로 나눌까.....'
   -> DetailScreen에서 api 요청 작성. 컴포넌트 두개로 나눠서 이때이거 저때저거 부름.

각종 에러

1. Common.js와 ES 방식 혼용 (import, export)
   • 억울한다. 난 ES 방식으로만 작성했는데, Swiper custom module의 export 방식이 Common.js 이었다.... 일단 expo 폰화면에서는 오류 안잡혔었는데 browser로 키니까 에러창 나옴.
2. (Warning) TypeError: "x" is read-only
   • const 로 선언하며 값을 할당했었는데, 값을 재할당할때 생긴 경고창.

Java script 문법

1. map 내에서 조건 주고 싶다..

<Text style={styles.text}>
    {genres.map((genre, i) => {
        let text = genre.name;
        if (i != genres.length - 1) text += ", ";
        return text;
    })}
</Text>

​ 좀더 깔끔하게 안될까