소망개발노트

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react React.createRef 클래스 컴포넌트에서도 함수 컴포넌트처럼 ref를 사용할 수 있게 해줌 Class, Hooks 상관없이 current로 접근 가능함 방법은 간단함 createRef를 import해주고 input = createRef(); 원하는 태그에서 ref = {input}으로 호출해주면 된다. import React, { useState, createRef } from 'react'; const inputRef = createRef(); inputRef.current.focus(); props와 state 연결하..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 렌더링 되는 것을 막는 두번째 방법 PureComponent import React, {PureComponent} from 'react'; class Test extends PureComponent { state = { counter:0, }; onClick = () => { this.setState({}); }; render(){ console.log('렌더링', this.state); return ( 클릭 ) } } export default Test; shouldComponentUpdate에서 return을 true로할지 ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react React Developer Tools props를 사용하면 렌더링이 자주 일어나서 성능이 저하된다. React Devtools를 이용하면 리액트 컴포넌트를 확인할 수 있음!! 크롬> 확장프로그램 > ReqctDEveloper Tools 검색 , 설치 이것을 다운받게되면 크롬의 개발자도구(f12)에서 리액트라는 탭이 생긴다 - 만약 리액트 탭이 안생겨있다면 ? 더보기 확장프로그램에서 React Developer Tools에서 > 상세보기 > 파일 URL에 대한 엑세스 허용! (이것도 안되면 강력새로고침!) 현재 개발모드로 되어있..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 클래스에서 Hooks로 바꿀때는 useState, useRef 를 import해야함 그리고나선 this.state를 지우자! 이전값이 필요하다면 함수형으로 사용하자! setTries((prevTries) => [...prevTires, {try :value, result :'홈런'}]); Hooks버전 NumberBaseball.jsx import React ,{ useRef, useState } from "react"; import Try from "./Try"; const getNumbers = () => { // 숫자 네개..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 리액트에서는 배열에 값을 추가할때 push()를 사용하면 안된다. => 리액트에서 무엇이 바뀌었는지 감지하지 못하기때문! const arr = []; arr.push(1); console.log(arr === arr); //ture const new_arr = [...arr, 2]; console.log(arr === new_arr) //false 기존 배열을 복사해 만든 새 배열을 할당해주는 방법으로 배열을 갱신해야함! 리액트에서의 반복문은 대부분 map을 사용함!! render() { const {} return ( ... ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react key와 map에서 구현했던 코드를 조금더 가독성있게 만들어 보자 {this.fruit.map((v , i) => ... 아래에 li로 반복문코드를 써주었던 부분을 따로 위에 뺄 수 있다. fruit = [ {fruit: "사과", taste :"맛있다"}, {fruit: "배", taste :"달다"}, {fruit: "바나나", taste :"맛없다"}, {fruit: "포도", taste :"싫어"}, {fruit: "딸기", taste :"좋아"}, ]; 조금더 가독성있는 코드가 되었다. 여태까진 한두줄의 간단한 코드가 ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react map 반복되는 부분을 배열로 만들어서 map 함수를 이용해준다. 배열을 다룰때 자주 사용됨! 배열의 각 원소들을 앞에서 부터 하나씩 가져오고 보통은 화살표함수랑 같이쓰임 {/* 반복되는 걸 배열로 만들자 */} {['사과','배','바나나','포도','딸기'].map((v)=> { return( {v} ); })} key 아래와 같은 경우 어떻게 만들어 줄까 ? 사과 - 맛있다 바나나 - 맛없다 포노 - 시다 감 - 떫다 실무에서는 1차원적인 배열이 아닌 좀더 복잡하게 태그들이 얽혀있는 경우가 많다. {/* 반복되는 걸 배열로..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 둘다 다른 파일의 코드를 불러온다는 목적을 가지고 있음! 하지만 babel같은 ES6코드를 변환해주는 도구 없니는 require 키워드를 사용해야한다고 함 require 노드의 모듈에서 사용하는 방법으로, 남이 만든 모듈이나 다른파일에서 만든 모듈을 불러올 수 있다. modeul.exports = {리액트 컴포넌트이름} import {객체} from = "{파일 주소, 모듈 이름}" import ES2015에서 새롭게 도입된 키워드 리액트에서 default로 export되는게 아니면 중괄호로 감싸서 import! export d..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 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 서버를 추가한다거나 이런게 대부분이라 정말 의심하지않고 위 방법을 따랐고.....