놈플릭스 강의 만들기 복습 (react)

yarn 설치 npm 명령어와 같은 기능을 하나 훨씬 빠르다고 한다. npx 사용 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구. 기존의 npm create-react-app 불편사항 create-react-app과 같이 자주 사용하지 않는 무거운 패키지가 로컬 스...

react에서 제공하는 , 태그를 이용해 라우터 설정을 간편하게 할 수 있다. component를 사용하여 Routes/... 경로에 있는 파일로 연결 가능하다. 태그를 이용하면 한 번에 오직 하나의 Route만 렌더하게 된다. Route에 exact 를 기재하면 정확히 그 경로만 설정된다.

className을 자바스크립트로 캡슐화하여 css 사용하는 방법 파일 구조 src/Components/Header/index.js src/Components/Header/Header.js src/Components/Header/Header.module.css Header.module.css Header.js 해당 module.css를 임포트 css...

global하게 작동하는 css 기재법 파일 구조 src/Components/GlobalStyles.js src/Components/App.js 추가한 패키지 GlobalStyles.js App.js

헤더가 어떤 라우터에 있는지 알게 하자 파일 구조 src/Components/Header.js Header.js

https://developers.themoviedb.org/3/movies/get-movie-details 해당 홈페이지에 무비, 티비의 정보 디비를 얻을 수 있는 api 함수들이 있다. api.js [이미지1] image.png

React 디자인 패턴 Container + Presenter Pattern : container 컴포넌트와 presenter 컴포넌트를 분리시킨 패턴 container 컴포넌트는 논리 담당, logic과 api를 갖고 있고, presenter 컴포넌트은 UI 담당, 사진 등...을 갖고 있다. ex) 홈 라우터를 예시로 보자 폴더 구조 Routes/...

폴더 구조 Components/Section.js Routes/Home/HomePresenter.js Section.js HomePresenter 안에 사용될 컴포넌트 Section이라는 파일 작성 {title} : 리액트의 props로 HomePresenter 에서 title="어쩌고" 어쩌고 값을 받는다 {children} : 리액트의 props로...

파일 구조 /Routes/Detail/DetailContainer.js DetailContainer.js state 값으로 result, error, loading 을 갖고 있는 DetailPresenter 컨포넌트에 console.log(this.props)를 찍어보면 => match, location, history 데이터가 보인다 image.pn...

파일 구조 /Components/Poster.js /Routes/Home/HomePresenter.js Poster.js id, imageUrl, title, rating, year, isMovie=false 값을 갖고 있는 Poster 컴포넌트 생성 리액트에서 제공하는 Link 태그를 이용해 /movie 와 /show 라우터 분기 스타일 컴포넌트로 ...

App.tsx typescript의 장점 state의 상태값을 Interface로 미리 지정해서 setState에 없는 state를 지정해주는 실수를 줄일 수 있다 ex) this.setState({hello:1}) => error : hello doesn't e