css
디자인 확인section
개수style
의 순서의 의미html
내부의 인라인 스타일 ➡ id ➡ class ➡ tag 순으로 배치style
적용user agent stylesheet
사용자 도구 스타일시트
stylesheet
default sheet
가 다르며 스타일시트에서는 가장 아래에 위치(가장 낮은 우선순위)console.log()
를 이용해서 디버깅warning
, error
, info
등 확인Preserve log
체크
Console.clear()
또는clear()
를 Console에 입력
Preserve log
가 체크되어 있을 때는 사용 불가Warnings
와 Errors
제외Default levels
클릭 ➡ Warnings
와 Errors
체크 해제Esc 키 누르기
여러가지 탭 중에서 가장 중요한 것은 XHR
XMLHttpRequest(XHR)
객체를 이용해서 전체 페이지를 새로고침하지 않아도 페이지의 일부만을 위한 데이터를 로드하는 기능(AJAX)Fetch/XHR
탭 참조Media
탭 참조Local Storage
Session Storage
Cookie
Local Storage
, Session Storage
, Cookie
의 차이점과 사용 예시Cookie
는 데이터가 자동 전송되지만, Local Storage
와 Session Storage
에는 데이터를 선택하여 전송 가능Cookie
는 만료기간 설정이 가능하며 Local Storage
와 Session Storage
에는 만료기간이 없다.Local Storage
같은 웹사이트를 여러 탭 또는 창에 띄울 때 데이터가 공유된다.
같은 컴퓨터에서 다른 브라우저를 사용하는 경우에는 공유되지 않는다.
탭이나 창을 닫아도 브라우저에 데이터가 남아 있다.
Local Storage
에 저장된 데이터에는 만료기간이 없고, 필요할 때는 언제든지 사용이 가능하다.
예) 자동 로그인 등
Session Storage
같은 웹사이트를 여러 탭 또는 창에 띄울 때 서로 데이터가 공유되지 않으며 각 탭이나 창이 닫힐 때 데이터도 함께 소멸
브라우저가 닫히면 데이터가 삭제되며, refresh token
이용 시 session
에서 token
정보 유지 가능
예) 폼 입력 정보, 글쓰기 도중 사용자가 창을 벗어난 경우에 작성 내용 백업, 비회원 장바구니 등
Cookie
Local Storage
와 Session Storage
의 공통점Local Storage
와 Session Storage
의 차이점Local Storage
에 특정 데이터를 저장하고 가져오는 방법데이터 저장하기: localStorage.setItem(key, value);
데이터 불러오기: localStorage.getItem(key);
데이터 삭제: localStorage.removeItem(key);
모두 삭제: localStorage.clear();
index값에 해당하는 키 가져오기: localStorage.key(index);
저장된 항목의 수: localStorage.length
예시
저장: objArr = [{num:1, title:'test', contents:'blahblah'}, ...]
키와 값 전체 불러오기
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i); alert(`${key}: ${localStorage.getItem(key)}`);
}