[카테캠 선택강의] 기타 Web APIs

콘솔 메서드의 종류

console.log 

일반적인 콘솔 메세지이다.

HTML 트리구조를 볼 수 있다.

 

console.dir

객체가 어떠한 속성으로 구성되어있는지 확인할 수 있다.

 

 

console.count 

콘솔이 몇번 호출되었는지 카운트한다.

함수에 적용하면 해당 함수가 몇번 호출되는지 확인이 가능하다.

const f = () => {
  console.count('호출되었습니다.')
}

for(let i=0; i<10; i++){
  f()
}

 

 

console.time , console.timeEnd 

코드의 실행 속도를 확인할 수 있습니다.

 

 

console.trace

console.trace 는 호출 스택(Call Stack) 을 알려준다. (콜 스택은 실행 컨텍스트 스택과 같다.)

 

 

 

콘솔 텍스트에 style 적용

아래처럼 콘솔 스타일에 스타일을 적용하는 방법이 있는데 아마 쓸일은 없을 것 같다.

 

 

Cookie, Storage

Cookie

쿠키는 만료일을 설정할 수 있기때문에 오늘 하루 보지 않음. 기능을 만들때 보통 사용한다.

• 도메인 단위로 저장
• 표준안 기준, 사이트당 최대 20개 및 4KB로 제한

cookie 는 다음처럼 할당할 수 있다.

이때 특이한 점은 값이 덮어쓰여지지 않고 연속해서 저장된다는 것이다.

또한 콘솔로 쿠키를 출력하면 ; 로 각각의 쿠기정보가 구분되어있는 것을 확인할 수 있다.

document.cookie = "a=1";
document.cookie = "b=2";

console.log(document.cookie); // a=1; b=2

 

아래는 웹브라우저의 쿠키 탭이다.

 

Cookie 옵션

• domain: 유효 도메인 설정
• path: 유효 경로 설정
• expires : 만료 날짜 설정
• max-age: 만료 타이머 설정

 

 

domain 옵션

아래와 같은 코드로 도메인을 설정할 수 있다.

옵션을 부여할때는 ; (세미콜론) 구분하여 할당한다.

document.cookie = "a=1; domain=example.com;";
document.cookie = "b=2";

console.log(document.cookie); // a=1; b=2

 

쿠키탭을 살펴보면 domain 옵션으로 부여된 값과 현재 localhost 라는 도메인이 같지 않기때문에 쿠키가 저장되지 않는다.

 

 

path 옵션

아래와 같은 코드로 path을 설정할 수 있다.

path 또한 옵션을 부여할때는 ; (세미콜론) 구분하여 할당한다.

document.cookie = "a=1; domain=localhost; path=/hi";
document.cookie = "b=2";

console.log(document.cookie); // a=1; b=2

 

쿠키탭을 살펴보면 path 옵션으로 hi 가 부여되었지만 현재 url 은 localhost/ 를 가르키고 있기때문에 쿠키가 저장되지 않는다.

 

 

max-age 옵션

max-age 옵션을 설정하면 쿠키가 해당 시간 후에 자동 삭제된다.

만약 3일뒤에 쿠키가 삭제되게끔 하고 싶다면 어떻게 해야할까?

document.cookie = `a=1; domain=localhost; path=/; max-age=${60 * 60 * 24 * 3};`;

 

이후 쿠키 탭을 확인해보면 3일뒤에 Expires 가 설정되어있는 것을 확인할 수 있다.

 

 

expires 옵션

expires 옵션을 사용하면 만료 날짜를 설정할 수 있다.

아래는 오늘의 날짜를 new Date 로 작성한 것이다.

document.cookie = `b=2 ${new Date(2023, 4, 24).toUTCString()}`;

 

하지만 new Date 는 한국 표준시에 맞춰 시간이 설정되기 때문에 이를 국제표준시로 바꾸기 위해 toUTCString() 메서드를 사용한 코드이다.

 

 

쿠키정보를 획득하는 함수

function getCookie(name) {
  const cookies = document.cookie.split(";");
  const cookie = cookies.find((item) => item.includes(name));
  return cookie ? cookie.split("=")[1] : null;
}

 

 

Storage(스토리지)

• 도메인 단위로 저장
• 5MB 제한
• 세션 혹은 영구 저장 가능
• 세션 스토리지: 브라우저 세션이 유지되는 동안에만 데이터 저장
• localStorage: 따로 제거하지 않으면 영구적으로 데이터 저장

