The Debugging Chronicles : "코드의 미학"

디스트럭처링 할당(Destrcturing assignment):구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화( 또는 구조 파괴)하여1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용36.1 배열 디스트럭처링 할당ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = arr[2];console.log(one, two, three); //1, 2, 3 ES6=> 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당이때,배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다.할당 기준은 배열..

스프레드 문법 (spread syntax): 전개 문법 : ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. ES6에서 도입되었다. 스프레드 문법을 사용할 수 있는 대상: for...of 문으로 순회할 수 있는 이터러블에 한정된다.=> Array, String, Map,Set, DOM 컬렉션(NodeList, HTMLCollection),arguments 스프레드 문법의 결과여러 값들의 값이 중요한 것이 아니라 값들의 목록이 중요하다.스프레드 문법의 결과는 값이 아니다.스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아니라는 뜻이다.스프레드 문법의 결과는 변수에 할당 할 수 없다.const list = ...[1, ..

이터러블 하다는 것은  "하나씩 차례대로 꺼낼 수 있다" 라는 뜻이다. 자바스크립트에서는  배열, 문자열, Map, Set 등 과 같은 것들이 이터러블하다.즉 하나씩 순서대로 꺼내 볼 수 있다는 뜻이다. 특징1. 순서대로 꺼낼 수 있다.배열처럼 하나씩 차례대로 꺼낼 수 있다는 것을 말한다.특징2. 특별한 도구가 있다.자바스크립트에서 이터러블한 애들은 Symbol.iterator라는 숨겨진 도구를 가지고 있어서 꺼낼 수 있다. 예시 (for...of)const fruits = ['apple','banana','cherry'];//for...of를 쓰면 이터러블한 것을 하나씩 꺼낼 수 있다.for(const fruit of fruits){ console.log(fruit); //apple, banana, c..

자바스크립트에서 태그 하나를 DOM이라고 한다.그리고 DOM은 각 각 가지고 가지고  있는 속성을 Property라고 한다. 그런  propety 들이 모여있는 것을 가지고 온것을 Props라고 한다. 그래서 props는 태그가 가지고 있는 속성을 이야기한다. 그럼 props를 어떻게 보내고 가지고 올까? 그림으로 먼저 살펴 보자 A라는 사람의 정보를 컨테이너에서 컴포넌트로 보낸다고 생각해보자  그리고 B라는 사람이 있다고 생각해보자. 그럼 컴포넌트를 만들어서또 정보를 바꿔서 보내줘야한다.또 C라는 사람이 있다면? 그래서 차라리 정보를 변수로 전달하는 것이다. 만약에 홍길동이 값이 들어 왔을 때변수가 인식해서 사용자에게 값만 바꿔서 전달하는 것이다. 컴포넌트는 재사용하고 값이 들어온 것을 그대로 보여주자..

리액트 컴포넌트를 생성할 때 마다직접 작성하기 힘들다 이런 상용구를 단축키로 간편하게 만들 수 있는 extension이다.  확장 프로그램 이름은 Reactjs code snippets 제작자가 charalampos karypidis인 것을 설치하면 된다. 단축키를 살펴 보자면 tirggercontentrsc화살표 함수형 컴포넌트 생성rsf함수형 컴포넌트 생성rcc클래스 컴포넌트 생성rrc클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성rcjcimport와 export 없이 클래스 컴포넌트 생성rwwwdimport 없이 클래스 컴포넌트 생성  rsc를 주로 많이 사용한다.! rsc 치고 tab을 누르면 짠하고 나타난다. 단축키의 더 자세한 내용은  Details에서 확인할 수 있다.

dependencies는 의존성 파일을 이야기 한다.설치되어 있는 라이브러리들의 키 값을 이야기 한다.node modules 폴더 안에는 라이브러리들이 설치 되어있는데해당 폴더는 용량이 크기 때문에 공유하지 않는다. 따라서 npm i  or npm install 이라는 명령어를 치게 되면package.json 의 dependencies에 명시되어 있는 라이브러리들을 알아서 설치가 된다.(node_modules폴더가 생성) 그리고 npm 명령어는 script 안에 있다.그래서 npm start는바로 이것을 이야기한다. 단 npm start를 제외하고는 build,test,eject는 run을 적어줘야한다. build는 실제로 배포하기 전에 번들링을 한 상태로 폴더가 만들어진다.그러면 그 빌드 폴더만 배포하..