🔥아이티 부수기🔥

💡 Template Literals

- 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

- 여기서 리터럴(Literal)은 변하지 않는 데이터를 의미한다.

- 고로 템플릿 리터럴은 표현식을 가지고 있는 문자열 리터럴이라는 것이다.

- 템플릿 리터럴은 백틱(`` , 숫자 1 옆에 있다)(grave accent)과 ${expression}으로 구성된다. 

[특징]

- 항상 문자열을 사용하여 줄바꿈 할 때 \n을 사용했지만 템플릿 리터럴은 그냥 엔터를 사용하여 띄어주면 된다.

- 백틱(``)을 사용하기 때문에 작음따옴표(''), 큰따옴표("")를 이스케이스문 없이 사용할수 있다. 

💡 예시

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

참고)

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

💡 변수의 생성 단계

1. 선언단계(Declaration phase)

     변수 객체에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

2. 초기화 단계 (Initialization phase)

    변수 객체에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.

3. 할당 단계( Assignment phase)

    undefined로 초기화된 변수에 실제 값을 할당한다.

💡 var의 문제점

1. 함수 레벨 스코프(Function-level scope)

   - 전역 변수 남발

   - for문 초기화식에서 사용한 변수를 외부에서 참조할 수 있다.

2. var 키워드 생략 허용

    - 의도하지 않은 변수의 전역화

3. 중복 선언 허용

   - 의도하지 않은 변수값 변경

4. 변수 호이스팅

   - 변수를 선언하기 전에 참조가 가능하다

💡 호이스팅(Hoisting)이란?

- 호이스팅은 var , let , const, function 등 모든 선언을 유효범위(scope)에 따라 가장 위로 끌어올리는 것이다.

- 호이스팅으로 초기화 된 값은 제외하고 선언만 끌어 올린다.

- 선언과 할당의 분리라고 생각하면 쉽다.

- 유효범위에는 '함수레벨 스코프'와 '블럭레벨 스코프'로 구성되어 있다.

- var는 함수레벨 스코프이고 let,const는 블럭 레벨 스코프이다. 

- var는 초기 값이 없다면 선언와 동시에 undefined로 초기화 되기 때문에 선언 전에도 사용이 가능하다.

💡 var , let , const 비교

💙 const 와 let  값 변경 여부에서 헷갈릴수 있는 부분이 있어서 첨언해보자면 (나도 헷갈렸다.)

      여기서 변경은 값의 변경이 아니라 '메모리 주소'의 변경이다.

       let 은 메모리 주소 변경이 가능 하고 const 는 메모리 주소 변경이 불가능하다.

let Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

//	Arr 배열안에서 값이 추가되지만 메모리 주소는 바뀌지 않는다.
//	그래서 const를 사용해도 된다.

const Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

💡 예시 

console.log(num);		// undefined
var num;

참고

poiemaweb.com/es6-block-scope

@keyframes

- @keyframes는 css 애니메이션을 정의하는 문법으로 각 구간에 어떤 스타일로 적용한지 지정한다.

- 구성요소

   1. animation name : @keyframes 정의한 애니메이션을 적용할 때 필요한 이름 (내가 정한다)

   2. 구간 : from to / 0 - 100%

   3. css 스타일 : 구간에 적용시킬 스타일

animation

- @keyframes 에서 정의한 animation을 css animation 속성을 통해 사용 할수 있다.

- animation  속성

  : animation-duration, animation-timing-function, animation-delay 등등이 있다. 

    (더 많은 속성을 보고 싶다면 참고에 MDN 사이트를 확인)

💡 예시

@keyframes 애니메이션 이름
{
	from {
		// 적용시킬 CSS
	 }
	 to {
		// 적용시킬 CSS
	 }
}

// 예시 ------------------------------------------------------------------------------
@keyframes fadeIn
{
	from {
	   opacity: 0;
	 }
	 to {
	   opacity: 1;
	 }
}
.bgImage
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: -1;
	animation: fadeIn .5s linear;
}

참고
webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068developer.mozilla.org/ko/docs/Web/CSS/animation

가상요소 

- css 의사요소(가상요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다. 

가상선택자 :after(::after)

css에서 :after는 선택한 요소의 맨마지막 자식으로 가상요소를 하나 생성한다.

보통 content 속성과 함게 짝지어, 요소에 장식용 콘텐츠를 추가할 떄 사용한다.

기본값은 인라인이다.

추가된 요소는 소스 안에서 ::after 라는 형식으로 보여진다.

참고

developer.mozilla.org/ko/docs/Web/CSS/::after