도록

1. 크롬 개발자 도구Network 패널 : 네트워크 트래픽을 통해, 리소스의 크기와 로드 시점 등을 확인Performance 패널  : 웹페이지 로드 시 실행되는 모든 작업을 차트로 제공Lighthouse 패널  : 성능 측정 및 개선 방향 제시Coverage 패널  : 렌더링 과정에서 어떤 코드가 실행되었는지 보여준다. (특정 파일에서 극히 일부만 코드가 실행되었다면, 불필요한 코드가 많이 포함되었다고 판단한다)2. webpack-bundle-analyzer : webpack을 통해 번들링된 파일이 어떤 lib를 담고 있는지 보여주며, 불필요한 코드 위치와 전체에서 어느 정도의 비중을 차지하는지 알려준다. 3. React Developer Tool 의 Profiler 패널: 렌더링 발생 횟수, 렌더링..

JSX: Javascript를 확장시켜 만든 새로운 문법으로, 트랜스파일러(ex. babel)를 필수로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS 코드로 변환된다. xml 스타일의 트리 구문으로  JSX 구성 예시function HelloWorld () {  return (hello world);} babel로 컴파일 할 경우 JSX는 React.createElement로 요소를 만든다. // 리팩토링 전function HelloWorld ({ isHead, children }) {  return isHead       ? ({children})       :  ({children})}// 리팩토링 후function HelloWorld ({ isHead, children }) {  return R..

필수 자바스크립트구조분해할당배열 구조 분해 할당const array = [1, 2, 3, 4]; const [a, , , b] = array;                     // a=1, b=4const [c, ...rest] = array;                  // c=1, rest=[2, 3, 4] const [d, e=10, , , f =20] = array;    // d=1, e=2, f=20 객체 구조 분해 할당const obj = { a: 1, b: 2, c: 3 };const {a, rest} = obj;                       // a=1, rest={b:2, c:3}const {a: first, b : num} = obj;         // first=..

리액트의 장점1. 단방향 바인딩 (명시적 상태 변경)2. JSX3. 배우기 쉽고 간결함4. 강력한 커뮤니티 +) 넷플릭스가 리액트 vs 백본으로 프로토 타입을 만들어보며 느낀 리액트의 장점1. 자바스크립트 코드의 크기가 줄었다.2. 상대적으로 배우기 쉬움3. 빠른 기능 추가

소스 코드 : 실행가능한 코드 ; executable code)종류전역 코드함수 코드eval 코드모듈 코드 자바스크립트 엔진은 소스코드를 평가와 실행으로 나누어 처리한다. 소스코드의 평가1) 선언문 실행2) 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록소스코드의 실행 = 런타임 시작1) 실행 컨텍스트가 관리하는 스코프에서, 실행에 필요한 정보를 검색해서 취득한다.2) 실행 컨텍스트가 관리하는 스코프에, 실행 결과를 등록한다.  실행 컨텍스트: 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 스택(stack) 구조로 관리한다. 역할1. 전역 코드 평가: 전역 코드의 선언문 실행 후, 결과를 컨텍스트의 전역 스코프에 등록한다. 2. 전역 코드 실행: 전역..

: 자기 참조 변수 (자신이 속한 객체를 가리키는 식별자) 함수 호출 방식에 의해 동적으로 결정된다. OO에서 this는ㅁㅁ 이다.전역에서 전역 객체 window일반 함수 내부에서전역 객체 window메서드 내부에서매서드 호출한 객체생성자 함수 내부에서생성자 함수가 생성할 인스턴스apply/call/bind 메서드에 의한 간접 호출메서드에 첫번째 인수로 전달한 객체 console.log(this); //window   [전역]function foo() {   console.log(this); // window [일반 함수 내부]}foo();const person = {   name : '떼굴펜',   getName() {        console.log(this); // {name : '떼굴펜', ge..