[clone coding- devfilx] 클론코딩 시작

앞서 간단한 무비  info앱을 만드는 것으로 react를 맛보았다.

 

이제 본격적으로 movie app을 clone coding해볼것인데 바로 팝콘타임이라는 스트리밍 사이트를 클론해본다.

약간 넷플릭스 비슷하지만 ~ 해적판 사이트라 불법;;; 사용해본적은 없는데 클로닝만 진행해보자

 

먼저 앞서 create-react-app을 설치한 것 처럼 새로운 폴더를 생성해서 npx를 이용해 repository를 생성했다

그리고 필요한 prop-types도 설치하고~

라우터를 설정해줄 react-router-dom도 설치하고~

 

필요한 라이브러리 설치후~ 라우트와 컴포넌트들을 만들어 주었다.

각 라우트들에는 default로 export하는 함수를 설정해주고 라우트 접속시 각 페이지의 이름을 띄워주었고~

 

중요한 라우터의 경우

각 라우트로부터 export된 default 함수들을 import해주고

react-router-dom에 HashRouter를 임포트 해주는데 HashRouter는 Router라는 변수에 담아주고~

Route도 import해준다.

 

그리고 역시 default로 export하는 arrow function을 만들어 주는데

 

빈태그 없이 이렇게 해주면 에러가뜬다 Router는 오직 한개의 child만 가질 수 있다나 뭐라나...

그래서 니코가 알려준 방법은 <> </> 안에 넣어주는 것이다. fragment라고 했는데

찾아봐야겠다. 어찌되었든 Router안에<> </> 를 만들어 그안에 routes들을 넣어 설정함으로서

결국 child는 하나인 셈이다. 그런데.. 왜 그냥 이렇게 해도 되지;; 금세 업데이트 된것인가....

 

그리고 App 컴포넌트는 역시 return에 Router를 넣어주었는데~ <></>으로 감싸주었다.

그런데 여기서도 <></>를 빼주었지만 잘된다... 그래도 혹시 모르니 <></>로 child하나로 만들어 진행하자

 

그리고 browserRouter 와 HashRouter가 있는데~ 둘중 어떤 것을 사용해도 무방하나

그냥 더 simple한 hashRouter를 사용한다.