소망개발노트

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 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..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 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를 가짐! 컴포넌트마다 별개로 동작함!!

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 이번 강의에서부터 state가 무엇인지를 파악하는걸 중요하게 다루셨다. 구구단에서 바뀌는 , 바뀔수있는 여지가 있는 부분은 4가지 랜덤으로 바뀌는 숫자부분(2) , 인풋에 담기는 값, 결과 값 해당부분은 component로 만들어둔 GuGuDan class의 생성자의 상태로 지정해준다. class GuGuDan extends React.Component { constructor(props){ super(props); this.state = { // 바뀌는 것들을 속성으로 추가해주기 first:Math.ceil(Math.rando..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 바벨 bable 자바스크립트에서 html태그를 사용하게 하지 않는데 이것이 바로 우리가 리액트를 포기하게 만드는 이유중 하나라고 하심 그래서 나온것이 바벨. 최신문법과 실험적인 문법을 자바스크립트에서 사용할 수 있게 해준다고함. 바벨도 스크립트가 있어서 써줘야함! 바벨을 사용하기 위해 먼저 head에 추가해줘야한다. " target="_blank" rel="noopener">https://unpkg.com/babel-standalone@6/babel.min.js"> 기존에 createElement를 이용해서 만드는 건 알아보기 ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 1-2에 상태가 추가되었다. render() render() {return e( 1 , 2 , 3 ) } 1. 태그 , 2. HTML속성 , 3. 내용 state (상태) 컴포넌트의 상태가 바뀔 수 있는 부분 좋아요 버튼을 생각하면 => 좋아요 버튼(Like) 클릭하면 Liked로 내용이 바뀔 수 있다는 것임 생성자 부분에서 state(상태)를 (like:false)로 해둔 후 버튼 이벤트가 발생하면 안에있는 내용을 바꾸게 만드는 코드다.