소망개발노트

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react react-refresh 코드를 수정할 때 새로고침하지 않고! 수정사항을 빠르게 교체해주는 라이브러리 설치하기 npm i -D react-refresh npm i -D @pmmmwh/react-refresh-webpack-plugin 설치가 완료되면 package.json에 아래와 같이 react-refresh와 webpack-dev-servcer가 생긴다. script의 명령어를 바꿔주자. script{ "dev" : "webpack serve --env development" webpack.config.js로 가서 위에서 설..

리액트를 공부하면서 갑자기 디버그할때 크롬에서 연결을 거부했다... 두둔)) 사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED crbug/1173575, non-JS module files deprecated. 오류 나의 상황은... 노드로 webpack을 실행 시킨후 f5를 눌러 디버그를 눌렀을때 위 이미지와 같이 나왔고. vscode에서는 원래 있었나? 싶었던 launch.json 파일이 보였다. 정말 이게 원래있었던거같이 은은하게(?) 생겨있어가지구.... 의심을 다른방향으로 했는데 ㅠ 크롬에서 검색했을때 대부분이 저파일을 뜯어고치거나. 프록시를 설정하거나 DNS 서버를 추가한다거나 이런게 대부분이라 정말 의심하지않고 위 방법을 따랐고.....

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 끝말잇기를 class형태로 만들어보자... 구구단과 거의 같은 형태를 가지고 있다. 솔직히 나도 class보다는 훅스가 더 편한거 같다. WorldRelay.jsx 파일을 만들어 아래코드를 입력해준다. class버전 const React = require("react"); // 사용하는 얘를 npm에서 불러와야함 const { Component } = React; class WordRelay extends Component { state = { // 컴포넌트 안써도 됨! word: "소망", value: "", result: "..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react https://somang-dev.tistory.com/67 [React] 1-7 (클래스 메서드 )구구단 리액트로 만들기(2) 인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 변할것들을 state로 만들고 변할것들 위치에 state 넣어주고! input에.. somang-dev.tistory.com 리액트로 만들었던 구구단을 이번엔 웹팩을 이용해 만들어본다. 먼저 웹팩을 사용할 수 있는 환경으로 만..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react webpack을 사용할때 아래 이미지와 같이 command not found: webpack 이라는 오류메시지를 볼 수 있다. 노드를 사용할 때 자주 만나던 오류인데,,,여기서 또 만나게 될줄이야,, 이런경우는 명령어로 따로 등록해주어야 함 해결 방법은 세가지가 있다. 1. 명령어를 등록해주거나 2. 스트립트에 적어주거나 3. 마법의 npx 2. 스크립트에 적어주는 경우 package.json 안에 script로 적어주는경우 npm run 스크립트 명(dev) 을 사용하면webpack이 실행된다. => npm run dev 3...

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 웹팩 여러개의 자바스크립트 파일을 (페북처럼 2만개의 자바스크립트 파일이라도) 한번에 합쳐서 하나의 자바스크립트 파일로 만들어주는 기술 더해서 바밸도 적용할수있고 쓸데없는 코드를 제거할수도 있음(console.log ...) 웹팩을 하기위해서는 노드를 알아야한다. 이 말이 서버를 알아야한다는게 아님 노드는 자바스크립트 실행기..라고 리액트를 하려면 자바스크립트 실행기(노드)를 알아야한다!! => 노드가 깔려있어야함 vscode 터미널에서 lecture폴더에가서 /cd lecture npm init을 써준다. 그럼 package...

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 앞에서 사용했던 방법은 class를 사용한 방법이였다. 함수 컴포넌트는 보통 안에서 setState와 ref를 할 필요가 없는 경우에 사용했다. 그래서 매우 깔끔했는데, 여기서도 setState랑 ref를 사용하고싶ㄷㅏ!!! 라는 사람들의 요청에 그 둘을 사용할 수 있게 만들어 준것이 바로 React Hooks다. React Hooks 함수형 컴포넌트에서만 사용되는 특수한 형태의 함수를 의미 다른 함수들과 착각하지 않게 앞에 use를 붙여서 만든다. (ex. useState, useEffect() ... class compone..

Error: Cannot find module 'webpack-cli/package.json' Require stack: - /Users/.npm/_npx/92619/lib/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.resolve (internal/modules/cjs/helpers.js:94:19) at runCli (/Users/.npm/_npx/92619/lib/node_modules/webpack/bin/webpack.js:65:26) at /Users/.npm/_npx/92619/lib/node_modules/webpa..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 세상에 강의 듣다가 알게된건데 리액트는 꼭 하나를 로 감싸줘야했다고 함.. 설마 그래서 모든 사이트가 다 div..천지였던걸까?? 근데 이게 개선이 되었다고 함!! 쓸대없는 를 빈태그를 사용해서 없애줄 수 있음!! 만약 저렇게 사용했을 때 에러가 난다면 (바벨ㄹ이 지원하지 x) 를 해주면 된당 지저분하긴한데 지금 바벨이 지원을 안함...바벨2를 설치하면 됨 ㅎㅎ setSatate if (parseInt(this.state.value) === this.state.first * this.state.second) { this.setS..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 변할것들을 state로 만들고 변할것들 위치에 state 넣어주고! input에 글자를 바로 쓸수 없으니 onChange로 글자가 바뀔때마다 바뀌도록 만들어주어야함. 변하는 부분을 우리가! 컨트롤하는 것! 이벤트 리스너는 html이랑 똑같음 => 함수로 뺄 수 있다.^^ 결과 이것이 구구단이라는 component를 만든것..!! ReactDOM.render(, document.querySelector('#root')); 위처럼 여러개를 사용할수있는데 위 세개가 같은 컴포넌트지만 다른 state를 가짐! 컴포넌트마다 별개로 동작함!!