전체 글 (21) 썸네일형 리스트형 [모던 리액트 Deep Dive 스터디] 리액트 17과 18의 변경사항 살펴보기 17,18 버전의 변경사항을 알아야 하는 이유?현재 리액트 16버전을 사용하는 사이트가 가장 많다.그러나 리액트가 제공하는 최신 기능을 모두 활용하려면 새로운 버전들도 조금씩 따라잡을 필요가 있다.또한 리액트에 의존적인 라이브러리를 사용한다면 peerDependencies를 통해 리액트에 의존하고 있으므로 버전 업을 위해 이 라이브러리가 지원하는 리액트 버전에 대해 꼼꼼히 살펴봐야 한다.리액트 17버전 살펴보기리액트 17버전은 16버전과 다르게 새로 추가된 기능은 없으며 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화 했다는 점이 가장 큰 특징이다.1. 리액트의 점진적인 업그레이드리액트 16에서 17로 업데이트는 더 이상 호환되지 않는 API가 있거나 작동방식이 달라질 수 있기 때문에 단행.. [모던 리액트 Deep Dive 스터디] 모던 리액트 개발 도구로 개발 및 배포환경 구축하기 create-react-app / create-next-app애플리케이션 구축에 필요한 대부분의 작업을 대신 해줘서 편리하지만 프로젝트 구조를 이해하고 공부하는데 도움이 되지 않음.create-react-app은 미래에 보일러 플레이트 CLI가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정위와 같은 상황으로 인해, 리액트 프레임워크 구축하는 방법을 알아야 한다.create-next-app 없이 하나씩 구축하기1. package.json 만들고 필요한 라이브러리 설치하기npm init 을 사용하면 package.json을 만들 수 있다. 다음으로 Next.js 프로젝트를 실행하는 데 필요한 라이브러리 3가지를 설치한다.npm i react react-dom next 그 다음 devDepe.. [모던 리액트 Deep Dive 스터디] 좋은 리액트 코드 작성을 위한 환경 구축하기 코드 작성 만큼 중요한 것은 무엇일까 ?좋은 코드를 작성할 수 있는 환경을 구축하는 것좋은 코드를 작성하기 위한 사전 작업 ⇒ ESLint, 테스트 라이브러리8.1 ESLint를 활용한 정적 코드 분석정적 코드 분석?코드 자체만으로 잠재적 버그를 야기할 수 있는 문제를 찾아 사전에 수정하는 것을 의미가장 많이 사용되는 정적 코드 분석 도구 ⇒ ESLintESLint는 어떻게 코드를 분석할까?!https://tech.kakao.com/storage/2019-11-25__8.13.19-1024x300.png자바스크립트 코드를 문자열로 읽음자바스크립트 코드를 분석 할 수 있는 파서(parser)로 코드를 구조화ESLint에서 파서는 기본적으로 espree 사용2번에서 구조화한 트리를 AST(Abstract S.. [모던 리액트 Deep Dive 스터디] 크롬 개발자 도구를 활용한 애플리케이션 분석 7. 크롬 개발자 도구를 활용한 애플리케이션 분석7.1 크롬 개발자 도구란?크롬에서 제공하는 개발자용 도구메뉴 → 보기 → 개발자 도구 선택 or 마우스 우클릭 → 검사📍 제대로 디버깅을 원하면 시크릿 모드로 불리는 개인정보 보호 모드에서 여는것 권장→ 시크릿 모드 : 크롬에 설치되어 있는 각종 확장 프로그램을 실행 하지 않기 때문에 순수 웹페이지 관련 정보만 확인이 가능7.2 요소 탭웹페이지를 구성하는 HTML, CSS 등의 정보 확인 가능7.2.1 요소 화면원하는 태그 클릭 시 브라우저 페이지의 해당 요소가 강조되고 태그와 관련된 정보를 확인 가능단순히 현재 HTML을 보는 것만이 아닌 직접 코드를 수정하여 바뀐 사항을 빠르게 확인 가능개발 모드에서도 리액트 코드를 수정해 핫 리로딩을 거치지 않아도.. [모던 리액트 Deep Dive 스터디] 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트- 자바스크립트의 동등비교- 함수- 클래스- 클로저- 이벤트 루프와 비동기 통신의 이해- 리액트에서 자주 사용하는 자바스크립트 문법- 선택이 아닌 필수, 타입스크립트자바스크립트의 동등비교리액트 컴포넌트 렌더링이 일어나는 이유는 props의 동등비교에 따른 결과 props의 동등 비교는 얕은 비교 기반자바스크립트 동등비교 종류Equal Operator ==Strict Equal Operator ===Object.is (리액트에서 사용)// Object.is는 참조가 다른 객체에 대한 비교 불가능Object.is({hello: 'world'}, {hello: 'world'}) // false// 리액트의 shallowEqual은 객체의 1depth까지는 비.. 이전 1 2 3 다음
