코테 볼때, 옆에 자바스크립트 책 놔두기
바로바로 보고 풀기

반응형

왜 클래스 선택자를 많이 쓸까?
=> 컨벤션으로 만들기 편해서.요소 선택자 쓰게 되면 정확하게 선택하기 힘듦

	.section-field ul li{
		width: 50%;
		flex-basis: 50%;
        /* width50과 flex-basis 50의 차이는?
        => width 는 넓이 강제함. 요소 안에 컨텐츠 얼마가 되든 50% 강제
        하지만 flex-basis는 강제하지 않는다. */
	}

flex-direction column 이면 높이 기준으로 flex-basis 적용됨
row면 넓이 기준 적용됨

컨텐츠가 있는 경우 높이값 굳이 지정해주지 않는다.

미디어쿼리 코드 답안

/* 모바일 */
@media (max-width: 500px) {
    .wrap {
        gap: 4rem;
        max-width: calc(100% - 3.2rem);
    }

    .section-text h1 {
        font-size: 3.6rem;
    }

    .section-text p {
        font-size: 1.4rem;
        margin-top: 1.4rem;
    }

    .section-field ul {
        flex-direction: column;
        gap: 1.4rem;
    }

    .section-field ul li a {
        padding: 3em 3em 2em 3em;
        gap: 11.2rem;
    }

    .section-field .field-title {
        font-size: 2em;
    }

    .section-field .field-go {
        font-size: 1.4em;
    }
}

리터럴이란? 할당되기 전 값이다. 배열,객체 등 각각의 타입마다 리터럴 방식이 있다.
[] {} <=요것들

객체자료형은 key와 value로 이루어져있음

배열

배열의 크기는 .length 라는 프로퍼티로 값을 알 수 있다
배열의 리터럴 []

배열 만드는 방법 3가지
let myarr=[];

let myarr2 = new Array(5);
console.log(myarr2)
// length가 5인 arr 반환

let myarr3 =[];
let myarr3 = new Array(5,3,2);
console.log(myarr3);
// (5,3,2)인 배열 반환

• 문자열의 불변성
  문자열은 어떤 짓을 해도 변하지 않음
  mutable, immutable 많이 듣게 될 예정

console.log([1,2,3,4][2]) // 3
//배열은 생성과 동시에 값에 바로 접근 가능함

console.log([1,2,3,4][5]) //undifined
// 접근은 가능함. 그러나 undifined 출력

unshift() 맨 앞에 요소 추가

Array.prototype.unshift() 메소드는 배열의 맨 앞에 1개 이상의 요소를 추가하고, 배열의 새로운 길이를 반환할 수 있다.

shift() 맨 앞의 요소 삭제

array.prototype.shift() 메소드는 배열 내에서 0번째 인덱스에 오는 첫 번째 요소를 제거해 나머지 값의 위치를 한 칸씩 앞으로 오게끔 만든다. 매개변수가 없으며 제거된 첫 번째 요소를 반환할 수 있다는 특징이 있다. 빈 배열에서 사용하거나 배열의 length가 0일 경우 undefined를 반환한다.

splice() 배열 내 추가, 대체, 삭제

.splice(1,2,'')
1 -> 위치
2 -> 삭제 할 개수
'' -> 추가 할 것

삭제 및 추가

slice() 배열

원본 변경 메소드 x
배열 일부분 잘라내서 새로운 배열로 반환 ca

slice(
첫 번째 매개변수는 잘라낼 배열의 시작점의 인덱스를 의미,
두 번째 매개변수는 잘라낼 배열의 종료지점 인덱스이며, 잘라낼 배열에 포함되지 않음)

코끼리만 빼라!

.reverse() 배열 순서 변경

.indexOf() 요소의 인덱스

첫번째 매개변수는 탐색하고자 하는 요소
두번째 매개변수는 탐색 시작하고자 하는 인덱스 입력

join() 요소 연결

요소들을 연결하는 함수.
빈 문자열을 넣을 시 띄어쓰기 없이 연결된다. 요소가 null 또는 undefined 일 경우 빈 문자열로 반환된다.

split()

string을 한 문자열 기준으로 배열로 변환할때

join 으로 만든 문자열을 다시 배열로 변환함
(체이닝: 메소드 연달아서 쓰는 것)

includes() 특정 요소 포함되었는지 확인

배열이 특정 값이 포함되어있는지 확인할 수 있다. 탐색하려는 요소가 문자열일 경우에는 대소문자를 구분한다.
첫 번째 매개변수에는 탐색하고자 하는 요소를 입력한
두 번째 매개변수에는 탐색을 시작하고자 하는 인덱스를 입력한다

find() 하나의 요소라도 조건을 만족하는지 확인

배열에서 특정 조건에 부합하는 1개의 값 찾아 반환
단 하나의 요소만을 찾음. 조건 부합 안될 경우 undifined

.filter() 모든 요소 조건 만족하는지 확인

특정 조건에 부합하는 값을 찾고 그 값들로 이루어진 새로운 배열을 만들어 출력한다

.map() 각각 요소에 함수 호출

filter와 map의 차이는,
filter는 조건에 맞게 걸러내는 것.
map은 원하는 값을 뽑아냄

메서드의 목적 자체가 다르다

forEach()

이 안에 있는 원소 하나하나 순환하면서 Return할 결과 실행해줌

+foreach는 결과값 반환할 뿐. map은 결과값 모아서 배열로 반환

concat()

기존 배열에 존재하던 요소 사용해 새로운 배열 만들 수 있음

const cafe = ['coffee'];

cafe.concat(['cake']);
//expected output: ['coffee', 'cake']

cafe.concat(['tea'], 'cookie');
//expected output: ['coffee', 'tea', 'cookie']

여러가지 요소 한번에 추가하는것도 가능함

sort() 배열 내 요소 정렬

sort는 배열 내 요소를 오름차순으로 정렬. 이 과정에서 요소를 문자열로 취급해 재정렬함
그래서 제대로 작동하기 위해서는 따로 함수를 넣어주어야 함

arr.sort(function(a,b){
	console.log(`a:${a}`,`b:${b}`);
    return a-b
}

1. 9-13 => 음수. 음수일때는 두 위치 바꿔줌 => [9,13,10,2] (버블소팅) 
2. 10-9 => 양수. [9,13,10,2]
3. 10-13 => 음수. [9,10,13,2]
4. 2-10 => 음수 => [9,2,10,13]
5. 2-9 => 음수 => [2,9,10,13]

이러한 방법을 통해 버블소팅되고, 순서대로 정렬된다!!!!!

(갓희수님이 올려주신 이미지)

arr.sort(function(a,b){
	if(a<b){
    return -1
    }else if (b<a){
    return 1
    } else {
    return 0
    }
})

다른 함수로도 반환된다.

const studentList = [
    { id: 1, product: '연필', stock: 10 },
    { id: 2, product: '노트', stock: 100 },
    { id: 3, product: '지우개', stock: 5 },
    { id: 4, product: '볼펜', stock: 30 },
]

studentList.sort(function (a, b) {
    return a.stock - b.stock;
})

console.log(studentList);