제로초 (3) 썸네일형 리스트형 <리액트 기초> 웹팩 데브서버와 핫 리로딩 - 기존에는 소스코드를 고칠 때마다 다시 빌드를 진행했어야 했다. 하지만 이런 일은 매우 번거롭고, 자동으로 빌드가 되기를 원한다. - 그래서 이 장에서는 실시간으로 빌드가 되는 핫리로딩에 대해서 알아보자. npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D - 핫리로딩을 위해서는 위와 같이 리액트 리프레시와 리프래시 웹팩 플러그인이 필요하다. npm i -D webpack-dev-server - 리로딩을 위해서 개발용 서버가 필요하므로 웹팩 데브 서버를 설치한다. - 그리고 기존에 packge.json파일 스크립트에 webpack만 작성했었던 대신 webpack serve --env development로 변경해 준다. - 이제 위에서 받은 플러그.. <리액트 기초> 메서드와 함수형 setState 이번 장에서는 간단한 구구단 게임을만들며 리액트의 기능들을 학습했다. 질문이 각 1부터 9까지 숫자로 랜덤으로 나오고 답을 입력한다. 입력버튼을 누르면 틀리면 땡, 정답이면 정답이라는 문자와 답을 출력하고, 다음 문제가 위에 새로 뜨게 된다. 먼저 지난 장에서와 같이 헤드에 리액트, 리액트돔, 바벨을 넣는다. 그리고 div태그로 root를 만들어준다. class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { ... }; } onSubmit=(e) => { ... }; onChange=(e) => ...; input; onRefInput = ...; render() { return ( ... ); } }.. <리액트 기초> 리액트 컴포넌트 이번 장에서는 리액트를 통해 간단한 컴포넌트를 만들어 보았다. 리액트는 컴포넌트라는 객체를 통해 비슷한 형식을 매우 간단하게 불러와서 보여줄 수 있다. 게다가 변화가 있더라도 페이지의 새로고침없이 원하는 부분만 변화시키며 사용자의 경험을 더 좋게 만들 수 있다. 먼저 헤드부분에 리액트와 리액트 돔을 불러왔다. 바벨은 후에 있을 JSX문법때문에 불러왔다. 참고로 개발환경에서는 .development.js를 사용하지만 배포후에는 production.js로 변경한다. body에는 리액트돔으로 넣어줄 태그들이 들어갈 root div를 만들어 둔다. 먼저 컴포넌트가 들어가는 스크립트를 만들었다. 아래에 html태그와 비슷한 구문이 있는데 이것은 javascript와 xml을 합친 JSX이다. 이것을 사용하기 위해.. 이전 1 다음
