20220525 TIL

class

extends

class User{
    constructor(name, age){
    this.name = name;
    this.age = age;
    }
    hi(){
        console.log('이름은'+this.name+'나이는'+this.age)
    }
}

✔ extends

class AddUserLocation extends User{ 👈
    constructor(name, age, location){
        super(name, age); 👈
        this.location = location
    }
    hi(){
        console.log('유저의 위치는 '+this.location+' 입니다.') 👈
    }
}

class AddUser extends User{
    constructor(name, age, location){
        super(name, age);
        this.location = location
    }
    hi(){
        super.hi();👈
        console.log(`안녕하세요 현재 유저의 위치는 ${this.location}`)
    }
}

1. class a extends b : b를 가지고 a를 확장시킴
2. super(name, age); : user 라는 class 뜻함. 부모클래스를 상속하는것. 안적어주면 위에 있는 클래스 상속 안됨.
3. 덮어쓰기 (overwriting)
4. 매서드 확장 : super로 가져왔으므로 덮어쓰기 안됨

getter, setter

getter
데이터를 가지고 오는 함수는 get 이라는 키워드를 사용한다.
파라미터가 없는 함수
return 값이 꼭 있어야 한다.

setter
데이터를 입력,수정해주는 set 이라는 키워드를 사용한다.
파라미터가 꼭 힌개 있어야 한다.
입력받은 값에 조건을 걸어서 쓸 수 있음.

const user = {
    get nameOut(){
        return this._name;//함수의 이름과 변수 키값이 같으면 안됨.
    },
    set nameIn(value){
        if(value.length < 5){
            console.log('글자수를 확인해주세요')
            return//return값이 undefined로 자동으로 들어감.
        }
        this._name = value
    }
};
user.nameIn = 'merryjane';
console.log(user.nameOut)

const cal = {
    get numOut(){
        return `출력값은 ${this.num+10} 입니다`;
    },
    set numIn(value){
        this.num = value;
    }
}
cal.numIn = 20;
console.log(cal.numOut)

전역객체(global object)

javascript 에 내장되어있는 객체
범위가 전체임.
this라는 연산자를 통해 접근 가능

래퍼 객체

number

const num = 123;
const num1 = new Number(123);
console.log(typeof num) //number
console.log(typeof num1) //object
console.log(Number.MAX_VALUE) 
console.log(Number.MIN_VALUE) 
console.log(Number.NaN) 

const num2 = 123546123.1325;
console.log(num2.toFixed(2))//소숫점2쨰자리
console.log(num2.toString())
console.log(num2.toPrecision(2))

math

console.log(Math.PI) // 원주율 구하기.
console.log(Math.ceil(10.53))//소숫점 올림
console.log(Math.floor(10.53))//소숫점 내림
console.log(Math.round(10.53))//소숫점 반올림
console.log(Math.min(1,5,10))// 최댓값 1
console.log(Math.max(1,5,10))// 최솟값 10

난수

console.log(Math.random())// 난수 0에서 1 사이 값
console.log(Math.round(Math.random()*100+1))// 난수 1-101, 반올림하여 소숫점 절삭

📌 5자리의 난수 만들기

let pass = ''; 
for (let i=1; i<6; i++){
    pass+=(Math.floor(Math.random()*10))
}
console.log(pass)

sring

const text = 'Hello World!';
console.log(text.length);
console.log(text.charAt(0));
console.log(text.charAt(6));
console.log(text.indexOf('W'));
console.log(text.lastIndexOf('I'));
console.log(text.includes('H'));
console.log(text.toUpperCase());
console.log(text.substring(0, 2)); //he(1번 2번)
console.log(text.slice(2));
console.log(text.slice(-2));//뒤에서부터 두개, 거기서부터 반환
console.log(text.substring(-2,6)); //-주면 0으로 인식함.
console.log(text.slice(-2,6));
const spacetext1 = '                   aaaa                 bbb';
console.log(spacetext1.trim())//앞에 있는 공백만 없애고 문자 사이에 있는 공백 없애지 못함.
const spacetext2 = 'aaaa bbbb cccc dddd';
console.log(spacetext2.split(' '));//[ 'aaaa', 'bbbb', 'cccc', 'dddd' ]
const spacetext3 = 'aaaa-bbbb-cccc-dddd';
console.log(spacetext3.split('-',2));//[ 'aaaa', 'bbbb' ]
const textSample = "가나다라마바사 ABCDEFG 123456 가나다라마바사";
console.log(textSample.slice(5, -10))//바사 ABCDEFG 1234
console.log(textSample.substring(5, -10))//가나다라마
//slice(n) n번째 인덱스 부터 끝까지
//slice(n,m) n번째부터 m-1까지(m앞에서 짤림)
//slice음수면 뒤부터 계산.
//substring 음수가 오면 0
//substring(n,m) n부터 m앞까지

공백 특수문자 정규표현식

date

날짜, 시간

const now = new Date(); 👈
console.log(now.getFullYear())
console.log(now.getDate()) 👈
console.log(now.getMonth())
console.log(now.getTime())
let h = now.getHours()
let m = now.getMinutes()
let s = now.getSeconds()
let timebox = `지금은 ${h}시 ${m}분 ${s}초`
console.log(timebox)

1. constructor로 선언해줘야 사용 가능.
2. 월 0 1 2 3 ...(인덱스번호로 표시됨)

grid

grid-area : 이름으로 나누기

      .container1 {
            border: 5px solid #000;
            background-color: green;
            display: grid;
            grid-template-areas: 'item item a a a'; 👈
        }
        .container1>div{
            text-align: center;font-size: 30px;
            border: 1px solid #000;
        }
        .container1>div.item{
            background-color: aqua;
            grid-area: item;
        }

grid-template-areas: 'item item a a a''item item a a a'; 👈

gird-template-area
1. item 2개만큼 나머지(a)3개만큼
2. 1번과 동일한 그리드설정 2행 반복

반복되는 값에 repeat 활용하기

 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-columns: repeat(4, 1fr);

1fr을 4번 반복

minmax()

grid-template-columns: 1fr minmax(200px,auto) 1fr

최소값 200px, 최대값 auto

min-content

grid-template-columns: min-content 1fr 1fr;

컨텐츠의 최소넓이 정해줌 나머지는 1fr 1fr
이미지 들어갈 경우 이미지 사이즈에 맞춰 자동으로 조절함.

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));