차근차근 배움터

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 이 확장 플러그인은 파일 아이콘을 바꿔준다 아이콘 모양을 바꿔주는 거라 전적으로..

일반적으로 강의에서 미리 해보라고 이야기하기도 하겠지만 선생님이 그렇게 말하지 않는 경우에도 먼저 혼자서 해보고 나서 강의를 보며 선생님이 어떻게 하셨는지 보는 것을 추천한다. 심지어 같이 코드 작성을 했다고 하더라도 멈추고 다시 혼자서 한 번 작성해보기를 권장한다 이 방법은 과정에서 학습에 중요한 부분이다. 코딩과 연습이 전문가가 되기 위한 필수 요소이다 에러를 발견하면 스스로 해결하려고 해라 또 오픈 커뮤니티에서 질문을 하거나 다른 사람들의 질문에 답을 해주다보면 어느새 실력이 쑥쑥 성장한 개발자가 되어 있을 것이다.

첫번째는 순서대로 강의를 수강하면서 복습하고 공부해 나가는 일반적인 방법 요약 모듈을 제공할 것이기 때문에 언제든지 간단하게 개념들을 돌아와서 확인할 수 있다 두번째는 요약접근법 > 4시간 안에 끝낼 수 있다. 자신에게 맞는 방법을 들으면 되겠지만 나는 역시 일반적인 방법으로 차근차근 공부해나갈 예정이다