개발자를 향해...

본 내용은 노마드코더 - 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; } ..

본 내용은 노마드코더 - 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..

본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. 1. 준비하기 우선 node.js가 깔려 있는지 확인해보았다. node.js를 깔면 npm도 함께 깔린다고 한다. npx도 설치해야하며 설치하는 코드는 npm install npx -g 이다. 코드 에디터는 visual code로 한다. 마지막으로 git을 설치해야한다. git --version으로 버전을 확인해보았다. 이렇게 준비가 완료되었다. 2. ReacJS 어플리케이션 생성 리액트를 시작하기에 앞서 원래는 babel, webpack등 브라우저를 위해 필요한 것들을 따로 설치해주어야 했는데 이제는 create-react-app으로 한번에 가능하다. 해당 명령어로 react 앱을 만들 수 있다. 이 명령어로 ..

본 글은 강의- Minjun Kim님의 누구든지 하는 리액트를 수강하면 작성되었습니다. LifeCycle API 설명 일단 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있다. constructor constructor(props){ super(props); } 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 constructor가 호출된다. 자신이 가지고 있는 생성자 함수를 먼저 후출하고 이후에 하고싶은 작업을 실행한다. componentWillMount 새로운 버전에서는 없어진 함수이다. componentDidMount 이 함수는 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 외부 라이브러리 연동(D3, masonry, etc)이나 컴포넌트에서 필요한 데이터(Ajax, Gra..