Tech notes

Browser Compatibility and Transpilation caniuse.com : HTML,CSS,Javascript의 웹브라우저 호환성에 관한 자료를 제공하는 사이트 Babel : ES6의 새로운 문법을 구버전(ES5)으로 바꾸어 주는 자바스크립트 라이브러리 Can I Use? 사이트에 들어가서 ES5를 검색해보면 98.68%의 웹브라우저가 지원을 한다고 나온다 ES6은 97.11% IE빼고는 딱히 문제가 없어보인다 module도 찾아봤는데 강의가 촬영된 시점인 3년 전에 비해 지원 브라우저가 90%로 대폭 늘어났더라 📣 자바스크립트 ES5와 ES6의 차이점 Readability and economy of code : ES6의 새 문법은 더 이해하기 쉽고 적은 문자들로 같은 기능을 만들 ..

IT/Javascript 2020. 9. 28. 07:11

Class 의 개념 자바스크립트는 객체 지향 언어 (OOP: Object - Oriented Programming language)이다. 객체를 통해 현실의 모델을 구현할 수 있다. 클래스는 비슷한 객체들을 빠르게 만들어내도록 도와준다. 클래스는 객체의 템플릿이다 클래스를 만들때는 class 라는 키워드를 사용하고 클래스 안에는 생성자(constructor)가 있다. 자바스크립트는 클래스의 새로운 인스턴스를 만들 때 생성자 메소드를 호출한다. class Surgeon { constructor(name, department){ this.name = name; this.department = department; } } 클래스는 객체와 달리 {} 괄호 앞에 = 도 없고 비슷하지만 다르다. Instance 인..

IT/Javascript 2020. 9. 27. 10:56

Object literal 객체 리터럴 객체는 key와 value로 구성된다 key는 변수가 저장되는 장소의 이름이고 값value를 가짐 key-value들은 콤마(,)로 구분한다 let fasterShip = { color: 'silver', 'Fuel Type': 'Turbo Fuel' }; Accessing Properties 객체의 속성에 접근하는 법 👉 1. dot notation 점을 찍어 표현 객체의 속성에 접근해 다른 변수에 그 값을 할당하는 예시 let spaceship = { homePlanet: 'Earth', color: 'silver', 'Fuel Type': 'Turbo Fuel', numCrew: 5, flightPath: ['Venus', 'Mars', 'Saturn'] };..

IT/Javascript 2020. 9. 26. 11:42

.forEach( ) 배열.forEach(콜백함수); 같은 코드를 배열의 각 요소에 적용시켜먼서 실행함 인자로 콜백함수를 전달받음 콜백 함수의 형태는 함수 선언 혹은 화살표 함수 미리 콜백 함수를 선언했다면 함수의 이름만 전달해도 됨 forEach()의 리턴값은 늘 undefined임 const fruits = ['mango', 'papaya', 'pineapple', 'apple']; fruits.forEach(fruits => console.log(`I want to eat a ${fruits}`)); 콜백함수로 화살표 함수를 사용한 모습 .map( ) 배열.map(콜백함수); 각 배열의 요소를 적용하며 같은 코드를 반복함 콜백함수를 인자로 받고 새로운 배열을 리턴함 (원래 배열은 변화X) const..

IT/Javascript 2020. 9. 25. 12:47