오늘 공부한것 & 기억하고 싶은 내용
배열 기반의 다중 할당
[a,b,c] = arr객체 기반의 다중 할당
- 객체 내부에 있는 속성을 꺼내 변수로 할당
{name,age} = userInfo
{a=name,b=age} = userInfo전개연산자
- 복사한 배열이 독립적으로 작동하는것(기존의 배열에 영향을 주지 않는 새로운 배열 반환)
- 2개 이상의 배열을 붙일때도 사용함
//배열
[...arr]
[...arr, 추가, 추가]
[...a,...b]
//객체
{...obj}
const obj2 = {
...obj,
name:'kim'
}DOMContentLoaded
- 문서 객체를 모두 읽고 나서 실행하는 이벤트
문제점
1. body가 생성되기 이전인 head에서 innerHTML과 같은 body에 출력하는 코드를 작성하면 innerHTML이 작동하지 않는다.
2. head내부의 script에서 body에 있는 문서에 접근하려면 화면에 문서 객체 요소를 모두 읽어들일때까지 기다려야한다.
문제점을 해결하기 위해 DOMContentLoaded을 사용한다.
문서가 모두 읽은 후 DOMContentLoaded이벤트가 실행되기에 script위치가 head에 있어도 상관 없다
document.addEventListener('DOMContentLoaded',() => {
실행시킬 이벤트
})객체 속성
- setAttribute(속성이름, 값) - 속성에 값을 지정
- getAttribute(속성이름) - 속성 추출
localStorage
- 웹 브라우저에 데이터를 저장하는 객체
localStorage.getItem() - 저장된 값 추출. 없으면 undefined
localStorage.setItem(키, 값) - 값을 저장
localStorage.removeItem() - 특정 키의 값 제거
localStorage.clear() - 저장된 모든 값 제거오류
- 구문 오류 - 프로그램 실행 전 발생 (괄호 누락 등 실행 조차 안됨)
- 예외/런타임 오류 - 프로그램 실행 중 발생
예외처리 방법
- 기본 예외 (if else)
- 고급 예외 (try catch)
try{
예외가 발생할 가능성이 있는 코드
}catch(){
예외가 발생했을 때 실행 코드
}try 구문 안에서 예외를 발생하면 catch구문에서 처리한다.
리액트 맛보기
- 리액트는 사용자 인터페이스를 쉽게 구성할 수 있게 도와주는 라이브러리
- 화면이 출력되는 요소를
컴포넌트가장 최상위에 배치하는 컴포넌트를루트 컴포넌트라고 한다.
배운점 & 느낀점
예전에 읽다 말았던 혼공스 뒷부분을 마저 읽고 그때도 공부할게 많았지만 이번에도 할게 많다 생각했다.
localStorage를 사용해 본적이 없기에 이번에 공부하면서 알게 되어 추후 사용하기에 조금이라도 도움이 될거 같고, 예외 처리는 if/else 만 사용해봤기에 추후 try/catch를 사용해 보아야겠다.
