생성자 함수는 붕어빵 틀과 같다. 필요한 재료들을 만들고 찍어주는 것. 일반 함수를 만드는 것과 동일하나, 생성자 함수는 함수명 첫글자에 대문자로 사용하는 게 관례 생성자 함수를 호출하여 새로운 객체 리터럴 생성 시 new 연산자를 사용해 호출 (동작원리는 아래 이미지 참고) new 연산자 를 붙이지 않으면 일반 함수를 호출하는 것과 동일하여, (생성자 함수에는 빈 객체 {} 와 return값을 안 적으므로) 아무것도 반환하지 않음. 이렇듯 생성자 함수가 새로운 객체를 만들어낼 때 그 객체 리터럴은 생성자의 instance라고 부른다. 인스턴스 instanceof 생성자함수 : 해당 객체가 그 생성자로부터 생성된 것인지를 판단하여 true / false 를 반환 인스턴스.constructor (=== ..

TDZ (Temporal Dead Zone): 일시적 사각지대란 뜻으로, 스코프의 시작 지점부터 초기화 시작 지점 사이의 구간을 TDZ 라고 한다. 이 개념을 알기 위해서는 호이스팅 개념을 알아야 한다. 호이스팅 이란, 스코프(유효범위) 내부 어디서든 변수 '선언'은 최상위에 선언된 것처럼 행동하는 것. var 는 함수 스코프 : 함수 내부에서 쓰인 var를 제외하고는 전체에서 호이스팅 됨 let, const 는 블럭 스코프 : 코드블럭{} 내에서만 유효하게 호이스팅 됨 -> 함수, if문, for문, while문, try/catch문 등… ㄴ let, const는 TDZ영역에 영향을 받으며, TDZ 영역에 있는 변수들은 사용할 수 없음. 자바스크립트에서 변수 선언은 3단계를 거친다. 선언 단계 (Dec..

스코프(scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본 개념이다. 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 스코프의 구분 자바스크립트에서 스코프를 구분해보면 다음과 같다. - 전역 스코프 (Global scope) : 코드 어디서든 참조 가능 - 지역 스코프 (Local scope / Function-level scope) : 함수 코드 블록이 만든 스코프로, 함수 자신과 하위 함수에서만 참조 가능함 ..

SEO 검색엔진최적화 HTML 삽입 미리보기할 수 없는 소스

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 1. 2D 트랜스폼 (2D Transform) 2D 트..

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 나빠지는 문제 등을 내포하고 있었다. 그레이디언트는 2가지 종류가 있다. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally) 방사형 그레이디언트 (Radial Gradient: defined by their center) 그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저에 벤더프리픽스를 사용하여야..