localstorage 에는 문자열이 저장이 가능하기때문에 객체 데이터를 JSON.stringify 와 JSON.parse 를 사용해서 변환해주어야한다.

 

 

숫자 데이터도 JSON 메서드 사용하면 형변환없이 그대로 사용할 수 있었구나. 몰랐다.

 

 

문자열을 저장할때도 JSON.stringify 를 사용하는 것이 좋다. 

왜냐하면 보통 prettier 포맷이 ' ' 작은 따옴표를 사용하게 설정이 되어있을 텐데, 작은 따옴표로 작성된 문자열에 JSON.parse 를 사용하게 되면 에러가 발생하기 때문이다. 

 

 

 

Location

현재 페이지의 주소정보를 가지고 있는 객체이다.

 

프로퍼티에 대한 설명은 위 사진 주석에 있다. 주석만으로 잘 이해할 수 없는 부분은 따로 기록해두었다.

 

 

href

전체 URL 주소에 대한 정보를 가지고 있는 프로퍼티이다.

프로토콜(http) 도메인(localhost) 포트(1234) path(/) 정보를 가지고 있는 것을 확인할 수 있다.

 

 

 

hash 

하나의 페이지에서 내부에 있는 특정한 위치로 이동하기위해 아이디 선택자를 사용하여 페이지 이동을 할 수 있다.

이때 선택된 아이디 선택자를 #hello 와 같은 값으로 나타내는데 이 정보를 hash 라고 한다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

위 예시처럼 href 와 id 를 사용하면 같은 페이지의 해당요소로 이동이 가능하다.

만약 다음과 같은 예시에서 a 태그가 동작한다면 

 

hash 와 href 가 다음과 같이 변경된다.  

 

 

assign

해당 주소로 페이지를 이동한다. 페이지 이동시에 새로고침된다.

아래 코드를 실행하면 /xyz path 로 이동한다.

 

또한 뒤로 가기를 실행하면 이전 페이지로 이동할 수 있다.

이때 hash 데이터가 그대로 저장되어있음을 주의깊게 살펴보자.

 

 

replace

replace 는 assign 과 페이지 이동은 동일하지만 뒤로가기를 실행했을 때 hash 에 대한 정보가 사라진다.

replace 또한 페이지 이동시 화면을 새로고침한다.

 

reload

새로고침을 할 수 있는 기능이다. 인수로 true 를 설정하면 강력 새로고침이 실행된다.

 

 

일반 새로고침 , 강력 새로고침 차이?

• 일반 새로고침: 페이지만 다시 로드하기때문에 데이터가 캐시되어있다.
• 강력 새로고침: 캐시를 지워버려 기존에 남아있는 데이터를 모두 제거 할 수 있다.

 

 

 

History

 length

등록된 히스토리의 갯수를 알려준다. 

예를 들어 , 네이버 -> 구글로 페이지 이동을 했다면 length 는 2가 될 것이다.

 

hash를 사용하여 페이지 내부에서의 이동또한 히스토리 갯수에 포함된다.

 

ScrollRestoration 

히스토리 탐색시 스크롤 위치 복원 여부 및 지정

 

 

back, forward, go

• back() : 뒤로가기
• forward() : 앞으로 가기
• go(위치) : 현재 페이지 기준 특정 히스토리로 이동
  history 가  1 - 2 - 3(현재 페이지) - 4 - 5 일때 go(-2) 를 실행하면 history 1로 이동

 

 

pushState(상태, 제목, 주소)

히스토리에 상태 및 주소를 추가한다.

arguments 의 제목은 사파리 브라우저를 제외하면 모두 해당 옵션을 무시하기 때문에 빈 문자열을 넣어준다.

pushState가 실행되면 해당 주소로 이동하고 state 프로퍼티에 값이 할당된다.

pushState를 사용한 이동은 새로고침이 되지 않는다는 특징이 있다.

또한 history 가 추가된 것을 확인할 수 있다.

replaceState(상태, 제목, 주소)

pushState 와 유사하지만 history가 추가되지 않고 교체 된다는 특징이 있다.

SPA

실제 페이지는 하나 밖에 없지만 그 하나의 페이지 내부에서 새로고침 없이 페이지가 교체되듯이 사용자에게 보여줄 수 있는 방법

 

 

 

popstate 이벤트 

사용자가 브라우저의 페이지에서 히스토리를 남기는 동작을 할때마다 발생하는 이벤트이다.

단, pushState의 페이지 이동은 popstate 이벤트가 발생하지 않는다.

window.addEventListener('popstate', render);