1. Local Storage / Session Storage / Cookie

• Web Storage : 서버로 전송하지 않고 만료기간이 없는 저장소. 즉, 한 번 저장한 데이터는 영구히 존재한다.
  - Local Storage : 저장한 데이터를 직접 지우지 않는 이상 영구적으로 보관. Ex) 로그인 정보

  • Session Storage : 탭을 닫거나 브라우저 종료시 데이터는 일회성으로 삭제된다. 예를 들어, 같은사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. Ex) 은행 사이트

• Cookie : 매번 서버로 전송하고 만료기간을 설정하는 저장소. 그리고 Web Storage와 다르게 용량의 제한이 있다. Ex) 팝업 창
  // 스토리지 접근 방법
  windows.localStorage
  windows.sessionStorage
  

2. CSS 부분에서 순서가 의미하는 것

• 기본적으로 뒤에 나오는 css가 우선순위가 높다.
• 속성값 뒤의 !important > 태그에 inline으로 style 속성 지정 > id > class, 다른 attribute, psuedo클래스(:firstchild, :hover) > tag element, psuedo엘레먼트(::before) 순으로 우선순위가 높다.
• 우선순위가 같다면 개수가 많은 css가 우선순위가 높다.

!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많은데, 이 두 가지는 보통 최후의 수단이다.

<순위 산출 방식>

• 인라인 스타일 1000점
• ID 선택자 100점
• 클래스 선택자 및 가상 클래스(:before 같은), 속성 10점
• 태그 선택자 1점

우선순위가 같다면 점수로 순위가 정해진다. 예로, class 하나에 달린 css보다 class 두 개에 달린 css 우선 순위가 더 높다. 그리고 개수마저 같다면 뒤에 나오는 것이 순위가 높다.

• user agent sheet : 브라우저에서 제공하는 CSS default 값

3. 페이지 리로드 방법

3초마다 현재 페이지 새로고침 방법

// 1번 방법
<script>
setTimeout(function() {
 location.reload(); 
}, 3000) // 3000밀리 = 3초
</script>

// 2번 방법
<META HTTP-EQUIV="refresh" CONTENT="15"> // head 태그 사이에 추가시 15초마다 자동 리로드

4. 디버깅 - console.log/err/warn/dir

• console.log() : 특정 값을 확인한다.
• console.error() : 에러 메세지 형태로 확인한다.
• console.warn() : 경고 메세지 형태로 확인한다.
• console.dir() : 객체를 객체 형태로 조금 더 자세히 보여준다.