주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : 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..

강의 유튜브 주소 : 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..

EventBus도 힘들다 하면 VueX를 사용합니다. props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다. 하지만 실무에서 쓰려면 알아야겠죠.? vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다. 이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다. vueX는 4개의 기능을 알아야 합니다. state 데이터 저장공간 getters 저장한 데이터 가져오기 mutations 데이터 업데이트 actions mutations 실행하기 (ajax요청, mutations동작) vuex를 install해줍니다. npm install vuex 서버가 켜져있을때 npm install하면 오류날 때도 ..