분류 전체보기 83

[React] 3-6 숫자야구 만들기

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

[React] 컴포넌트 분리와 props (+메서드 바인딩)

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

[React] 3-3 리액트 반복분(map, key)

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

개발/react 2022.02.28

[React] 3-1 import와 require 비교하기

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

[React] 2-9webpack dev서버와 핫 리로딩

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

개발/react 2022.02.25

[오류] vscode에서 디버그시사이트에 연결할 수 없음

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

개발/기타 2022.02.24

[React] 2-8 끝말잇기 Class만들기

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

[React] 2-6 구구단 웹팩으로 빌드하기

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

[React] 2-5 웹팩으로 빌드하기 (command not found : webpack 해결하기)

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

[React] 2-3. 웹팩 설치하기

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

개발/react 2022.02.21