거름

리액트 기초- 10 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. async와 await (fetch, then 을 계속 하다보면 callback 지옥에 빠지게된다.) then 안에 then... 안에 then..callback 지옥에 빠집니다. 그에 대한 해결책(async, await) 사용자 정의 함수 2개를 만들어줍니다. _getMovies와 _callApi getMovies는 가져온 영화관련 정보를(jso..

리액트 기초- 9 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. Ajax(비동기 자바스크립트 그리고 xml)(https://yts.am/api#list_movies) 해당 사이트에서 를 이용할것 입니다! Ajax를 React에서 사용하는 방법-> fetch(url) 함수 사용 App.js Promise-> 자바스크립트의 새로운 컨셉(?)입니다!-> 영화관련 API를 불러오는 동안 (fetch) 다른 작업을 하길 ..

리액트 기초- 8 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. state가 없는 Component(props만 존재,render 없음,라이프 사이클 없음) state가 없는 컴포넌트는 function 함수명 (props) { return() } 으로 구성할수있습니다. props는 {}->JSX 로 받아주면 됩니다. (this.props.어쩌고 는 쓰지 않습니다. 못써요!class 안에 있는 this 키워드 이기..

리액트 기초- 7 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. React Component Lifecycle 컴포넌트의 여러 기능을 순서대로 실행 RendercomponentWillMount()▼render()▼componentDidMount() UpdatecomponentWillReceiveProps()▼shouldComponentUpdate() ▼(true일 경우만)componentWillUpdate()▼r..

리액트 기초- 6 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. props의 타입 검사 (정수, 실수, 문자열, 꼭 요구되는 값 등)prop-types 모듈 필요 cmd 에서 movie-app2 폴더로 들어갑니다. 모듈을 설치합니다.(npm install prop-types 도 가능) title은 string여야하고 isRequired 꼭 요구되는 값이다!하고 정의를 해주면다른 값이 들어왔을 경우 에러메세지(Wa..

리액트 기초- 5 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. 그럼 App.js를 이렇게 수정 한 후 poster 이미지 도 자식 컴포넌트로 보내주면서!Array.map을 사용해볼겁니다! 지금은 movies 배열의 내용이 4개뿐이지만몇갠지 내가 알수가 없는 상황이거나 무수히 많을 경우 movies[0].titlemovies[1].titlemovies[2].titlemovies[3].titlemovies[4].t..

리액트 기초- 4 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. (Dataflow with Props) React는 Data가 위에서 아래로 흐릅니다.아래에서 위로는 가지 못하는 것이죠. 부모컴포넌트가 자식컴포넌트에 정보를 넘겨줄것입니다.-> props App.js 에서문자열 배열을 생성해서Movie.js의 Movie 컴포넌트로 문자열을 넘겨보겠습니다. movies 라는 이름의 문자열 배열 생성 후 title={..

리액트 기초- 3 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. 컴포넌트 추가로 만들어보기 Movie.jsMovie.css파일 생성 후App.js 와 비슷한 형태로 구현한다. React - Component가 필요합니다.(import)css를 후에 사용하기위해 미리 import 해줍니다. render(){return();} 함수로 사용자에게 보여줄 부분을 구현합니다! 이렇게 구현해 놓은것을 사용자에게 실질적으로 ..

리액트 기초- 2 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. movie-app2를 vscode로 확인해보면여러 파일들이 생성되어있는걸 확인할수있습니다. JSX 자바스크립트 안에 html이 포함되어는것으로React 컴포넌트를 만들 때 사용하는 언어 사용법 1. css 사용시 'class' 가 아닌 'className' 을 사용2. 자바스크립트의 값을 html에 사용시 {} 안에 변수명을 넣어서 씀 App.js ..

리액트 기초- 1 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. nodejs와 npm, yarn이 설치되어있는 상태여야합니다. Code Editer 는 Visual Studio Code를 사용할겁니다! 0. 환경 Window10 / 64bit 1. create-react-app 설치 작업환경 설정을 쉽게 해주는 모듈?입니다. -g(global 로 전역으로 설치한다는 것입니다.) CRA의 장점구성,설정 (confi..