Sumin's Blog

5.0 Deploying to Github Pages gh-pages 설치 npm i gh-pages 웹사이트를 guthub의 github page 도메인에 나타나게 해줌 에서 home page 추가 "homepage":"https://suminRoh.github.io/movie_app_2021/"} scripts에 deploy 추가 "deploy":"gh-pages " 명령어 만들기 deploy : build 폴더를 upload predeploy: npm run build 에서 title 바꾸기 -Movie App https://suminroh.github.io/movie_app_2021/ 링크로 내가 만든 Movie app 사이트 접속 가능 !! 5.1 Are we done? state를 갖기 위해 ..

4.4 Styles Timelapse * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #eff3f7; height: 100%; } html, body, #potato, .container { height: 100%; display: flex; justify-content: center; } .loader { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight:300; } .movies { display: flex; justify-content: space-between; align-item..

4.3 Adding Genres genres를 props에 포함시키기 에서 할 일 Movie.propTypes에 genres:PropTypes.arrayOf(PropTypes.string).isRequired}; 포함시키기 function Movie 인자로 genres 포함시키기 에서 할 일 value 설정 -> genres={movie.genres} HTML에서는 태그 내 class는 class로 사용해도 되지만 Javascript는 component class와 혼란스러워해서 태그 내 class는 className으로 사용 genres 디자인하기 {genres.map(genre=>( {genre} ))} Warning: Each child in a list should have a unique "ke..

4.2 Styling the Movies function Movie({year,title,summary,poster}){ return ( {title} {year} {summary} ); } -> function Movie를 통해 style 만들기 style component style={{ }} javascript 위의 CSS

4.1 Rendering the Movies const movies= await axios.get("https://ytsproxy.now.sh/list_movies.json"); console.log(movies); console.log(movies) 결과 , console에서 movies가 data-> data ->movies에 있는 것 알 수 있음 console.log(movies.data.data.movies); movies에 바로 접근 가능 || const { data:{ data:{movies} } }= await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } movies에 바로 접근 가능 axios에..

4.0 Fetching Movies from API Axios fetch위에 있는 작은 layer 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios.get() axios로부터 온 data를 잡아야함 axios는 느려서 javasscript에게 componentDidMount함수가 끝날떄까지 기다려야한다고 전해야함 asyncasync componentDidMount(){ const movies= axios.get("https://yts-proxy.now.sh/list_movies.json"); } function 따로 만들고 async await 이용getMovies=async()=>{ //async: 함수가 비동기라는 것 const movies= ..

3.3 Planning the Movie Component class App extends React.Component{ state={ //지금의 isLoading 상태는 true isLoading:true }; componentDidMount(){ //component가 생성되면 호출 함수 setTimeout(() => {// delay function (6초 후 실행) this.setState({isLoading : false}); },6000); } render(){ const{isLoading}=this.state; //isLoading앞에 this.state 매번 붙일 필요 없어짐 return {isLoading ? "Loading...":"We are ready"}; // isLoading==..

#3.0 Class Components and State state 는 보통 우리가 동적데이터와 함께 작업할 떄 만들어짐 class component와 function component 차이 function component function이고 뭔가를 return 하고 screen에 표시 class component class이지만 react component로부터 확장되고 screen에 표시되며 render method안에 넣어야함 react는 자동적으로 모든 class component의 render method를 실행하고자 함 state를 가지고 있음 state object component의 data를 넣을 공간이 있고 그 data는 변함 (state를 사용하는 이유) class App exten..

3.2 Component Life Cycle life cycle method 기본적으로 react가 component를 생성하고 없애는 것 mounting : component가 screen에 표시되는 것 constructor() 호출 render() 호출 componentDidMount() : component가 처음 render됐다는 것을 알려줌 (render() 이후 적용) updating : 사용자가 만든 함수에 의해 update (setState를 호출할떄마다 발생) render() 호출 componentDidUpdate () 호출 (setState 호출 -> component호출 -> renfer 호출 -> 업데이트 완료되면 componentDidUpdate 호출) unmounting : co..

2.4 Protection with PropTypes 목표 : father comonent로부터 전달 받은 props가 우리가 예상한 props인지 점검할 필요가 있음 각각의 요소에 추가할 것은 rating (number type) 점점 많은 props를 food object로 전달하고 싶기 때문 (component와 Food의 인자에도 추가시켜줌) prop-types : 내가 전달받은 props가 원하는 props인지 확인 import PropTypes from "prop-types"; 코드 추가해줘야함 Food.propTypes={ //이름은 무조건 propTypes 여야함 name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired..