[JavaScript] Ch11. 기타 웹 APIs

Console

콘솔에 메시지나 객체를 출력한다.

• .log() : 일반 메시지
• .warn() : 경고 메시지
• .error() : 에러 메시지
• .dir() : 속성을 볼 수 있는 객체를 출력

=> 개발자 도구의 모든 수준 버튼을 클릭해서 확인하지 않을 내용의 표시를 해지할 수 있다. / 맞춤수준으로 다시 보이게 가능

콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화한다.

• console.count('이름')
• console.countReset('이름')
• • console.count() : deault:1 이 부여가 된다.

콘솔에 타이머가 시작해서 종료되기까지의 시간(ms)을 출력한다.

• consol.time('이름')
• consol.timeEnd('이름')
  -> 코드를 작성함에 있어서 특정한 코드가 처리되는 시간을 확인하는 용도로 사용할 수 있다.

메소드 호출 스택(Call Stack)을 추적해 출력

• .trace(): 자신이 호출되기까지 어떤 다른 함수들이 호출되어져 왓는지 추적해서 콘솔에 출력

function a() {
    function b() {
        function c() {
            console.log('Log!')
            console.trace('Trace!')
        }
        c()
    }
    b()
}
a()

-> 제일 처음에 익명함수에서 실행되고, a함수 내부에서 b()가 실행되고 b함수 내부에서 c()함수가 실행이 되고 C함수 내부에서 trace함수가 호출이 되었다.

콘솔에 기록된 메시지를 모두 삭제

• .clear()

---

#### 서식 문자 치환 - %s : 문자로 적용 - %o : 객체로 적용 - %c : CSS를 적용 ``` const a = 'The brown fox' const b = 3 const c = { f : 'fox', d : 'dog' } console.log('%s jumps over the lazy dog %s times', a, b) console.log('%o is Object' , c) console.log( '%cThe brown fox %cjumps %xthe lazy dog.', 'color: brown; font-family: serif; font-size: 20px;', '', 'font-size:10px; color:#FFF; background-color:green: border-radius: 4px;'

)

- 서식 문자에는 차례대로 들어갈 수 있는데 첫번째 서식 문자로는, 두번째 인수의 문장이 들어간다. 
첫 번째 서식문자부터 두 번째 서식 문자가 나오기 전까지 css 내용이 적용되어 나온다. 
- ' ' 는 기본 문자로 출력



<hr>
## Cookie(쿠키)
> 쿠키란, 도메인 단위로 저장
표준안 기준, 사이트당 최대 20개 및 4KB로 제한
영구 저장 불가능

애플리케이션 > 저장용량 > 쿠키 > 로컬호스트에 해당하는 내용
- path= / :  슬래시 하나는 해당 도메인의 모든 하위 경로를 포함

- domain : 유효 도메인 설정
- path : 유효 경로 설정
- expirse : 만료 날짜(UTC Data) 설정
- max-age : 만료 타이머(s) 설정

document.cookie = 'a=1; max-age=3'
document.cookie = 'b=2'

console.log(document.cookie)

-> max-age라는 옵션에 지정하는 숫자는 초단위로 지정하며 a라는 이름의 쿠키가 생성되고 3초가 지나면 만료가 되어 브라우저에서 제거가 된다.
화면에서 제거가 되지 않는다면 새로고침을 해보자.
하루 뒤에 제거 : 86400초

// 더 쉽게 입력하려면?
document.cookie = `a=1; max-age=${1 * 60 * 60 * 24 * 3}`

- 만료날짜는, 데이트 클래스로 생성하는 날짜 스탬프를 문자로 넣어준다. 데이트 생성자 함수를 호출해서 ~
document.cookie = `b=2; expires=${new Date(2022 , 11, 16).toUTCString}`
- 위에서 주의할 점 :  '1월은 0'
- UTC Date : GMT+0900 (한국 표준시 -9시간 = 국제 표준시)
--> new Date().toUTCString() 을 하면 국제 표준시로 나온다. 

--> 세션 : 브라우저가 종료되면 해당 쿠키도 만료, 만료날짜, 시간을 함께 명시해주는 것이 좋다

- 덮어쓰기 가능
- 쿠키 값 조회하고 싶으면 콘솔

document.cookie = 'a=1; max-age=3'
document.cookie = 'b=2'

console.log(document.cookie)

function getCookie(name) {
const cookie = document.cookie
.split('; ')
.find(cookie => cookie.split('=')[0]===name)
return cookie
}
console.log(getCookie('a'))

- find라는 메소드는 콜백 내부에서 true데이터를 반환하게 되면 테스트를 통과하는 아이템을 반환하는데 이렇게 반환하게 되면 테스트를 통과하는 해당 아이템을 반환을 한다.하나의 쿠키 정보이고 split을 통해서~

=> 쿠키는 특히나 중요한 정보를 만료날짜나 시간을 설정해서 관리할 수 있는 장점이 있으나, 저장할 수 있는 개수나 용량제한이 심해서 일반적인 데이터를 브라우저에 저장하는 용도로는 적합하지 않다.
생각보다 데이터를 저장하고 가져오는 것이 불편함. => 브라우저의 일반적인 데이터를 저장하는 용도로 사용하는 쿠키를 제외한 또다른 방법 : Storage


