쥰'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 컴포넌트 트리를 검사할 수 있다..

● 간단한 명령어로 코드 작성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부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들..

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

● React Hooks란 무엇인가? React Hooks는 ReactConf 2018에서 발표된, class없이 state를 사용할 수 있는 새로운 기능.   ● React Hooks가 필요한 이유?항상 기술은 그 전에 것의 불편함이나 문제점을 해결하기 위해서 더욱 발전한다.그와 같이 React Hooks도 주로 Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었다.   원래 React는 주로 Class Component를 사용하고React Hooks는 Functional Component를 사용하기 때문에 서로 비교해 봄     - 리액트의 생명주기- Mounting : 컴포넌트 시작할 때- Updating : 업데이트할 때- Unmount..

vscode에 리액트 앱을 create 했으면 여러 파일들이 생기는데 여기서 이름 변경하면 안되는 파일은 public > index.html 과 src > index.js 파일이다. index.html 은 페이지의 템플릿을 나타내며 index.js 는 자바스크립트의 시작점으로 이름을 절대 변경하면 안된다.      ● 리액트 시작하기 터미널 창에 npm run start 를 입력한다.끄려면 터미널 창에 ctrl + c 를 누르면 다시 터미널 창에서 명령어를 입력할 수 있다.( 코드를 작성하면서 중간중간 확인하고 싶을 땐 제일 처음 프로그램에 들어가서 프로그램의 콘솔창에 npm run start를 입력해준 뒤 ctrl + s를 눌러 중간저장하여 새로고침 해주면 바로바로 확인 할 수 있다.)  엔터를 하면 ..

● yarnnpm의 단점을 보완하여 성능/속도를 개선한 것이 yarn이라고 보면 된다.   └ npm 은 모든 패키지들을 다 갖고 있어서 무겁다.   └ 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 개선  https://classic.yarnpkg.com/en/docs/install#windows-stable  YarnFast, reliable, and secure dependency management.classic.yarnpkg.com위의 경로로 들어가 다운로드   다운 받은 msi 파일을 실행시켜 모두 next 눌러준다. 다운이 완료됐으면 cmd창을 열어 yarn -v 로 다운받은 버전을 확인해준다.     ● CRA (Create-React-App) 설치 - 리..

node.js는 다운로드하는 방법이 여러가지 있는데 그 중 하나는 구글에 node.js를 입력해 LTS를 다운 받는 것이고 다른 하나는 GIT 주소로 들어가 NVM : Node Version Manager 를 다운 받는 것이다.  ●NVM 다운로드 및 설치  - node를 설치했다면, 자동으로 설치되었을 것 - 노드 패키지 매니저로, 자바스크립트 라이브러리를 관리 할 수 있다.   ( https://www.npmjs.com 에서 필요한 라이브러리를 다운로드 및 설치, 삭제 등의 관리 가능)  - node_modules 폴더에 라이브러리를 저장하고, package.json에 관련 라이브러리 정보를 저장한다. - spring, spring boot 등 에서도 라이브러리를 모두 다 커밋, 푸시 하지 않고, b..