React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 여기서 필요한건 react-hot-loader, webpack-dev-server 모듈이다. webpack-dev-server 모듈은 webpack.config.json을 읽어 빌드하고 서버로 유지해주는 역할이라고 한다. 로컬에서 서버를 돌릴 수 있다. react-hot-loader는 실시간으로 변경된 것을 확인할 수 있게 해준다. 모듈 install // cmd npm i -D react-hot-loader npm i -D webpack-dev-server 제로초님 강의에 서버가 공포감을 줄 수 있다고 한다. 나역시도 그랬던 것 같다..
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 index.html 파일이 필요하다. (webpack.config.js에서 entry에 적었던 파일들을 output으로 출력했을 때, 이 파일을 로드할 index.html!) 프로젝트 루트에 index.html을 생성한다. // react에서 DOM을 생성하여 넣어줄 태그! app.js에서 id값으로 접근하고 있다. // webpack.config.js에서 output에 경로를 작성한 파일 입력 그리고 html에서 처음으로 로드할 app.js 파일이 필요하다. 이 파일은 entry. 프로젝트 루트에 app.js 생성한다. // i..
React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 필요한 패키지 install 후에 webpack 설정해보기 프로젝트 폴더에서 npm 설정 // cmd npm init 필요한 모듈을 받아준다. react, react-dom, webpack, webpack-cli @babel/core, @babel/preset-env, @babel/preset-react, @babel/plugin-proposal-properties, babel-loader npm install --save-dev webpack webpack-cli npm install --save-dev @babel/core @bab..
강의 유튜브 주소 : http://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 우리가 아는 HTML에서 CDN방식으로 React를 사용하려면 총3개의 script가 필요하다며 강의에서는 하단의 3개의 script 경로를 알려준다. // react // react-dom // babel-loader babel-loader는 react문법을 html에서 알 수 있도록 컴파일하는 역할을 한다. 사용예제