목록React/basic (28)

개발노트

4.자동빌드

react-hot-loader , webpack-dev-server 설치 npm i -D react-hot-loader webpack-dev-server server가 있어야 frontend 코드변경점을 감지해서 자동으로 빌드 해줌(변경사항도바꿔줌) 노드몬같은것 webpack-dev-server는 ? //webpack.config.js "scripts": { "dev": "webpack-dev-server" }, 컴퓨터를 서버로 프론트엔드프로그램을 돌릴수 있게해줌 웹팩설정 1)실행부분 명령어 바꾸고 //webpack.config.js "scripts": { "dev": "webpack-dev-server --hot" }, 2) babel-loader 를 loader하는 option에 plugin에 추가 ..
React/basic 2020. 7. 16. 12:53
3. (3)웹팩설정 @babel/preset-env / plugins

웹팩설정파일(webpack.config.js)에서 presets 플러그인들의 모음 (안에는 수십개의 플러그인들) preset-env 가 옛날브라우저 지원해주는 플러그인인데 ie를 안쓰면 크롬만 설정하도록 preset-env에 세부설정을 해주는것 module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options:{ presets:[ ['@babel/preset-env' , { 여기에 } ] , '@babel/preset-react'], } }] }, 타겟을 '한국에서 점유율이 5%이상인 브라우저만' 지원하겠다 이렇게 설정이 가능 module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options:{ p..
React/basic 2020. 7. 15. 16:15
3. (2)babel

바벨 설치 npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader 바벨 기본기능 , 브라우저에서 옛날문법 바꿔주는애 , jsx지원, 바벨 웹팩 연결 npm i -D @babel/plugin-proposal-class-properties state ={ } 문법지원해주는 플러그인 //webpack.config.js entry:{ app: ['./client'], }, module: { rules:[{ test: /\.jsx?/, //js ,jsx파일에 어떤룰을 적용하겠다 loader: 'babel-loader', //어떤룰? 바벨로더 options:{ //바벨의 옵션들 presets:['@babel/preset-env','@babel..
React/basic 2020. 7. 15. 12:36
3. (1)webpack

웹팩을 쓰는 이유 ? 한파일에 코드가 1000줄 2000줄 이렇게 길어지면 유지보수가 어려워짐 src="modal.js" 로 나눠도 (같은 코드 여러번 가져와서 쓰는거니까) 코드의 중복이 발생 여러 자바스크립트 파일을 하나의 자바스크립트로 합쳐주는 것이 웹팩 +바벨도 적용할수 있고, console.log도 제거할수있음 ! (웹팩을 자바스크립트 실행기(노드)가 실행해주기 때문에 노드 알아야 함. 물론 node, npm 도 깔아야 함 ) node 설치후, cmd로 webpack 과 react를 설치하기 //원하는 폴더로 이동후 npm init npm i react react-dom npm i -D webpack webpack-cli //-D 는? 나는 개발용으로만 웹팩쓸꺼야 이뜻. package.json 에..
React/basic 2020. 7. 14. 23:14
이전 Prev 1 ··· 3 4 5 6 7 Next 다음