2024.02.26 TIL #Map() #flex-grow, flex-shrink, flex-basis

Map

 

const m = new Map();

const person = new Map();

// .set(): key-value값 추가하기

person.set("name", "John");

person.set("age", 30);

console.log(person); // Map(2) { 'name' => 'John', 'age' => 30 }

// .get(key): value 값 꺼내기

console.log(person.get("name")); // John

console.log(person.get("age")); // 30

// has.(key): 특정 key를 가지고 있는지 확인하기 => Boolean 반환

console.log(person.has("name")); // true

console.log(person.has("age")); // true

console.log(person.has("height")); // false

// .delete(key): key 삭제하기

person.delete("name");

console.log(person); // Map(1) { 'age' => 30 }

// .size: key-value 쌍의 갯수 => 뒤에 소괄호 없음 주의!

console.log(person.size); // 1

 

 

const myMap = new Map([    [1, 'one'], [2, 'two'], [3, 'three']    ]); // Map의 초기값 정하기 배열 안에 [key-value] 배열

console.log(myMap.get(1)); // ' one'

console.log(myMap.get(2)); // 'two'

console.log(myMap.get(3)); // 'three'

 

 

 

=> Map은 객체는 일종의 배열이라서 for...of, map, filter, reduce 등 반복문이 가능하다.

---

flex: 1 0 200px;

- 여기서 200은 Flex 아이템의 기본 크기를 의미

- flex-grow, flex-shrink, flex-basis의 세 가지 값으로 구성된 단축 속성
- flex-grow: 아이템이 가용 공간을 얼마나 차지할지를 결정. 여기서 1은 아이템이 가용 공간을 모두 차지하도록 설정한다는 의미
- flex-shrink: 아이템이 가용 공간을 얼마나 줄일지. 여기서 0은 아이템이 줄어들지 않도록 설정한다는 의미.
- flex-basis: 아이템이 여유 공간 없이 차지할 초기 크기를 지정. 여기서 200px은 초기 크기를 200px로 설정한다는 의미.

따라서 flex: 1 0 200px; 
=> 아이템이 가용 공간을 모두 차지하고, 줄어들지 않으면서 초기 크기는 200px로 설정한다는 것.

      만약 가용 공간이 200px 미만이 되면 아이템은 200px보다 작아질 수 있음.