## Storage(스토리지)
> 도메인 단위로 저장, 5MB 제한 , 세션(브라우저가 종료되면, 저장한 데이터가 제거되는)
혹은 영구 저장가능

- sessionStorage : 브라우저 세션이 유지되는 동안에만 데이터 저장
- localStorage: 따로 제거하지 않으면 영구적으로 데이터 저장

- getItem() : 데이터 조회
- setItem() : 데이터 추가
- removeItemt() : 데이터 제거
- clear() : 스토리지 초기화

localStorage.setItem('a', 'Hello world!')
localStorage.setItem('b', {x : 1, y:2 })
localStorage.setItem('c' , 123)

console.log(localStorage.getItem('a')) // Hello world!
console.log(localStorage.getItem('b')) // [object Object]
console.log(localStorage.getItem('c')) // 123

-> 주의 : storage에 데이터를 저장할 땐, 기본적으로 문자 데이터상태로 저장,. 
객체 데이터를 저장할 수 없으므로 임의의 문자로. 애플리케이션 > 저장용량> 로컬 스토리지 주소를 확인하면 각각의 abc이름을 가지고 있는 데이터들이 저 출력값으로도 나온다
=> 이렇기 때문이 우리가 사용할 방법은 JSON 객체의 문자화 **JSON.stringify({x:1, y:2})** => 객체데이터로 JSON 문자로 확인 가능

console.log(JSON.parse(localStorage.getItem('b'))) // 콘솔에도 객체데이터로 출력

-> 문자데이터를 제이슨 팔스로 하면? 에러/ 이유 : 유효한 JSON 포맷이 아니다? 
-> JSON 문자는 '' 을 허용하지 않고 " " 만 허용한다. 
-> js와 JSON 데이터 문자는 사실상 다른 것이기 때문에 " " 로 바꿔서 저장해야 가져올 때 JSON.parse 메서드로 제대로 분석을 해서 데이터화를 시킨다. 

-> 로컬 스토리지와 세션 스토리지는 내용은 동일. 세션 스토리지에 저장된 데이터는 우리가 브라우저를 종료했다가 오픈하면 제거된다. 임시로 브라우저를 사용할 때 저장하는 데이터들은 세션스토리지로 저장하고 계속해서 저장하는 데이터들은 로컬 스토리지를 사용한다. 

> 스토리지는 만료라는 개념이 없다. 그래서 로컬 스토리지를 사용하면 따로 데이터를 제거하거나 또는 세션 스토리지를 사용해서 사용자 브라우저가 종료되기를 바라야하는데 혹시라도 시간이 지나서 데이터가 꼭 제거가 되어야만 한다면 그것은 스토리지가 아닌 쿠키를 사용한다. (쿠키는, 사이트 배너 하단에 하루동안 열지 않기 같은 특정버튼을 만들 때 사용하고 스토리지는 데이터를 저장하고 관리하고 삭제하는 것이 쿠키보다 편리하고 용량도 많기 떄문에 완료되는 데이터가 아닌 일반적인 데이터를 저장하는 용도로는 스토리지가 좋다)

## Location
> 로케이션은 현재 페이지의 주소 정보를 가지고 있어서 페이지 관리를 위해서 꼭 필요한 객체인데, 현재 페이지 주소 정보를 반환하는 것 뿐만 아니라 페이지를 제어할 수 있는 메서드도 제공
![](https://velog.velcdn.com/images/jinjoooo/post/bb762ee0-74f9-4081-85b1-5f94a2851159/image.png)

⭐️ hash : 해시 정보(페이지의 ID)
![](https://velog.velcdn.com/images/jinjoooo/post/2b6c8afd-2308-4318-a06f-f680376a0faf/image.png)
![](https://velog.velcdn.com/images/jinjoooo/post/28d382fa-6323-4781-8a63-847c893f494c/image.png)

--> id 선택자는 주소에서 하나의 hash라는 개념으로 사용될 수 있고, id라는 속성을 통해서 페이지 내부에서 새로고침을 하지 않아도 이동할 수 있다. 

## History1
> 브라우저에서 여러 페이지를 이동하게 되면 매번 브라우저는 기록하게 되는데 이것을 History라고 부르고 그 정보들이 History 객체로 들어가져서 사용이된다. 
>> 브라우저 히스토리(세션 기록) 정보를 반환하거나 제어
![](https://velog.velcdn.com/images/jinjoooo/post/3975b3a5-a27a-4328-9b72-805da1951a12/image.png)

- pushState : 페이지를 새로고침하지 않아도 새로운 히스토리가 누적될 수 있는 개념이기 때문에 이후 우리가 프로젝트에서 페이지 관리 용도로 사용할 것이다. 

<hr>
> SPA란, SinglePageApplication으로, 우리가 제공하는 페이지는 실제로 하나밖에 없지만 그 하나 페이지 내부에서 새로고침 없이 여러 개의 내용을 페이지가 교체되듯이 사용할 수 있다.(우리의 프로젝트처럼?)

- 404란? 준비되지 않은 페이지로 사용자가 접근을 시도했을 때