[JavaScript30] 1,2,3,4,5 강 정리

3강. Playing with CSS Variables and JS

SASS란?

Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.

이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

[출처] SASS의 소개,설치와 간단한 명령어 사용법

사용자 정의 CSS 속성(CSS 변수)을 :root 가상클래스를 이용하여 선언해봄.!

반복되는 속성값들을 변수로 설정하여 쉽게 식별할 수 있게 해줌 (ex] #00ff00 => --main-text-color 로 표현)

CSS 변수는 종속되며 부모로부터 값을 상속받는다. 

가상클래스란? 요소의 속성, 상태, 상대적인 위치 등에 기반하여 요소를 선택하게 해줌.

구조적 가상클래스란? 문서 구조에서 위치나 다른 요소와의 관계에 따라 요소를 선택하는 선택자.

ex) :root, :only-child, :nth-child(n), :fisrt-child, :last-child 등등..

선언방법 

element {
  --main-bg-color: brown;
}

사용방법

element {
  background-color: var(--main-bg-color);
}

 css에서도 변수를 사용할 수 있다는 사실을 알았음.

4강. Array Cardio Day 1

1.  Array.prototype.filter()

  함수의 결과 값을 true 로 만드는 원소로만 구성된 새 배열을 반환

const array = [1,2,3,4,5];
 
const biggerThenThree = array.filter((ele)=> ele > 3);
 
console.log(biggerThenThree); //[4,5] 원본은 바뀌지 않음

2. Array.prototype.map()

  배열을 반복하고 콜백 함수에서 지정한 return 문을 기반으로 새 배열을 반환

const array = [1,2,3,4,5];
 
const doubleArray = array.map((ele) => ele * 2);
 
console.log(doubleArray); //[2,4,6,8,10]
//원본은 바뀌지 않음!

3. Array.prototype.sort()

 배열 요소 정렬. sort메소드는 모든 원소를 문자열로 취급해 정렬하기 때문에 비교 함수를 직접 만들어서 정렬해야 원하는 데로 나옴.

const numbers = [13,12,11,10,9,8,7,6,5,4,3,2,1];
    
numbers.sort(); //[1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9] ?? wrong!
 
numbers.sort((a,b) => a-b ); //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] goooood!
 
//원본 바뀜!

4. Array.prototype.reduce()

  배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 반환.

const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b ) // 10
arr.reduce( (a,b) => a+b, 10) // 20
arr // [1,2,3,4] 원본이 바뀌지 않음

5강. Flex Panels Image Gallery

 transition Easing functions 

매개변수의 변화율을 시간이 지남에 따라 정함.

< easing functions 종류 >

CSS flex 란?

CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. [출처] 생활코딩 flex