쥰's 블로그

● 리액트 프로파일러란?React Profiler는 React 16.5에서 새로운 DevTools 프로파일러 플러그인에 대한 지원을 추가한다.이 플러그인은 React의 Profiler API를 사용하여 React 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링되는 각 구성 요소에 대한 타이밍 정보를 수집한다.   ● 리액트 프로파일러를 이용한 성능 측정하기React Profilers를 이용해서 성능을 측정하기 위해서 두 개의 컴포넌트를 생성한 후에 성능을 비교해본다. 1) 폴더 생성   2) 리액트 설치 -> npx create-react-app./ 새로운 폴더를 실행 시켜주기 위해 visual studio를 열어준다.(해당 폴더 주소창에 cmd를 열어 code . 을 입력해도 되고 visual s..

- 다운로드 받기https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko&     ● 익스텐션을 이용해서 렌더링 되는 부분 표시하기Components 탭에서 Highligh updates 부분을 체크해주면 쉽게 컴포넌트가 렌더링 되는 것을 볼 수 있다.(Components 탭에서 톱니바퀴 눌러서 설정)    이렇게 설정하면 어떤 컴포넌트(틱택토의 칸)가 클릭 되었는지 알 수 있도록 해당 선택부분에 하이라이트 표시가 된다.   또한, Chrome과 Firefox의 React Devtools 확장 프로그램을 사용하면 브라우저 개발자 도구에서 React 컴포넌트 트리를 검사할 수 있다..

전체적인 css를 변경하기 위해 index.css로 가준다.그리고 body와 ol,ul을 스타일링 해준다.  그리고 확인해보면 아래처럼 나오게 된다.    다음은 Layout 의 css를 변경시켜주기 위해 App.css로 가준다.      다음은 Move Button css를 변경시켜주기 위해 App.css에서 작성해준다.그 이전에 App.js에서 button의 이름을 지정해주지 않았기 때문에 className을 지정해준다. 그리고 css를 작성해준다.    그리고 위의 사진에서 버튼 왼쪽의 숫자를 지워주기 위해 App.js에서 수정해준다.   이번에는 Board의 스타일을 수정해줄껀데 그 전에 Board.js에서 className을 지정해준 뒤 Board.css를 변경해준다.     그리고 Square..

JumpTo 함수는예를들어, 기록이 되어있는 해당 버튼을 선택했을 시 그 기록 상태로 돌아가는 것을 수행하는 함수이다.   현재는 생성되어있는 버튼을 눌러도 버튼 이벤트가 없기 때문에 아무 것도 일어나지 않는다. app.js 파일로 가서JumpTo 함수를 작성해주고 move의 버튼에 onClick 함수를 작성하여 JumpTo 함수를 넣어준다.  그리고 현재 몇번째 스텝인지 알 수 있는 새로운 State를 생성해준다. (이전으로 되돌아 갔을 때 그 step을 기억하기 위해서) App.js위로 올라가서 작성해 줄껀데 useStateSnippet을 해주면 자동으로 코드가 완성되어 나타나져서 해당 변수만 변경해주면 된다.   이후 stepNumber를 업데이트 하기 위해 jumpTo를 정의해줄 것이다.stepN..

● 간단한 명령어로 코드 작성ES7+ React/Redux/React-Native snippets- rafce 하면 자동으로 import와 export가 생성- rcc 하면 밑의 코드가 자동 생성됨import React, { Component } from 'react'export default class Board extends Component { render() { return ( Board ) }} - useStateSnippet : 자동으로 코드구조가 완성되어 나타남 ● 자동 importAuto Import - ES6, TS, JSX, TSX ● 다음에 뭐 입력될지 예상Tabnine: AI Chat & Autocomplete for JavaScri ● is ..

git hub로 레파지토리에 있던 리액트 파일을 가져올 때 package.json 파일과 node_modules 파일이 있는지 확인해보아야 한다.이 두 파일이 없다면 에러가 발생하게 된다.  - package.json 파일이 없는 상태로 npm install 하면 밑에 처럼 이런 오류가 발생하게 된다.D:\react git\react_study_alone>npm installnpm error code ENOENTnpm error syscall opennpm error path D:\react git\react_study_alone\package.jsonnpm error errno -4058npm error enoent Could not read package.json: Error: ENOENT: no s..

● JSX Key 속성이란?리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야 한다.키는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.  ※ 리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용된다!  -> 바뀐 가상 돔을 생성하여 랜더링한 다음, 이전 가상 돔과 이번에 바뀐 가상 돔을 서로 비교하여 바뀐 부분을 파악하여 바뀐 부분만 실제 돔에 적용해준다.  key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다.  이렇게 하기 위해서 Key에는 유니크한 값을 넣어준다. ( index는 비추천! )index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들..

● 과거의 이동 표시하기 (map 메소드)지금까지 만든 것들은 틱택토 게임의 이동 정보를 기록하고 있기 때문에 이제 플레이어에게 과거이 이동을 목록으로 표시하도록 만들어 줄 것이다. (history state 안에 가지고 있다.)     - map() 함수를 이용해서 history 배열에 있는 것들을 하나씩 나열해주기 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.   코드를 작성하는 곳으로 돌아가서 map() 함수를 이용해 moves를 작성해준다.삼항연산자를 사용할때 move가..

● 전개 연산자란??전개 연산자는 ECMAScript6(2015)에서 새롭게 추가되었으며, 특정 객체 또는 배열의 값ㅇ르 다른 객체, 배열로 복제하거나 옮길 때 사용한다.연산자의 모양은 ... 이렇게 생겼다.  배열 조합 (새로운 배열 생성) concat() 메서드보다 간결하고 가독성이 좋아지고 concat()의 경우는 기존 배열의 끝에서부터 추가만 되지만, 전개연산자는 기존 배열의 아무곳에나 추가할 수 있다.     배열 조합 (기존 배열 변경)새로운 조합배열을 생성하는게 아닌 기존 배열에 요소를 추가한다면 push()메소드를 이용했었다.  전개연산자를 이용한 할당은 1차원에서만 유효하므로 다차원 배열을 복사하는것에는 적합하지 않을 수 있다.     배열 역순 arr1.reverse()를 사용한 첫번째..

이전에는 slice()를 사용해서 매 동작 이후에 squares 배열의 새로운 복사본을 만들어 이를 불변 객체로 취급해 과거의 squares 배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있었다면이번에는 squares 배열들을 hitory 배열에 저장할 것이다. history 배열은 첫 동작부터 마지막 동작가지 모든 게임판의 상태를 표현하는 것이다. 그래서 이전 상태로 돌아가려한다면 돌아갈 수 있도록 할 수 있다.   이 history state는 이전 동작에 대한 리스트를 보여주려면 최상위 단계의 app 컴포넌트가 필요하다.history를 이용해야하므로 최상위 단계 App 컴포넌트에 histroy state를 둔다.(board 부분을 누르면 history 변경이 필요하므로 최상위에 둠 - ..