TIL0430 Object, for-in, flex

object

객체 리터럴 이라고 부르는 {}를 사용하여 객체는 다른 데이터 타입처럼 변수에 저장할 수 있다
객체는 순서가 없다 순서가 있는 데이터는 배열이다
배열은 index로 접근해서 불러오거나 추가가 가능하다

let arr = ['apple', 'banana', 'blueberry'];
arr[0]  // 'apple'
arr[3] = 'monkey';
// arr = ['apple', 'banana', 'blueberry', 'monkey'];

객체는 키(key) - 값(value) 의 쌍으로 되어있고 배열처럼 index 로 접근하는 것이 아니라서 순서가 딱히 상관없다
키는 property name 이라고 하고 value 는 property value 라고 한다
객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다
특수문자가 들어가면 ''로 감싸주어야 한다
프로퍼티는 dot(.) 이나 [] 로 접근한다 .으로 접근할 때는 따옴표 없이 키를 바로 써야한다
[]로 접근하면 키를 따옴표로 감싸주어야 한다 숫자로 된 키는 []로 접근해야 한다
변수로 프로퍼티를 접근할 때는 []로 접근해야 한다

const text = {
	name: 'jake',
    age: 24,
    20: 'number',
    '!key': 13
};
console.log(text.name);  //'jake'
console.log(text['20']);  //'number'
console.log(text['!key']);  //13
let key = 'name';
console.log(text['name']);  //'jake'

객체에 이미 키가 존재하는데 다시 할당하면 값이 수정된다
객체에 없는 키에 값을 주면 해당 키로 새 프로퍼티가 추가된다
하지만 없는 키로 객체에 접근하면 값은 없다고 뜬다

const user = {
	 name: 'jake',
     age: 23,
     hobby: 'game',
     city: 'Seoul'
}
user.name = 'pin';  // jake 에서 pin 으로 변경
user.food = 'pizza';  // food: 'pizza' 프로퍼티 추가됨
console.log(user.beer);  // undefined

Object.keys() 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 만들어주는 메소드이다 객체의 내장 메소드가 아니라 Object가 직접 가지고 있는 메소드이다
Object 가 만든 배열로 반복문을 사용할 수 있다
Object.entries 는 객체의 키의 index가 0이고 값의 index가 1인 쌍으로 이루어진 배열을 리턴한다

const user = {
	 name: 'jake',
     age: 23,
     hobby: 'game',
     city: 'Seoul'
}
Object.keys(user)  // ['name', 'age', 'hobby', 'city']
const users = Object.keys(user);
for (let i = 0; i < users.length; i++ ) {
	const key = users[i];   // 각각의 키
    const value = user[key];   // 그 키에 해당하는 값
}
//Object.entries
const users2 = Object.entries(user);
// users2 === [
	['name', 'jake'],
    ['age', 23],
    ['hobby', 'game'],
    ['city', 'Seoul']
]

for-in 반복문과 같은 종류의 문법이지만 객체와 배열을 위해 존재한다
(let i = 0; i < arr.length; i++) 이 문법을 간단하게 축약한 형태이다
객체에서는 i 대신 각각의 키를 넣어 반복문을 돈다

for (let i in arr) {
	console.log(i)
    console.log(arr[i])
}
for (let key in user) {
	const value = user[key]
    console.log(key)   // 키 출력
    console.log(value)   // 값 출력
}

CSS

height를 100vh 로 주면 사용자 컴퓨터의 뷰 기준으로 높이가 자동으로 설정된다

flex
요소들을 정렬할 때는 flex를 쓰면 효과적으로 정렬할 수 있다
flex 는 크게 두가지로 나뉘는데 items 를 감싸고 있는 container와 그 안에 있는 items 이다
container 는 부모이고 items 는 자식이다 각 items 를 정렬하기 위해 container 에 flex를 적용하는 것이다

flex를 쓸 때 가장 헷갈리는것이 container와 items의 속성이 구별되어 있는 부분이다

container
display, flex-flow, justify-content, align-content, align-items
items
order, flex(flex-grow, flex-shrink, flex-basis), align-self

flex container
먼저 display 에 flex container 를 정의 한다

display: flex;  or  display: inline-flex;

display: flex 는 block 특성의 container 이고 container가 수직으로 정렬된다
display: inline-flex 는 inline 특성의 container 이고 container가 수평으로 정렬된다

flex-flow
flex-direction 과 flex-wrap 의 단축속성이다

flex-direction
items 의 주 축을 설정한다
row 는 왼쪽에서 오른쪽
column 는 위에서 아래이다
그 뒤에 reverse 를 붙이면 반대로 된다(오른쪽에서 왼쪽, 아래에서 위)

flex-flow: row wrap;

flex-wrap
nowrap 은 한줄로 표시하는 것이고 wrap은 items를 여러줄로 묶는다 뒤에 reverse 를 붙이면 역 방향으로 묶인다
items는 width 나 height 를 무시하고 한 줄 안에 들어간다 줄바꿈을 하려면 wrap을 사용해야 한다

justify-content
주 축(row 일때는 주 축이 가로 교차 축이 세로 column 일 때는 주축이 세로 교차 축이 가로이다)의 정렬 방법을 설정한다
flex-start, flex-end, center, space-between, space-around 가 있다

space-between
첫번째와 마지막 item 이 각각의 끝에 위치되고 나머지는 균일한 간격으로 정렬된다
space-around
items 를 동일한 여백을 줘서 정렬한다

align-content
items가 여러 줄 이상이고 여백이 있을 때 교차 축의 정렬을 설정한다
stretch, flex-start, flex-end, center, space-between, space-around 가 있다
align-items
items 가 한 줄일 때 사용
stretch, flex-start, flex-end, center, baseline
baseline 은 items 를 문자 기준선에 정렬한다

//item 을 중앙정렬 하고 싶으면 container에 
display: flex;
justify-content: center;
align-items: center;