Object literal은 기본적으로 key value 쌍을 얘기한다. .(dot) syntax를 이용해 개별 값에 접근할 수 있다. es6에 추가된 destructuring(구조분해)를 통해 object에서 값을 가져와 할당할 수 있다. 이를 구조분해할당이라 한다. 다음과 같이 value(property)를 추가할 수도 있다.

Arrays - variable that hold multiple values 여러개의 값을 가질 수 있는 변수 new 키워드 다음에 Array() 라는 constructor를 이용해 배열을 생성할 수 있다 const numbers = new Array(1,2,3,4,5); 다음과 같이 생성할 수도 있다 const fruits = ['apple', 'banana', 'strawberry']; 자바스크립트에서는 하나의 배열에 여러가지 데이터타입을 담을 수도 있다 const fruits = ['apple', 'banana', 10, false]; 이런 동적인 부분을 정적으로 ( ex) const number:string ) 표현하려면 typescript라는 것을 이용할 수 있다고 한다. 배열은 zero-ba..

js에서 기본적으로 '+' 연산자를 이용해 문자열과 변수를 연결 할 수 있다. console.log('My name is ' + name + ' and I am ' + age); es6 또는 es2015에서는 Template literal을 통해 다음과 같이 연결할 수 있다. const hello = `My name is ${name} and I am ${age}`; length property를 이용해 글자 수를 이용할 수 있다. const s = 'Hello World'; console.log(s.length); toUpperCase method를 이용해 대문자로 변경도 가능하다. const s = 'Hello World'; console.log(s.toUpperCase()); 이 외에도 split,..

primitive type 데이터가 메모리에 직접 할당 되는 데이터형이다. stack에 저장된다. the data type which means that the data is directly assigned to memory ex) String, Numbers, Boolean, null, undefined ! null의 타입이 object로 나오는 것은 typeof 메서드의 버그로 호환문제 때문에 수정을 하지 않을 것이라 하며 실제는 아무것도 없다. Reference type 변수가 직접 데이터를 저장하는 것이 아니라 참조를 저장한다. 데이터는 heap이라 동적으로 할당되는 메모리에 저장되고, 그것을 변수가 참조한다.

var, let, const 세가지 방식이 있다. var: javascript가 처음 나왔을 때 이용되던 방식이지만 전역변수라는 점 때문에 새로 나온 let과 const에 밀려 사용되지 않고 있는 추세인 듯 let: es6, es2015에서 사용가능하며, 지역변수이고 다시 할당해야하는 변수일 경우 사용된다. const: let과 비슷하나 다시 할당할 수 없다는 점이 다르다. 다시 할당할 수 없기 때문에 변수 선언할 때 값을 꼭 입력해야 한다. 만약 해당 변수가 재할당이 된다는 것을 알고 있는 상태일 때는 let을 쓰고 나머지 상황에서는 const를 쓰는게 좀 더 안전하고 건전한 방법이라고 배웠다.

console.log() 콘솔에 로그를 찍는 메서드 console.error() 콘솔에 에러로그를 찍는 메서드 console.warn() 콘솔에 경고로그를 찍는 메서드 등등 console MDN으로 구글링 하면 더 자세한 내용들을 볼 수 있다.

Flexbox 와는 다르게 레이아웃을 두 방향으로 배치가 가능하다. Flexbox를 완전 대체할 수는 없다. 구조 flex와 같이 container와 item으로 이루어져있다. 용어 grid track grid의 행 또는 열 grid cell grid item을 담고 있는 한 칸 grid line grid cell을 구분하는 선 grid number grid line의 각 번호 grid gap grid cell 사이의 간격 grid area grid line으로 둘러싸인 사각형 영역, 그리드 셀의 집합임 속성 초록색은 컨테이너 노랑색은 아이템 grid-template-rows grid-template-columns 컨테이너의 grid track의 크기를 지정하는 속성 여러가지 단위 사용 가능. 섞어 쓸 ..

flexbox 레이아웃 배치 시 좀 더 유연하도록 고안된 기능. 기존 inline-block, float으로 레이아웃을 배치하는 것보다 유연하다고 하는데 얼마나 그런지 살펴보자 1차 학습 후 정리 메인 축 또는 교차 축 기준으로 어떻게 정렬하는지 등의 설정에 따라 아이템들이 배치가 되어 유연하다고 생각. 2차 학습 후 정리 아이템에 적용할 수 있는 속성을 배운 후 왜 유연하단건지 깨달음. 설정한 값에 따라 아이템들이 유연하게 늘었다 줄었다 하기 때문.. 총 정리하자면 메인축 또는 교차축을 기준으로 어떻게 정렬이 되는지 등의 설정에 따라 아이템들이 유연하게 배치되는 기능이다. 구조 flex container와 flex item으로 나뉘어져 있음 컨테이너가 아이템을 포함하는 구조. 플렉스 아이템들이 설정된 ..

특정 미디어 또는 화면의 크기가 특정 픽셀일 경우 따로 설정한 css를 사용하도록 하는 소프트웨어 모듈이다.

해당 속성이 설정된 요소를 설정된 방향으로 두고 감싸는 모양이 되도록 한다. float이 설정되어있으면 해당 요소의 자식 요소들을 품고 있지 않은 것처럼 인식된다. 따라서 가상요소나 clear: both 를 가진 요소를 적재적소에 추가하여 정상적으로 인식되도록 해야한다.