차근차근 배움터

Primitive Type and Reference Type Primitive Type 원시형 타입 (numbers, booleans, string) 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다. 객체와 배열은 참조형 자료 타입이다. 그렇다면 다른 타입은 복사를 하지 않는 다는 것인가? 맞다, 아래와 같이 코드를 작성할 때 객체 person은 메모리에 저장되어 있고, 상수 person에는 메모리의 주소를 가리키는 포인터를 저장한다. 그래서 위의 코드처럼 secondPerson에 값을 복사(?)하고 person.name을 바꾸면 secondPerson에는 이미 값이 할당 되어서 기존의 값인 'Max'가 출력될 것이라고 예상할 수 있지만 아까 말한 것처럼 값을 그대로 복사하는 것이 아니라 값..

배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장 스프레드를 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 우리가 사용하는 어떤 것에 전달한다 하지만 구조분해 Destructuring의 경우는 프로퍼티를 하나만 가져와서 변수에 저장한다. 이런 점에서 Rest Spread와 차이를 보인다

Spread 또는 Rest라고 불리는 ... 연산자 Spread 배열의 원소나 객체의 프로퍼티를 나누는데 사용한다 ... 연산자는 배열이면 배열, 객체면 객체, 새로운 배열 및 객체에 그 내부에 있는 것들을 꺼내서 넣는다고 생각하면 된다 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 5, 6, 7]; console.log(newNumbers); const person = { name: 'Max', age: 24 }; const newPerson = { ...person, gender: 'Male' } console.log(newPerson); // print // {name: 'Max', age: 24, gender: 'Male'} Rest Re..

메서드는 값으로 함수를 저장하는 프로퍼티 즉 보다시피 ES7(차세대 js)에서는 생성자 함수 대신에 ES7처럼 myProperty = 'value' 와 같이 간단하게 나타낼 수 있다 this 키워드가 필요 없다. 일반 함수도 화살표 함수를 이용하면 좋다

클래스는 객체를 위한 핵심 청사진 같은 것이다 클래스 내부의 프로퍼티와 함수 클래스는 생성자 함수를 만드는 더 편한 방법이다. 그래서 클래스를 가지고 자바스크립트 객체를 생성할 수 있다. 또 클래스에서는 '상속'을 사용할 수 있다. class Person { } 클래스를 만들면 그 내부에서 프로퍼티를 사용할 수 있고 가장 간단한 형태의 프로퍼티는 생성자 함수를 추가하는 것이다. 클래스의 객체를 생성할 때마다 실행할 것입니다. 메서드는 메서드의 이름 다음에 중괄호를 넣어서 만들 수 있다 그리고 this 키워드로 property를 설정할 수 있는데 class Person { constructor() { this.name = 'Max'; } printMyName() { console.log(this.name)..

왼쪽의 경우처럼 파일 단위로 export를 하면 app.js에서 이름을 마음대로 지을 수 있지만 오른쪽처럼 export를 하게 되면 {} 괄호 안에 모듈의 이름을 명확하게 작성해야 한다. ' 차세대 JS의 모든 기능들이 모든 브라우저에 작동하지는 않는다. 심지어 가장 최신 브라우저에서도 이 프로젝트에서 사용하는 모든 기능을 지원하지 않는다. 그래서 다음 모듈에서는 차세대 자바스크립트의 기능을 현재 JS 기능으로 컴파일 하는 프로젝트 셋업 방법을 보여줄 것이다 어디에서나 실행되는 차세대 자바스크립트를 사용할 수 있을 것이다 Named export에서도 as 를 이용해서 이름을 지정할 수 있다. 무엇이든 export 하는 것에 접근 하기 위해서는 bundled.baseData / bundled.clean과 ..

화살표 함수 Arrow Functions 자바스크립트 함수를 생성하는 또 다른 구문 일반적인 함수에서 this 키워드가 원하는 객체를 참조하지 않았던 문제들을 화살표 함수가 유용하게 해결한다. 화살표 함수 안에 this를 사용하면 항상 정의한 객체를 나타내고 실행 중에 갑자기 바뀌지 않는다. jsbin https://jsbin.com/ JS Bin Sample of the bin: jsbin.com const printMyName = (name) => { console.log(name); } // 인수가 하나일 경우 줄임 방법 const printMyName = name => { console.log(name); } function printMyName(name) { console.log(name); }..

자바스크립트에서는 기본적으로 변수를 선언하는 var 가 있지만 ES6에서는 const와 let이라는 개념이 나왔고 이들을 사용하는 것을 더 권장한다 변수들의 번위를 변경하는 것들이다. let 은 수정 가능한 변수를 선언할 때 사용하고 const는 한 번 지정하면 절대 변하지 않는 상수를 담는다.

자바스크립트는 알지만 ES6이나 다른 자바스크립트 버전으로 작업해 본 적이 없다면 강의가 도움이 될 것이다 리액트에서는 가장 최신 버전의 자바스크립트의 차세대 기능을 사용해서 작성한다. 그래서 이러한 기능들을 이해하는 것이 중요하고 가끔 이상하게 보이는 자바스크립트 버전에 당황하지 말자 빠르게 변화하는 자바스크립트들의 핵심 기능들을 살펴보자

선생님은 vscode를 이용할 것이고 더 편하게 이용할 수 있는 두 가지 익스텐션(Extension)을 추천한다. 먼저 Preferences - Keyboard shortcut 에서 단축키를 설정이 되어 있지 않으면 설정해준다 사실 나도 이미 설치 완료한 1. Prettier 코드를 보기 좋게 정리해 준다 사실 코드 정리 기능은 안 써봤는데 (스페이스 누르면 정리되다 보니) Shift alt F 키로 정리할 수 있다는 것도 알게 되었다 아마 React 사용할 때 유용하게 쓸 것 같다. 스페이스 줄정렬이 HTML CSS에서는 먹혔는데 React에서는 안 먹혔던 것으로 기억하기 때문에.. 2. Material Icon Theme 이 확장 플러그인은 파일 아이콘을 바꿔준다 아이콘 모양을 바꿔주는 거라 전적으로..