Home

0

ES6 Class

Class에 대하여원래 자바스크립트는 프로토타입 기반 객체지향 언어이다. 프로토타입이란? 그래서 프로토타입 체인, 클로저를 이용하여 class없이 상속과 캡슐화 등을 구현할 수 있다. 프로토타입 예제 var Person = (function () { function Person(name) { this._name = name; } Pers

0

객체 리터럴 확장, 상속 그리고 디스트럭처링

객체 리터럴의 확장 프로퍼티 축약 표현 es5의 객체 리터럴을 살펴보자. 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성되어 있다. var x = 1, y = 2 var obj = { x: x, y: y } 이런 식으로 말이다. es6의 경우 프로퍼티 이름을 생략할 수 있다. 이 때의 프로퍼티 이름은 변수명으로 자동 생성된다. let

0

ES6 파라미터를 알아보자.araboza

ES6 파라미터 파라미터 기본값 es5에서는 파라미터 기본값을 설정할 수 없었지만, es6에선 기본값을 설정할 수 있어 함수 내 파라미터 검사를 수행하지 않아도 된다. Rest 파라미터 Rest 파라미는 Spread 연산자를 사용하여 파라미터를 정의한 것이다. 그래서 인수 리스트를 함수 내부에서 배열로 전달받을 수 있다. function foo(...

0

화살표 함수

화살표 함수화살표 함수란 es5의 function키워드 대신 =>를 사용하여 쉽게 함수를 선언하는 것을 말한다. 기본 문법 () => {}는 매개변수가 없을 경우에 사용하는 방법, x => {}는 매개변수가 한 개일 경우, 소괄호를 생략 가능하다. (x,y) => {} 매개변수가 여러개일 경우 소괄호에 묶어 사용한다. 호출 화살

0

템플릿 리터럴

템플릿 리터럴일반 문자열과 비슷해 보이는 템플릿 리터럴이지만 ES6에서는 백틱 문자를 도입했다. const template = `템플릿 리터럴은 백틱안에서 '작은 따옴표', "큰 따옴표"를 사용할 수 있어요.!` console.log(template); 백틱문자는 키보드의 물결표시와 함께 있다. 또한 일반 문자열에서 줄바

0

HTMLCanvas

HTML Canvas 만들기이 동영상과 코드는 Javascript 30 동영상 강의를 참조하였습니다. Javascript30 동영상 보기 깃허브 보기

0

플랙서블 박스 레이아웃에 대해 알아보자.

Flex box layoutflexible box layout은 그리드 레이아웃을 기본으로 하여 플랙스 박스를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있고 화면 크기에 따라 에이아수의 배치나 크기를 조절할 때 편하게 이용 가능하다는 장점이 있다. flexbox를 사용하기 위해서는 부모 요소의 displa

0

미디어 쿼리

미디어 쿼리미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 그에 맞는 css 스타일링을 하게 해준다. 즉, 다른 기기로 접속할 때마다 레이아웃이 바뀐다. 구문 구문은 @media [only | not] 미디어 유형 [and 조건] * [and 조건] 이런 식으로 작성한다. 대소문자 구별이 없고 style 태그 내에서 사용한다. 여기

0

가변 레이아웃과 가변 요소

가변 레이아웃과 가변 요소가변 글꼴보통 우리는 텍스트 크기를 px단위로 지정한다. 하지만 px단위로 지정하게 되면 화면에 크기가 고정되기 떄문에 작은 기기에서 매우 작게 표시되는 상황이 발생한다.가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 변해야 하는데 그 때 사용하는 것이 ‘가변 글꼴’이다. em 단위 em단위는 부모 요소에서 지정한 폰