728x90
목차
015
DOM 트리
DOM?
- 문서 객체 모델
- HTML, XML 문서의 프로그래밍 인터페이스이다.
- 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하며 그들이 문서구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
- 문서 객체 모델(DOM)에 따르면 모든 html태그는 객체이다.
- 문서를 트리 구조의 형태로 표시하는 것이다.
- 태그를 노드(node)라고 표현하고 노드를 연결하는 가지가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>
<h1></h1>
</p>
</div>
<div>
<span>
<a href=""></a>
</span>
</div>
</body>
<script src="./index.js"></script>
</html>- 문자열을 태그사이에 넣어서 태그를 추가하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="addTag"></div>
</body>
<script>
document.querySelector('.addTag').innerHTML = "<div>태그추가</div>";
//결과: 태그추가
</script>
</html>
createElement( )
- javascript를 통해 동적으로 특정한 이름의 html의 element를 생성한다.
- 태그를 생성해주는 메소드
- element의 이름을 매개변수로 받아서 해당 노드를 생성한다.
- element를 생성한 후에는 append, insert 메소드를 사용하여 삽입할 수 있으며, remove메소드를 사용하여 노드를 제거할 수 있고, replace메소드를 사용하여 노드를 교체할 수 있다.
- 태그를 생성해서 원하는 위치에 노출할 수 았도록 append 메소드로 태그를 추가해줘야 확인이 가능하다.
- append로 추가하기 전에는 메모리공간에 남아있다.
- 문법: document.createElement(태그명);
- javascript에서 생성한 태그에 내용을 넣을 수 있고, 클래스 추가도 가능하다.
- 내용추가: 생성한 태그를 담은 변수명.innerHTML = "삽입할 내용";
- 클래스추가: 생성한 태그를 담은 변수명.classList.add("추가할 클래스명");
append( )
- 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
- append메소드는 원하는 요소에 태그를 추가할 수 있다.
- 태그참조.append(생성한 태그)
- 태그참조하고 태그의 내용으로 생성한 태그가 추가된다.
- innerHTML, append 두 메소드 다 html에 내용을 추가하는데 차이점은 무엇일까?
- innerHTML: 문자로 내용이 들어가서 보안에 취약하다.
- append: DOM 트리의 노드이기 때문에 보안에 문제가 없다. 태그 작업을 세분화할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="CEdiv"></div>
</body>
<script>
//동적으로 태그를 생성
let addDiv = document.createElement("div"); //동적으로 div태그를 생성하여 변수 addDiv에 담음
let addP = document.createElement("p"); //동적으로 p태그를 생성하여 변수 addP에 담음
addDiv.innerHTML = "div태그에 내용 추가!" //생성한 div태그에 내용을 추가
addP.innerHTML = "<p>p태그에 내용 추가!</p>" //생성한 p태그에 내용과 스타일 추가
addDiv.classList.add("adddiv"); // 생성한 div태그에 클래스 추가
addP.classList.add("addp"); // 생성한 p태그에 클래스 추가
document.body.append(addDiv); //body 태그 영역에 생성한 div 태그 추가
setTimeout(() => {
document.querySelector('.CEdiv').append(addP); //html의 클래스CEdiv 영역에 생성된 태그 addP 추가.
}, 2000); //페이지가 전부 로드 된 후 2초 뒤 노출
//태그의 내용을 전부 확인할 수 있다.
//문자열로 쓴 태그의 텍스트 내용까지 전부 읽어준다.
console.log(addDiv.innerHTML); //결과: div태그에 내용 추가!
console.log(addP.innerHTML); //결과: <p>p태그에 내용 추가!</p>
//태그의 내용에서 문자만 확인할 수도 있다.
//innerText: 태그 사이의 문자만 가져온다.
console.log(addDiv.innerText); //결과: div태그에 내용 추가!
console.log(addP.innerText); //결과: p태그에 내용 추가!
</script>
</html>
remove( )
- 원하는 태그를 제거할 수 있다.
- DOM에서 원하는 노드를 메모리에서 삭제하고 종료한다.
- 제거된 엘리먼트는 자바스크립트 엔진의 GC에 의해 곧 메모리에서 지워진다.
removeChild( )
- 노드를 삭제한다는 개념보다는 메모리에 해당 노드는 그대로 존재하며, 부모-자식 관계를 끊어 DOM 트리에서 해제하는 것이다.
- 최종적으로 관계를 끊은 해당 노드의 참조를 반환한다.
- 반환값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더 이상 없기 때문에, 자바스크립트 엔진의 GC에 의해 잠시 후 메모리에서 삭제된다.
- 반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있다.
- prepand( )를 이용하여 다시 DOM에 붙일 수 있다.
| 차이점 | remove( ); | removeChild( ) |
| 인터넷 익스플로러 | 미지원 | 지원 |
| 부모 엘리먼트 | 불필요 | 필요 |
| 반환값 | 없음 | 삭제한 노드 참조 변환 |
| 노드 리스트 삭제 | 미지원 | 미지원 |
| 하위 노드 삭제 | 지원 | 지원 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>없애봐!</p>
<div>나는 div태그이고
<h1>나는 제목이야</h1>
</div>
<button class="btn1"></button>
<button class="btn2"></button>
</body>
<script>
let JSbtn1 = document.querySelector('.btn1'); //태그 button의 클래스 btn1을 가리키는 변수 btn1
let JSbtn2 = document.querySelector('.btn2'); //태그 button의 클래스 btn2을 가리키는 변수 btn2
let JSp = document.querySelector('p'); //태그 p를 가리키는 변수 JSp
let head1 = document.querySelector('h1'); //태그 h1을 가리키는 변수 head1
let divJS = document.querySelector('div'); //태그 div를 가리키는 변수 divJS
JSbtn1.innerHTML = "누르면 p태그 제거!" //클래스 JSbtn1에 내용값 대입
JSbtn2.innerHTML = "누르면 div태그 안에 h1태그 제거!" //클래스 JSbtn2에 내용값 대입
JSbtn1.onclick = function(){ //클래스 JSbtn1을 클릭하면 실행될 함수 선언
JSp.remove(); //변수 JSp 태그 제거
}
//결과: p태그인 "없애봐!" 제거
JSbtn2.onclick = function(){ //클래스 JSbtn2을 클릭하면 실행될 함수 선언
console.log(head1);
divJS.removeChild(head1); //변수 head1을 변수 divJS에서 내용을 찾아 제거해준다.
/* document.div.removeChild(head1);
html에서 div태그를 찾아 그 내용에서의 변수 head1을 찾아서 제거하려 했으나 실패
Uncaught TypeError: Cannot read properties of undefined (reading 'removeChild') */
}
//결과: h1태그인 "나는 제목이야" 제거
</script>
</html>
addEventListener
- 이벤트를 구독시키는 함수
- 이벤트를 등록하는 가장 권장되는 방식이다.
- 이벤트를 실행시킬 객체.addEventListener("구독할 이벤트 이름", 실행시킬 함수( ){ })
- onclick과 쓰임새가 비슷하나 몇가지의 차이점이 있다.
- on을 빼고 작성한다.
- 예) onscroll => scroll
- 이벤트를 누적시킬 수 있다. 여러개의 이벤트 추가가 가능하다.
- onclick의 경우에는 이벤트를 덮어쓰기 때문에 가장 마지막에 작성된 이벤트 단 한 개만 노출된다.
- on을 빼고 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>구독하기</button> //버튼태그 선언
</body>
<script>
let btn = document.querySelector("button"); //태그 button을 가리키는 객체 btn 선언
btn.addEventListener("click", function(){ //addEventListener 선언. 객체 btn이 가리키는 태그 클릭 시 실행될 함수 선언
console.log("나는 이벤트 구독 중");
})
btn.addEventListener("click", function(){ //addEventListener 선언. 객체 btn이 가리키는 태그 클릭 시 실행될 함수 선언
console.log("나는 이벤트 구독 중 2 ");
})
btn.onclick = function(){ //변수 btn을 클릭하면 실행되는 함수 선언.
console.log("나는 onclick 1");
}
//단, 중복되어 선언되었기 때문에 해당 구문은 실행되지 않는다.
btn.onclick = function(){ //변수 btn을 클릭하면 실행되는 함수 선언
console.log("나는 onclick 2");
}
/*결과
나는 이벤트 구독 중
나는 이벤트 구독 중 2
나는 onclick 2
*/
</script>
</html>
Event
load
- 페이지와 기타 요소들의 그릴 준비 로딩이 끝났을 때
//어트리뷰트 방식 (on ~)
window.onload = function () {
}
// load 이벤트 구독
window.addEventListener('load',function(){
//load이벤트가 실행되면 내용 실행
});
resize
- 브라우저의 창 크기가 바뀌면 실행되는 이벤트
//어트리뷰트 방식
window.onresize = function(){
console.log("창 사이즈 변환");
}
// resize 이벤트 구독
window.addEventListener("resize",function(){
})
scroll
- 사용자가 태그나 페이지에서 스크롤 했을 때 실행되는 이벤트
- 태그의 이벤트로 원하는 이벤트를 구독하면 태그에서 그 이벤트가 발생할 때 실행된다.
div.onscroll = function(){ //div태그에 scroll 이벤트 구독. div태그 내의 스크롤이 존재해야하고
console.log('나 스크롤 되고 있니?'); //해당 태그 내에서 스크롤이 동작하였을 때 실행된다.
}
document.body.onscroll = function(){ //body태그에 scroll 이벤트 구독.
}
키보드 이벤트
onkeydown
- 사용자가 키보드를 누르자마자 발생하는 이벤트
- 키보드를 누르고 뗀 것이 아닌 눌렀을 그 당시에 바로 실행된다.
onkeyup
- 사용자가 키보드를 누르고 뗐을 때 발생하는 이벤트
- 키보드를 누르고 있다가 키를 떼는 순간에 실행된다.
onkeypress
- 키보드를 누르고 있을 때 발생하는 이벤트
- 키를 누르고 있으면 계속 실행된다.
- onkeydown을 누르고 있어도 계속 실행되기 때문에 사용할 경우가 많지 않을 수 있다.
- 단, 별도의 동작을 구별하는 경우 등에 사용이 가능하다.
- 예) onkeydown하는 순간에 동작하는 기능 / onkeypress하는 동안 동작하는 기능
- 단, 별도의 동작을 구별하는 경우 등에 사용이 가능하다.
window.onkeydown = function(){ //키보드를 누르자마자 발생할 이벤트 함수 선언. onkeydown
console.log("나 키 누르자마자");
}
window.onkeyup = function(){ //키보드를 떼자마자 발생할 이벤트 함수 선언. onkeyup
console.log("키보드를 누르다가 뗐어");
}
window.onkeypress = function(){ //키보드를 누르는 동안 발생할 이벤트 함수 선언. onkeypress
console.log("키보드를 누르고 있는 동안");
}
마우스 이벤트
click
- 사용자가 해당 태그를 클릭했을 때 발생하는 이벤트
dbclick
- 사용자가 해당 태그를 더블클릭했을 때 발생하는 이벤트
mousedown
- 사용자가 마우스를 누르자마자 실행되는 이벤트
mouseup
- 사용자가 마우스를 누르다가 뗐을 때 실행되는 이벤트
mousemove
- 마우스가 태그 위에서 이동될 때 실행되는 이벤트
mouseenter
- 마우스가 태그 위에 올려졌을 때 실행되는 이벤트
mouseleave
- 마우스가 태그 위에서 나갔을 때 실행되는 이벤트
* onmousedown과 onmouseup
- 마우스 키를 누르고 이동한 뒤 키를 뗐을 때 좌표로 계산해서 동작해야하는 기능을 만들 때 사용하기도 한다.
- 페이지 내의 슬라이드 구현이 가능하다.
* onmousenter와 onmouseleave
- 마우스가 태그위에 올라갈 때, 빠져나갈 때의 기능을 줄 수 있으니 hover와 유사한 기능으로 사용할 수도 있다.
//click이벤트. 웹페이지 내에서 마우스를 클릭했을 때 실행될 함수 선언.
window.onclick = function(){
console.log("나 클릭");
}
//dbclick이벤트. 웹페이지 내에서 마우스를 더블클릭했을 때 실행될 함수 선언.
window.ondblclick = function(){
console.log("더블클릭");
}
//mousedown이벤트. 웹페이지 내에서 마우스를 누른 순간 실행될 함수 선언.
window.onmousedown = function(){
console.log("마우스 키 다운");
}
//mouseup이벤트. 웹페이지 내에서 눌렀던 마우스를 뗀 순간 실행될 함수 선언.
window.onmouseup = function(){
console.log("마우스 키 업");
}
//mousemove이벤트. 변수_div가 가리키는 태그 위에서 마우스가 이동되는 동안 실행될 함수 선언.
_div.onmousemove = function(){
console.log("마우스 이동 중 입니다.");
}
//mouseenter이벤트. 변수_box가 가리키는 태그 위에 올려지는 순간에 실행될 함수 선언.
_box.onmouseenter = function(){
console.log("마우스가 올려짐");
}
//mouseleave이벤트. 변수_box가 가리키는 태그 위에 올려져있던 마우스가 빠져나가는 순간 실행될 함수 선언.
_box.onmouseleave = function(){
console.log("마우스 나갔어");
}
모바일터치 이벤트
touchstart
- 화면을 터치한 순간 발생하는 이벤트
touchend
- 화면을 터치하다가 떼는 순간 발생하는 이벤트
touchmove
- 화면을 터치하고 이동할 때 발생하는 이벤트
- clickmove와 달리 누른 상태로 이동해야 한다.
//touchstart선언. 웹페이지를 터치하는 순간 실행될 함수 선언.
window.ontouchstart = function(){
console.log("모바일 터치됐어");
}
//touchend선언. 웹페이지를 터치하다가 떼는 순간 실행될 함수 선언.
window.ontouchend = function(){
console.log("모바일 터치하다가 뗐어");
}
//touchmove선언. 웹페이지를 터치하면서 이동할 때(누르면서 이동) 실행될 함수 선언.
window.ontouchmove = function(){
console.log("터치하고 이동 중");
}
드래그 이벤트
알고 지나가자!
target
event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킨다.
draggable
- 요소의 드래그 가능 여부를 나타내는 열거형 특성이다.
- graggable은 true와 false 두 값중 하나를 가질 수 있다.
- true: 요소를 드래그 할 수 있다.
- false: 요소를 드래그 할 수 없다.
gragstart
- 드래그가 시작될 때 실행되는 이벤트
gragend
- 드래그가 끝났을 때 발생하는 이벤트
dragenter
- 드래그하고 태그 위에 올려졌을 때 실행될 이벤트
gragleave
- 드래그하다가 태그 위에서 빠져나갔을 때 실행될 이벤트
gragover
- 드롭하고 대상이 드롭 가능한지 여부를 설정해준다.
drop
- 드래그를 하다가 마우스 버튼을 떼면 드롭하는 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 800px;
height: 800px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.box{
width: 400px;
height: 400px;
border: 1px solid red;
box-sizing: border-box; <!--border 값까지 포함하서 사이즈를 400으로 맞춤-->
}
#item{
width: 100%;
height: 100%;
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<!--드래그를 허용시켜주는 어트리뷰트 속성 true false로 설정-->
<div id="item" class="item" draggable="true"></div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
<script>
let d = null; //변수 d에 null 값을 대입.
// 변수 d의 값을 비움
document.ondragstart = function(e){
// dragstart이벤트가 발생하는 객체에 클래스 item이 있으면 참(참일경우 실행문 실행)
if(e.target.classList.contains("item")){
//ondragstart가 실행되는 함수의 타켓에 대한 정보를 노출
//결과: <div id="item" class="item" draggable="true" style="background-color: red;"></div>
console.log(e.target);
//전역변수 d에 e.target을 대입하여 드래그할 태그를 담아놓는다.
d = e.target;
//e.target.style 안에 적용시킬 스타일의 키값에 스타일 값을 추가해줄 수 있다.
//e.target에 대한 스타일 값들을 출력한다.
//결과: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
console.log(e.target.style)
//css에서 작성하던 이름과는 좀 다르다. 해당 js에선 카멜표기법으로 표기한다.
//CSS 에서 background-color -> backgroundColor
// - 하이픈 뒤 한글자만 대문자로 구분해주면 된다.
e.target.style.backgroundColor = "red"
}
}
document.ondragend = function(e){
// 드래그 끝났으니까 초기화
d = null;
//e.target이 item 클래스가 있는 태그였으면
if(e.target.classList.contains("item")){
//처음에 입혀줬던 색으로 다시 변경
e.target.style.backgroundColor = "aqua"
}
}
/*결과: 아쿠아색이었던 클래스 item영역이 드래그 하는 순간 빨간색으로 변하고
드래그가 끝나면 다시 원래 색상이었던 아쿠아색으로 변경된다. */
document.ondragenter = function(e){
//e.target이 box 클래스를 가지고 있고 d가 비어있지 않을 때
//&&니까 두 조건이 모두 true여야지 조건이 실행된다.
if(e.target.classList.contains('box') && d !== null){}
e.target.style.backgroundColor = "blue";
}
/* 결과: div태그의 box클래스인 영역을 item영역을 드래그하여 그 위에 얹어지면
box 클래스의 영역이 파란색으로 변한다. */
document.ondragleave = function (e) {
if(e.target.classList.contains('box') && d !== null){}
//배경을 투명으로 변경 (transparent = 투명)
e.target.style.backgroundColor = "transparent";
}
/* 결과: div태그가 box클래스에 얹어져 파랗게 변한 영역이 그 영역을 벗어나면
투명하게 변한다. */
document.ondragover = function(e){
if(e.target.classList.contains("box") && d !== null){
//preventDefault: 기본 동작을 없애준다. 브라우저에서 기본적으로 동작하는 기능을 제거해준다.
e.preventDefault();
//from태그 쓰다가 새로고침되는 현상이 발생하는데
//새로고침되는 현상같은 기본 동작을 제거해주는 역할을 한다.
}
}
/* 결과: div태그를 드래그하여 box클래스 영역에 드래그해서 드롭허면
box영역이 파랗게 변한다. */
document.ondrop = function(e){
if(e.target.classList.contains("box") && d !== null){
e.target.style.backgroundColor = "transparent";
//append: 원하는 위치 태그에 내용으로 태그를 이동시켜줄 수 있다.
e.target.append(d);
}
}
/* 결과: div태그를 드래그하여 boc클래스 영역들을 이동하다가 드롭하면
div태그의 값을 box영역에서 받는다. 이전에 지정을 받은 영역은
투명하게 변한다. */
</script>
</html>
이벤트 내용 확인
이벤트 내용을 값으로 받을 수 있다.
해당 변수가 가리키는 태그를 가져올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<div>나는 div영역
<p>나는 p영역</p>
</div>
</body>
<script>
let d = document.querySelector("div"); //div태그를 가리키는 변수 d 선언
d.onclick = function(r){ //변수 d를 클릭하면 실행될 함수 선언. 매개변수로 r을 갖는다.
//이벤트가 실행되면 이벤트의 내용이 값으로 넘어온다.
console.log(r); // 이벤트 내용 출력
//결과: PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
//해당 이벤트가 일어난 타켓
//변수 d가 가리키는 div영역을 click이벤트가 실행되면 동작하는 함수이므로
//실행되면 click된 태그를 target이 해당 태그를 가져온다.
console.log(r.target); //클릭된 태그의 내용 출력
/* 결과
div태그 클릭 :
<div>나는 div영역
<p>나는 p영역</p>
</div>
p태그 클릭: <p>나는 p영역</p>
*/
}
</script>
</html>
마우스의 위치를 확인할 수 있다.
window.onmousemove = function(m){
//이벤트 타입을 확인
console.log(m.type); //결과: mousemove
//해당 이벤트 일어나면 나타날 마우스의 좌표 x값
//좌표 값은 픽셀단위로 노출된다.
// 0 ~ 브라우저의 너비크기
console.log(m.pageX);
//이벤트 발생 시 나타날 마우스 좌표 Y값
// 0 ~ 브라우저의 높이
console.log(m.pageY);
}
키보드로 입력한 글자의 ASCII코드 값을 확인할 수 있다.
window.onkeydown = function(e){
console.log(e.keyCode); //키보드로 누른 문자가 ASCII 코드값으로 노출된다.
//ascii코드: 숫자로 표현된다.
//A를 입력하면 나타날 콘솔 값
if(e.keyCode == 65){
console.log("A키를 입력 받았다.");
}
}
기본적으로 내재되어 있는 동작을 취소할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--form의 기본 속성이 새로고침이므로 form에 속해있는 button을 누르면 페이지가 새로고침된다.-->
<form action="">
<!--button 태그의 기본 속성은 submit(데이터를 제출하는 속성)이다.-->
<button type="submit" class="btn_class">클릭</button>
</form>
</body>
<script>
let _button2 = document.querySelector(".btn_class");
_button2.onclick = function(e){
//기본동작이 제거된다.
//브라우저 상에서 기본 동작되는 기능을 제거해줄 수 있다.
e.preventDefault();
}
//결과: form의 기본 속성인 새로고침이 동작하지 않는다.
</script>
</html>
쿠키
- 웹사이트를 방문하고 사용자의 PC에 기록할 간단한 데이터이다.
- PC에 저장해두었다가 값을 호출해서 사용할 수 있다.
- 브라우저가 종료되어도 남아있다.
- 로컬에 파일 형태로 저장되기 때문에 요청 속도는 서버를 통하는 다른 저장소보다 비교적 빠르다.
- 사용자의 로컬에서 관리되기 때문에 보안적인 부분에서 취약할 수 있다는 단점이 있다.
쿠키 종류
- Session Cookie: 메모리에만 저장되며, 만료시간이 있지만 브라우저 종료시 삭제되는 쿠키
- Persistent Cookie: 파일로 저장되며, Max-Age 설정을 통해 장기간 유지 가능하고 브라우저 종료와 관계없이 사용 가능한 쿠키
- Secure Cookie: HTTPS에서 사용되는 암호화된 쿠키. 비교적 안전하지만 실질적 보안이 제공되지 않아 민감한 데이터 저장 절대 금지
- Third Party Cookie: 다른 도메인에 요청이 필요할 때 생성하는 쿠키. 주로 광고 목적으로 사용되며, 유저 개인정보 악용의 문제 발생
쿠키 특징
장점
- 대부분의 브라우저가 지원
- 데이터 유효기간 지정 가능 (ex. 1 hour, 1 day)
- XSS (사이트 간 악성 Js 코드를 심는 행위)로부터 안전 - 서버에서 쿠키의 httpOnly 옵션을 설정하면, Js에서 쿠키에 접근 자체가 불가능
단점
- 매우 작은 데이터 저장 용량 (4kb)
- 매번 서버에 HTTP 요청시 같이 전달되어 서버에 부담
- 암호화가 안되어 있어 유저 정보 도난 위험
- CSRF(사이트 간 요청 위조) 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
- 문자열만 저장 가능
쿠키구조
- 쿠키에도 키와 값이 있다.
- 문자열로 저장하면 된다.
- 쿠키의 매개변수는 (name, value, time)이다.
- name: 쿠키의 이름(키)
- value: 쿠키 안의 내용(값)
- time: 유효시간
쿠키생성
new Date()
- 새로운 Date객체가 만들어진다.
- new Date()
- 인수없이 호출하면 현재의 날짜와 시간이 지정된 Date객체가 반환된다.
let now = new Date();
alert( now ); // 현재 날짜 및 시간이 출력됨- new Date(milliaeconds)
- UTC 기준(UTC+0) 1970년 1월 1일 0시 0분 0초에서 milliseconds 밀리초(1/1000 초) 후의 시점이 저장된 Date 객체가 반환된다.
- 1970년의 첫날을 기준으로 흘러간 밀리초를 나타내는 정수는 타임스탬프(timestamp) 라고 부른다.
- 타임스탬프를 사용하면 날짜를 숫자 형태로 간편하게 나타낼 수 있다.
- date.getTime() 메서드를 사용해 Date 객체에서 타임스탬프를 추출하는 것도 가능하다.
// 1970년 1월 1일 0시 0분 0초(UTC+0)를 나타내는 객체
let Jan01_1970 = new Date(0);
alert( Jan01_1970 );
// 1970년 1월 1일의 24시간 후는 1970년 1월 2일(UTC+0)임
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 );- new Date(datestring)
- 인수가 하나인데, 문자열이라면 해당 문자열은 자동으로 구문 분석(parsed)이 된다.
let date = new Date("2017-01-26");
alert(date);
// 인수로 시간은 지정하지 않았기 때문에 GMT 자정이라고 가정하고
// 코드가 실행되는 시간대(timezone)에 따라 출력 문자열이 바뀝니다.
// 따라서 얼럿 창엔
// Thu Jan 26 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time)
// 혹은
// Wed Jan 25 2017 16:00:00 GMT-0800 (Pacific Standard Time)등이 출력됩니다.- new Date(year, month, date, hours, minutes, seconds, ms)
- 주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체가 반환됩니다(지역 시간대 기준). 첫 번째와 두 번째 인수만 필수값입니다.
- year는 반드시 네 자리 숫자여야 한다.
- 2013은 괜찮고 98은 괜찮지 않습니다.
- month는 0(1월)부터 11(12월) 사이의 숫자여야 한다.
- date는 일을 나타내는데, 값이 없는 경우엔 1일로 처리된다.
- hours/minutes/seconds/ms에 값이 없는 경우엔 0으로 처리된다.
new Date(2011, 0, 1, 0, 0, 0, 0); // 2011년 1월 1일, 00시 00분 00초
new Date(2011, 0, 1); // hours를 비롯한 인수는 기본값이 0이므로 위와 동일
let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 2011년 1월 1일, 02시 03분 04.567초getTime()
- 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환한다.
- 날짜 복사에도 사용된다.
// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
var birthday = new Date(1994, 12, 10);
var copy = new Date();
copy.setTime(birthday.getTime());
쿠키 유효시간
//현재 시간에 정보를 가지고 있는 객체를 만들어준다.
let date = new Date();
date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
//현재 시간 + 1일의 시간을 추가한 것이 해당 쿠키의 만료시간이 된다.
//set get
//set: 변경할 때 네이밍으로 많이 사용한다.
//get: 정보를 호출할 때, 객체로 만들어서 정보를 가져오는 경우쿠키를 추가하는 방법
- 기본 규격
- 쿠키의 명 = 값;expires+만료일+";path=/"
- path=/: 페이지의 경로에 대한 설정 쿠키를 다루는 경로
- toUTCString메소드: 날짜 시간 표시 방법을 변경해준다.
let date = new Date();
date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
document.cookie = name+"="+value+";expires"+date.toUTCString()+";path=/";
//예) "Wed, 22 Mar 2023 04:47:13 GMT"
쿠키함수 작성 및 제거
//쿠키함수를 작성해보자.
//정규식이 포함되기는 하는데 지금은 무시해도 된다.
//다들 정규식은 간단한것만 사용하고 핗요한 내용이 생가면 찾고 하면 편해서 팢아서 작성하는 경우가 많다.
function getCookie2(name){
//match 메소드
//매개변수로 정규식 전달
let value = document.cookie.match("(^|;) ?" + name + "+([^;]*)(;|$)");
console.log(value);
return value ? value[2] : null;
}
//쿠키를 제거하는 함수.
//쿠키를 상하게만 하면 된다. 날짜를 강제로 지나게 하는 것.
function deleteCookie(name){
document.cookie = name + "=; expries=Thu, 01 jan 1999 00:00:10 GMT;";
}
deleteCookie("이벤트 팝업");
deleteCookie("이벤트 팝업2");
console.log(getCookie2("이벤트 팝업"));
console.log(getCookie2("이벤트 팝업2"));
세션, 로컬 스토리지
| 세션 스토리지 | 로컬 스토리지 | |
| 데이터 유지 | 브라우저 종료 시 삭제 | 브라우저 종료 시 보관 |
| 데이터 범위 | 동일한 도메인 전역 공유 | 브라우저간 공유 안됨 |
세션 스토리지 (Session storage)
- window.sessionStorage에 위치한다.
- 브라우저가 동작되는 동안에 남아있는 데이터
- 브라우저의 종료 시점까지 유지된다.
- 도메인이 같더라도 브라우저가 다르면 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터공유가 되지 않는다.
- 상태같은 내용을 다룰 때 사용한다. (예. 로그인 되어있는 상태)
로컬 스토리지 (Local Storage)
- window.localStorage에 위치한다.
- 브라우저를 종료해도 데이터를 보관한다.
- 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있다.
- 데이터에 만료기한이 없다.
- 보안 이슈로 민감한 값을 저장해서는 안된다.
setItem()
- 값을 저장할 때 사용한다.
- window.localStorage.setItem("키","값");
getItem()
- 값을 호출할 때 사용한다.
- window.localStorage.getItem("키");
<!--index4.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./index5.html">페이지 이동</a>
</body>
<script>
window.localStorage.setItem("keyA", "abcdefu");
</script>
</html><!--index5.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
console.log(window.localStorage.getItem("keyA"));
//index4에서 페이지 타고 이동한 결과: abcdefu
</script>
</html>
세션 스토리지 & 로컬 스토리지 메소드
//setItem 메소드: 첫 매개변수 = 키, 두 번째 매개변수 = 값
sessionStorage.setItem('Token','데이터 내용'); //키와 값을 저장
//세션에 저장된 데이터를 호출
//getItem: 세션에 저장된 데이터를 호출 매개변수로는 키 값을 전달
console.log(sessionStorage.getItem('Token'));
//문서에 내용을 쓰기 추가할 수 있다.
document.write(sessionStorage.getItem('Token')); //body에 출력
//세션의 길이 구하는 법
sessionStorage.length
document.write(sessionStorage.length); //결과 2
//세션의 키를 인덱스로 호출
//key 라는메소드
document.write(sessionStorage.key(1));
//세션삭제
//clear: 세션 전체 삭제
sessionStorage.clear();
//로컬스토리지에 추가
window.localStorage.setItem("key", "value");
//로컬스토리지 값을 호출
window.localStorage.getItem("key");
//로컬스토리지 전체 값을 제거
window.localStorage.clear();
//로컬스토리지 길이
window.localStorage.length;
//로컬스토리지 key 호춯
window.localStorage.key(0);
더보기
- createElement
728x90
