[220525 / Day 17] JS : class 문법, 메서드 / CSS : grid 3

1. class 문법

- constructor : () 이름 없으면 안해도 상관x

- 오브젝트 새로 만들고 싶은데 기존에 있는 클래스에서 플러스로 다른 내용 넣고 싶다 :

- 클래스 확장 : extends / class AddUserLocation extends User  user 를 확장(extends) 시켜 Add~ 를 만든다 / constructor(name,age,location)  추가할 것(location) 만 쓰면 안됨  / super 는 User 클래스를 상속, 안 적어주면 상속 안됨 / 확장만 시킬 거면 중괄호 안에 내용 안쓰면 됨 / 같은 네임인데 내용을 추가하면 덮어쓰기가 됨(오버라이딩) / 덮어쓰기 안하고 싶다 하면 super 사용 메서드(hi)는 . 붙이기 / 리액트에서 컴포넌트 쓸 때 사용할 수 있음

 

 

 

2. get set

- getter (get) : 데이터 가지고 오는 함수, 리턴값이 꼭 있어야 함 

- setter (set) : 데이터를 입력, 수정해주는 함수, 파라미터(매개변수)가 꼭 한 개 있어야 함 / 데이터를 처리해서 입력할 수 있음

- get, set 옆 이름은 똑같아도 됨, getset 이름과 함수 안의 이름이 같으면 x

- set 으로 num.inputNum = 20; 입력해주고 꼭 get 으로 console.log(num.outputNum) 으로 출력해야 값이 나옴 set 만 하면 입력만 해줄 뿐임

 

 

 

3. 표준 내장 객체

- 전역 객체란? 전역 함수를 담는 역할을 함 this 연산자로 접근할 수 있음, 새로운 브라우저가 열리면 자바스크립트에서 전역 객체를 먼저 만들고 작업이 시작됨 / console.log(globalThis)  전역함수들이 출력됨

- wrapper 객체? 원시값을 감싸고 있는 객체

 

 !!! js6.js 파일에다가 필기했음 정리해서 이곳에 필기하기

 !!! js7.js 136p 파일에다가 필기했음 정리해서 이곳에 필기하기

 

 

 

4. 메서드

스트링 객체 메서드 140p , 143p 해보기 js8.js

- length 길이반환

정규표현식

 

시간, 날짜 객체 js9.js

문자 숫자의 경우 뭔지 지정하고 객체 생성하지 않아도 알아서 지정이 됐는데 시간 날짜의 경우 지정해줘야함

getFullYear

 

 

 

CSS

1. grid-4.html

 

부모 요소에 작성

- grid-template-areas: 'item item item item item’;  :  해당 자식 아이템이 콜룸 5칸을 차지

- item item a a : 이름으로 나눠준 것 콜룸 4칸 생기고 아이템 2칸 a 2칸씩 차지

- 'item item a a a' 'item item a a a' : 로우 한칸 한칸씩 설정, 총 로우 두칸으로 만들어짐

- grid-template-columns: min-content : 컨텐츠의 최소넓이 지정, 콘텐츠 크기만큼

- grid-template-columns: repeat(3, minmax(300px, 1fr)); : 브라우저 줄이면 부모 크기는 줄어드는데 자식 크기는 안줄어드는 현상 발생

- auto-fill : 최소 크기에 따라

 

자식 요소에 작성

- grid-row: 2; : 가로 2번째 칸으로 이동

- grid-area : 속성값에 꼭 동일한 이름 주지 않아도 됨 하지만 그게 편함