목록웹 자바스크립트 공부 (36)
개발자를 향해...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qhecz/btqV8FUGUZB/RhXiPIHC3ZimnxRCBAQMbk/img.png)
본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. github 클라우드에 웹사이트 올리기 만든 웹사이트를 클라우드에 올리자. 터미널에 npm i gh-pages를 입력해 설치한다. gh-pages는 웹사이트를 github의 gihub page 도메인에 나타나도록 한다. [git_user_name].github.io/[git 프로젝트 이름]을 주소창에 입력하면 아직은 업로드한게 없으므로 404라는 에러가 뜨는 페이지를 볼 수 있다. 터미널에 npm i gh-pages를 입력하고 package.json으로 가서 "hompage": "(http://[git_user_name].github.io/[git 프로젝트 이름])" 을 추가해준다. 이때 주소의 모든 글자는 소문..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bOdkVG/btqWc9AVXJL/UuMWNryVAcxyDj0nS9qdYK/img.png)
본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. yts라는 불법 영화 사이트에서 api를 참고한다.현재 우리가 사용하려는 api의 주소는 https://yts.lt/api/v2/list_movies.json 이다. 하지만 yts는 항상 그 주소가 바뀐다. 따라서 강의에서 제공하는 api를 사용한다.https://yts-proxy.now.sh/list_movies.json visual code에서 axios를 설치하고 import 하자. ( npm i axios ) 이제 componentDidMount에 axios를 넣어준다. componentDidMount() { const movies= axios.get("https://yts-proxy.now.sh/list..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/b4HUxQ/btqV2WBbCQN/BbHl1Tfn0MDjqsV0QPqli0/img.png)
본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. state - 동적 데이터 이제 state를 통해 동적 데이터를 만들어보자. 지금까지 만든 모든Food 데이터와 컴포넌트들을 지우고 App 함수를 calss 컴포넌트로 만든다. 선언할 때 extends React.Component 를 넣어서 App을 react component로 만든다. 리액트 컴포넌트가 render을 가지고 있기 때문에 클래스 안에 render를 사용할 수 있다. import React from 'react'; import PropTypes from 'prop-types'; class App extends React.Component { render() { return Im eugene; } ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/RI9wz/btqVOsPfPIz/LOZNfTssulKp9Wc6KlullK/img.png)
본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. 브라우저에 실행 화면을 계속 띄우고 싶다면 localhost를 계속 유지하고 refresh할 수 있고 이를 위해 npm start를 실행한 후 console을 종료하면 안된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); reportWebVitals(); 위의 은 컴포넌트component라고 부른다. 리액트는 componen..