오늘의 결론
- DOM, 그리드 시스템(flex), CSS연산(calc) 관련하여 배웠다.
- let, const, var에 대해 배웠다.
- 함수 표현법에 대해 배웠다.
- class에 대해 배웠다.
- 등호에 대해 배웠다.
- Spread에 대해 배웠다.
- 조건부 삼항 연산자에 대해 배웠다.
오늘 배운 것
- DOM (문서 객체모델) : html 단위 하나하나를 객체로 생각하는 모델입니다. (트리구조)
- 태그는
<></>이고,h1,p,title,등은 elements이다.
https://developer.mozilla.org/ko/docs/Web/API/Document (DOM 참고)
- 그리드 시스템 (display: flex)를 사용하여 요소들을 자유롭게 배치할 수 있다.
요소의 할당되는 영역은 자기 자신 크기만큼 가진다.
display:flex 첫 번째
flex-default: row,colum 로 기본 방향을 지정해줄 수 있다.
flex-direction : row나 colum으로 해줘서 방향을 정한다.
flex-align-items: 기본방향이 colum수직이면 양 왼쪽 오른쪽을 원하는 방향으로 맞출 수있다. row면 위아래로 맞추는것
justify-content : 기본 방향쪽을 정렬 하는 것, 기본방향이 colum이면 위아래로 움직이는 것이고, row면 양옆으로 움직는 것
- CSS속성 및 사용법에 대해 배웠다.
https://developer.mozilla.org/ko/docs/Web/CSS - CSS도 연산이 가능하다 (calc)
CSS연산을 활용해서 각 요소들이 고정된 크기가 아닌 사용자 환경에 맞춰 크기가 조절 되게 할 수 있다.
- let, const vs var
1. let 은 변수 const는 상수이다. 상수는 값을 변경 할 수 없다.
2. let, const 는 블록레벨 스코프 ( { } ) , var는 함수레벨 스코프 (function)이다.
아래 예시를 보면 scope함수 안에 const,let,var 모두 0으로 선언하였다.
그리고 if문에 a가 0이라면 const,let,var를 1로 주고 console을 찍고 다시 console을 찍었다.
결과는 if문 안쪽(블록레벨 안쪽부분)에서는 모두 console이 1,1,1이 찍혔다. 하지만 if문 밖 (블록레벨 밖)으로 나가면 const,let은 0,0이찍히고 var는 1이찍힌다.
결론 -> 함수안에서 let const는 { } 안쪽에서 한번 쓰이고 다시 사라지고 var는 그대로 쭉 적용된다.
- 함수 선언식, 함수표현식, 화살표 함수
- class
-
constructor를 이용하여 생성될 인스턴스(객체)를 초기화해주는 역할을 한다.
-
선언된 class를 사용할 때 new를 사용한다.
let a = new Cat('bibi') -
class에 함수도 같이 선언할 수 있으며, 사용할 수 있다.
a.showName(); -
class상속은 extends로 해준다. 그리고 super로 상속 받은 class의 생성자도 사용할 수 있다.
-
부모 class가 가진 것과 같은 이름의 함수도 만들 수 있다. 오버라이딩
- 등호의 사용
(=== 자바스크립트의 묵시적 형변환 때문에 쓰이게됨 )
- =는 할당을 뜻한다.
let a = 1 - ==는 등차를 뜻한다.
자료형은 비교하지 않고 값을 기반으로 비교한다.
==는 등차입니다.
유형을 비교하지 않는 등차예요. 변수 값을 기반으로 비교합니다.
(ex. 0 == "0"은 true를 반환합니다.) - ===도 등차를 뜻하지만 ==와 다르게 유형도비교한다.
(ex. 0 === "0"은 false를 반환합니다)
- Spread
- ... <- 점 3개를 스프레드 문법이라고 부른다. 배열 안에 있는 항목들을 전부 꺼내준다는 의미
- 조건부 삼항 연산자
(return에 많이사용, if문을 return에 못쓰니까)
조건 참 거짓 순이다.
내일 배울 것
react 주특기 강의보기
열린 마음의 개발자가 되려합니다