-
깃허브 static 페이지
-
create-react-app 사용
- 서버 포트 : 3000번
yarn start
-
fontend : React
-
index.js : index.html 의
root
에<App />
render -
App.js (App Component)
componentDidMount()
: 영화 데이터를 fetch해서 setState하는_getMovies()
호출_getMovies()
:_callApi()
호출 후this.state.movies
에 setState_callApi()
: AJAX로 api 데이터 fetchthis.state.movies
확인 후_renderMovies()
호출_renderMovies()
:state.movies
의 movie들을<Movie />
로 render하게 함.
-
Movie.js
-
Movie Component : props로 넘어온 movie 하나당
<MoviePoster />
,props.title
,<MovieGenre />
,props.synopsis
rendertoggleModal()
: 시놉시스div를 onClick 시isOpen
을 반대로 setState해주고,<Modal />
모달창을 띄운다.
-
MoviePoster Component : smart component,
props.poster
로<img/>
render -
MovieGenre Component : dumb component,
props.genre
return
-
-
Modal.js (Modal Component)
- 전체
synopsis
를 모달창에서 보여준다. props.show == false
면 모달창을 안보이게props.show == true
면 모달창을 보이게- close 버튼을 onClick하면
props.onClose
에 매핑되어있는toggleModal()
호출
- 전체
-
-
github page 에 배포하기
- static file인 html, js, css파일을 호스팅해준다.
yarn build //코드를 압축,최적화
//package.json 파일에 추가
"homepage" : "http://kwonsye.github.io/react_movie_app"
yarn build
yarn add --dev gh-pages //github branch이름은 반드시 gh_pages
//package.json 파일에 추가
"scripts": {
// ...
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
}
yarn run deploy
//visit http://kwonsye.github.io/react_movie_app/ !!
- CSS
- Movie.css
@media screen
의미 display : flex
- Modal.css
-
.backdrop
: 모달div를 제외한 전체 화면 style,position : fixed
-
.modal
: 모달div style,posistion : relative
-
close 버튼 css참고한 사이트
-
close 버튼 hover하면 nth-child(2),nth-child(3)가 바뀌는 원리 :
transition
,transform
-
position
-
box-sizing
-
- Movie.css