728x90
반응형
1. Console
// console
// 콘솔에 메시지나 객체를 출력
// log() : 일반 메시지, warn() : 경고 메시지
// error() : 에러 메시지, dir() : 속성을 볼 수 있는 객체 출력
console.log(document.body)
console.warn(document.body)
console.error(document.body)
console.dir(document.body)
// 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화
// console.count('이름')
// console.countReset('이름')
console.count() // default: 1
console.count('a')
console.count('a')
console.countReset('a')
console.count('a')
// time(), timeEnd()
// 콘솔에 타이머가 시작해서 종료되기까지의 시간을 출력
console.time('반복문')
for (let i=0; i<10000; i+=1){
console.log(i)
}
console.timeEnd('반복문')
// trace()
// 메소드 호출 스택을 추적해 출력
function a() {
function b() {
function c() {
console.log('log!')
console.trace('trace!')
}
c()
}
b()
}
a()
// clear()
// 콘솔에 기록된 메시지를 모두 삭제
console.log(1)
console.log(2)
console.log(3)
// 서식 문자 치환
// %s - 문자로 적용
// %o - 객체로 적용
// %c - CSS로 적용
const aa = 'The brown fox'
const b = 3
const c = {
f:'fox',
d:'dog'
}
console.log('%s jumps over the lazy dog %s times.', aa, b)
console.log('%o is object!', c)
console.log(
'%c the brown ~~~',
' ',
'asdf'
)
2. Cookie, Storage
- cookie
// cookie
// 도메인 단위로 저장
// 표준안 기준, 사이트당 최대 20개 및 4kb로 제한
// 영구 저장 불가능
// 누적되어 사용
// domain: 유효 도메인 설정
// path: 유효 경로 설정
// expires: 만료 날짜(UTC Date) 설정
// max-age: 만료 타이머 설정
// document.cookie = 'a=1; domain=localhost; path=/'
// 쿠키는 항상 만료날짜, 시간 명시 필요
document.cookie = `a=1; max-age=${1*60*60*24*3}`
document.cookie = `b=2; expires=${new Date(2022,11,16).toISOString()}`
document.cookie = 'a=3'
console.log(document.cookie)
function getCookie(name){
const cookie = document.cookie
.split('; ')
.find(cookie=>cookie.split('=')[0]===name)
return cookie ? cookie.split('=')[1] : null
}
console.log(getCookie('c'))
- storage
// storage
// 도메인 단위로 저장
// 5MB 제한
// 세션 혹은 영구 저장 가능
// sessionStorage : 브라우저 세션이 유지되는 동안에만 데이터 저장
// localStorage : 따로 제거하지 않으면 영구적으로 데이터 저장
// getItem() : 데이터 조회
// setItem() :데이터 추가
// removeItem() : 데이터 제거
// clear() : 스토리지 초기화
// storage 사용 시, JSON.stringify, JSON.parse 사용 권장
localStorage.setItem('a', JSON.stringify('Hello world'))
// storage는 항상 문자로 데이터가 저장됨. 객체는 불가능하니까 [object Object]로 저장됨
// localStorage.setItem('b', {x:1, y:2})
localStorage.setItem('b', JSON.stringify({x:1, y:2})) // 값을 문자로 확인
localStorage.setItem('c', JSON.stringify(123))
console.log(JSON.parse(localStorage.getItem('a')))
console.log(JSON.parse(localStorage.getItem('b')))
console.log(JSON.parse(localStorage.getItem('c')))
3. Location
// location
// 현재 페이지의 정보를 반환하거나 제어
// href : 전체 url 주소
// protocol: 프로토콜
// hostname: 도메인 이름
// pasthname : 도메인 이후 경로
// host : 포트 번호를 포함한 도메인 이름
// port: 포트번호
// hash : 해시정보(페이지의 id) 중요!!!!!!!!!
// assign(주소) : 해당 '주소'로 페이지 이동(항상 새로고침으로 출력)
// replace(주소) : 해당 '주소'로 페이지 이동, 현재 페이지 히스토리를 제거
// reload(강력) : 페이지 새로고침, 'true' 인수는 '강력' 새로고침
// 일반 새로고침 : 페이지만 다시 로드(캐시된 데이터, 여러 데이터를 그대로 출력)
// 강력 새로고침 : 화면에 출력했었던 기본적인 내용을 최대한 배제하고 새로 가지고 옴
// (기존에 남아있던 정보가 그대로 출력되는 것을 방지 가능)
console.log(location)
4. History
// history
// 브라우저 히스토리(세션 기록) 정보를 반환하거나 제어
// length : 등록된 히스토리 개수
// scrollRestoration : 히스토리 탐색시 스크롤 위치 복원 여부 확인 및 지정
// state : 현재 히스토리에 등록된 데이터(상태)
// back() : 뒤로 가기
// forward() : 앞으로 가기
// go(위치) : 현재 페이지 기준 특정 히스토리 '위치'로 이동
// pushState(상태, 제목, 주소): 히스토리에 상태 및 주소를 추가,
// 실행이 될때 새롭게 히스토리 내용 누적
// replaceState(상태, 제목, 주소): 현재 히스토리의 상태 및 주소를 교체,
// 현재 페이지에 대한 히스토리 제거 후 새로 추가
// 모든 브라우저(safari 제외)는 '제목' 옵션을 무시(빈문자로 들어감)
console.log(history)
- html
<body>
<a href="#hello1">hello1</a>
<a href="#hello2">hello2</a>
<a href="#hello3">hello3</a>
</body>
- 추가 예제 : SPA(Single Page Application) 구현
// history 예제
// SPA (Single Page Application : 한 화면 내부에서 사용자에게 페이지가 바뀌는 것처럼 출력)
// pagePush() 사용으로 SPA 구현
// console.log(history)에서 scrollRestoration의 auto는 자동으로 스크롤의 위치를 복원(최상단으로 안올라감)한다는 의미
const page1 = /* html */ `
<section class="page1">
<h1> page1 </h1>
</section>`
const page2 = /* html */ `
<section class="page2">
<h1> page2 </h1>
</section>`
const page3 = /* html */ `
<section class="page3">
<h1> page3 </h1>
</section>`
const pageNotFound = /* html */ `
<section>
<h1>404 Page Not Found!</h1>
</section>`
const pages = [
{path: '#/page1', template: page1},
{path: '#/page2', template: page2},
{path: '#/page3', template: page3}
]
const appEl = document.querySelector('#app')
const render = () => {
// console.log(history) // pagePush 함수에서 render() 호출하지 않을때 확인용
// page.path === location.hash가 참이면 page 변수를 반환
// 찾지 못하면 page는 undefined 출력
const page = pages.find(page => page.path === location.hash)
appEl.innerHTML = page
? page.template
: pageNotFound
}
// popstate : 사용자가 브라우저의 페이지에서 히스토리를 남기는 동작을 할 때마다 발생하는 이벤트
// 페이지가 바뀔 때마다 준비된 화면을 출력 가능
window.addEventListener('popstate', render)
render()
const pagePush = num => {
// 실제로 popstate 이벤트는 동작하지 않아서 이동한 페이지의 내용이 출력되려면 render() 함수 호출
history.pushState(`전달할 데이터 - ${num}`, '', `#/page${num}`)
render()
}
const inputEl = document.querySelector('nav input')
inputEl.addEventListener('keydown', event => {
if(event.key === 'Enter'){
pagePush(event.target.value)
}
})
728x90
반응형
'JS, TS' 카테고리의 다른 글
| [JS] 정규표현식 (0) | 2024.01.16 |
|---|---|
| [JS] 심화 학습 (0) | 2024.01.15 |
| [JS] 이벤트 2 (0) | 2024.01.15 |
| [JS] 이벤트 1 (0) | 2024.01.15 |
| [JS] DOM (1) | 2024.01.14 |
