Archive for

네트워크통신 개요

Server-client Model

서버는 특정한 서비스를 제공하는 컴퓨터를, 클라이언트는 이러한 서비스를 이용하는 사용자를 의미한다.

Server의 종류

웹통신 개요

Web통신구조

Web Server란?

• 사용자에게 HTML 페이지나 jpg,png와 같은 이미지를 HTTP프로토콜을 통해 웹 브라우저에 제공하는 서버
• 내부의 내용이 이미 만들어져 있는 정적인 요소들을 화면에 보여주는 역할을 한다.

Web Server의 종류

		Apache Software Foundation 에서 만든 서버로 HTTP 통신에 대한 여러 라이브러리를 제공한다.
		Window OS에서 제공하는 웹 서버로, 높은 수준의 보안성과 성능을 제공한다.
		무료 오픈 소스 서버로, 사용자 요청을 스레드가 아닌 확장성이 있는 이벤트 기반설계를 통해 필요 리소스만 할당하여 사용한다.

WAS 란?

Web Application Server의 약자로, 사용자가 요청한 서비스의 결과를 스크립트 언어 등으로 가공하여 생성한 동적인 페이지를 사용자에게 보여주는 역할을 한다.

	Apache Software Foundation에서 Servlet과 JSP를 통한 동적인 웹 문서를 처리하기 위해 만든 웹 애플리케이션 서버
	Jboss라고도 불리며, 톰캣이 제공하는 servlet container뿐만 아니라 EJB container를 별도로 제공하여 폭넓은 서비스를 구현
	국산 WAS, 대용량의 데이터 트랜잭션을 고성능으로 처리하며 개발 및 운영에 관한 기술 지원이 뛰어나다.

CGI와 WAS

CGI(Common Gateway Interface)

• 웹서버가 직접적으로 웹 프로그램을 실행하는 것을 말한다. 동일한 프로그램에 대한 요청이 있을 때 마다 각각 프로그램을 실행, 요청과 프로그램이 1:1 매칭되어 실행
• Perl이나 C/C++ 언어를 사용하여 웹서버가 실행할 수 있는 프로그램을 작성

WAS(Web Application Server)

웹서버가 웹 애플리케이션 서버에 요청하면 웹 애플리케이션 서버가 해당되는 프로그램을 실행하는 방식, 한 프로그램에 여러 요청이 있는 경우 한 개의 프로그램을 실행하여 그 프로그램을 다수 요청을 처리

CGI와 WAS

서블릿 컨테이너(Servlet-Container)

• 서블릿의 생명주기를 관리(생성,초기화,소멸), HttpServletRequest, HttpResponse객체를 생성 요청에 따라 멀티스레딩 구성, 전송방식에 따라 동적으로 페이지 구성하는 작업진행
• 정적로딩처리

JSP 컨테이너(JSP-Container)

• JSP파일을 다시 java코드로 변경해주고 class파일로 전환하여 메모리 공간에 로드한 뒤 실행 가능하게 만드는 작업을 진행(Servlet화)
• 처리결과를 HTML파일로 만들어주는 작업진행
• 동적로딩처리

Web Server VS WAS

기본설정

jQuery배열관리
each메소드
- 배열을 관리하는 for in문과 비슷한 메소드로 객체나 배열의 요소를 검사하는 메소드
- index : 객체, 배열의 순번
- item : 값을 보관하는 변수(객체) ‘.’으로 접근

$.each(배열(객체)이름, function(index, item){
배열(객체) 차례로 처리할 때 사용
}
);

$(‘선택자’).each(function(index, item){
선택된 요소들을 차례로 조작할때 사용
}
);

jQuery객체 확장
extend메소드
- jQuery에서 객체의 내용을 추가하는 메소드

    $.extend(객체이름, {
    추가할 객체내용,
    추가할 객체내용2,
    ……
    }
    );

noConflict메소드
- jQuery변수를 $외에 다른 것으로 지정하는 메소드
- 다른 javascript플러그인을 사용 시 특수문자 $변수를 중복되어 발생하는 에러방지를 위해
- 사용하기도 한다.

변수명을 $대신 사용

var 변수명 = $.noConflict();

클래스 / 속성 설정

jQuer class 추가
addClass()
- 선택자에 의해 선택된 요소에 클래스를 추가하는 메소드
1.
$(‘s’).addClass(“클래스이름”);
//클래스를 여러 개 추가는 띄어쓰기로 구분
2. $(‘s’).addClass(function(n){
인자는 선택된 요소들의 번호;
return 값; // 리턴된 값을 클래스로 추가
});

removeClass()
- 선택자에 의해 선택된 요소에 클래스를 삭제하는 메소드
1.
$(‘s’).removeClass(“클래스이름”);
//클래스를 여러 개 추가는 띄어쓰기로 구분
2. $(‘s’).removeClass(function(n){
인자는 선택된 요소들의 번호;
return 값; //리턴된 값과 일치하는 클래스삭제
});

toggleClass()
- 선택된 요소에 class가 있으면 삭제하고 없으면 추가하는 메소드
1.
$(‘s’).toggleClass(“클래스이름”);
// 클래스를 여러 개 추가는 띄어쓰기로 구분
2.
$(‘s’).toggleClass(‘클래스명’, [function(index,curclass){ }],[true|false]);
-> true : 추가만, false : 삭제만

attr()
- 선택자에 의해 선택퇸 요소에 속성의 속성값 확인,속성값 변경하는 메소드
1.
$(‘s’).attr(“속성명”);
// 속성명의 속성값을 리턴
2.
$(‘s’).attr(“속성명”,”속성값”); // 선택자의 속성과 속성값을 추가
3.
$(‘s’).attr(“속성명”, function(index, value){ });
// index : 선택된 요소 set의 index값, value : 현재 값
4.
$(‘s’).attr({ 속성명:”속성값”,속성명:”속성값” …… });
// 다중으로 속성값 설정시 사용, 객체사용 가능

removeAttr()
- 선택자에 의해 선택된 요소에 속성을 제거하는 메소드
1.
$(‘s’).removeAttr(“속성명”);
//속성명의 속성을 제거, 여러개일 경우 띄어쓰기 사용
css()
- 선택자에 의해 선택된 요소의 속성값을 가져오거나 설정하는 메소드
-> 단축속성설정(예 : border, background) 제대로 지원 하지 않고 브라우저별 상이하다.
1.
$(‘s’).css(“속성명”);
//속성명의 속성값을 리턴
2.
$(‘s’).css(“속성명”,”속성값”); //속성명의 속성값을 설정
3.
$(‘s’).css(“속성명”, function(index, 현재값) { } );
//함수에서 리턴되는 값으로 속성을 설정
4.
$(‘s’).css({오브젝트}); //오브젝트에서 설정한 다중 속성을 설정

Content 설정

jQuer content 추가

html()
- 선택된 요소의 conten영역(innerHTML/텍스트노드)을 리턴/ 설정하는 메소드,
html태그를 태그로 인식
- 리턴 시 첫번째 요소 텍스트노드 리턴/ 전체 요소 리턴 시 함수 사용
1.
$(‘s’).html();
// 선택된 요소의 첫번째 텍스트 노드를 리턴
2.
$(‘s’).html(“text노드 내용”); // 선택된 요소의 text노드 내용을 대입
3.
$(‘s’).html(function(index, 현재값) { } );

text()
- 선택퇸 요소의 conten영역(innerHTML/텍스트노드)을 리턴/설정하는 메소드,
html태그를 문자로 인식
- 리턴 시 전체 요소 텍스트 노드를 리턴
1.
$(‘s’).text();
//선택된 요소의 모든 텍스트 노드를 리턴
2.
$(‘s’).text(“text노드 내용”); //선택된 요소의 text노드 내용을 대입
3.
$(‘s’).text(function(index, 현재값) { } );

객체 생성 및 제거

jQuer 객체 생성
문서객체 생성방법

jQuer 객체 생성/ 이동
객체 생성된 객체 추가/이동
- html내부에 생성한 요소를 추가하는 메소드

jQuer 객체복제
clone 메소드
- html내부에 있는 요소를 복사하는 메소드
$(‘태그명’).clone([true | false]).appendTo(“추가될위치”);
// 태그명의 태그를 복사하여 추가될 위치에 넣기
// 인자값 이벤트 핸들러까지 복사할지 여부까지

jQuer 객체제거
document에 있는 객체 제거
- html내부에 요소객체를 제거하는 메소드

순회(탐색) 메소드(Traversing)

filtering 메소드
- 선택자로 지정한 객체를 기준으로 객체 그룹에서 위치를 기준으로 객체 선택하는 메소드

Ancestors 메소드
- 선택된 요소의 상위 요소들을 선택할 수 있는 메소드

Descendants 메소드
- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드

Sideways 메소드
- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드

Sideways 메소드

요소가 있는지 찾는 메소드
- 선택자로 지정된 범위에 특정한 요소가 존재하는지 찾을 때 사용하는 메소드

jQuery란

- 존레식에 의해 개발된 경량 javascript라이브러리
- Write Less Do More(보다 간단히 많은 것을)을 모토로 복잡했던 코드를 손쉽게 구현.
-> DOM과 관련된 처리 쉽게 구현
-> 일관된 이벤트 연결을 쉽게 구현
-> 시각적 효과를 쉽게 구현
-> Ajax 애플리케이션을 쉽게 개발
- 애니메이션 기능, Ajax통신, 이벤트 처리 등 폭넓게 지원
- jQuery플러그인을 통해 차트 작성, 슬라이드쇼, 엑셀같은 테이블도 간단한 코드로 구현가능

jQuery연결

- CDN(Content Delivery Network)을 통한 연결
-> 온라인으로 js파일을 불러와서 실행
- 파일 다운로드 연결(오프라인에서 사용하는 경우)
-> jQuery홈페이지에서 최신버전 js파일을 다운로드

<script type=‘text/javascript’
src=‘http://code.jquery.com/jquery-버전.js’></script>

최신버전사용 : jqeury-latest.min.js / jqeury-latest.js
이전과 호환이 안되는 경우가 있어 버전에 유의

jQuery시작
$ / jquery(document).ready()
- jQuery를 사용하는 웹 페이지 시작코드 $ 또는 jquery사용
- Window.load속성과 같은 개념의 메소드
- 페이지 내용을 로드한 후 ready메소드 실행
<script>
$(document).ready(function(){
});
또는 축약형으로
$(function(){
});
</script>

jQuery시작
기본형태

선택자
메소드명
속성
속성값
선택자의 종류
https://www.w3schools.com/jquery/sel_attribute_contains_value.asp 참조

DragAndDrop

• 마우스를 이용하여 파일이나 데이터를 애플리케이션 간에 전달하는 기능
• 특히 웹 애플리케이션에서는 화면상에 나타나는 요소를 옮기거나 웹 브라우저와 다른 웹 브라우저 간의 자료를 전달하기 위해 사용됨
• 끌기 할 요소에 draggable 속성과 끌기 관련 이벤트인 dragstart, dragend, drag 이벤트 처리
• 놓기 영역 요소에는 dragenter, dragover, dragleave 이벤트 처리
• 놓기 영역에 요소를 끌어다 놓을 경우 drop 이벤트 발생

끌기 이벤트

• dragstart : 요소를 끌기 시작했을 때 발생
• drag : 요소를 끌기 도중에 발생
• dragend : 요소를 끌기 끝났을 때 발생

    <div id="imgs">
        <!-- 기본 값은 draggable="true" -->
        <img id="img1" class="image" src="../resources/images/pikachu.png" draggable="false">
        <img id="img2" class="image" src="../resources/images/pikachu.png" draggable="true">
    </div>
    <div id="div1" class="div"></div>
    <script>
        // img 2개를 감싸는 div
        let src = document.getElementById('imgs');
        // 결과 출력용 div
        let div1 = document.getElementById('div1');
        // drag를 하고 있으면 계속 drag 이벤트가 호출 되므로
        // 이를 막기 위해 한 번만 호출 되도록 변수로 컨트롤
        let isDragging;

        // src에 dragstart 이벤트가 일어났을 때
        src.ondragstart = function(e){
            div1.insertAdjacentHTML('beforeend', 'dragstart : ' + e.target.id + "<br>");
            isDragging = false;
        }

        // src에 drag 이벤트가 일어났을 때
        src.ondrag = function(e){
            if(!isDragging){
                div1.insertAdjacentHTML('beforeend', 'drag : ' + e.target.id + "<br>");
                isDragging = true;
            }
        }

        // src에 dragend 이벤트가 일어났을 때
        src.ondragend = function(e){
            div1.insertAdjacentHTML('beforeend', 'dragend : ' + e.target.id + "<br>");
        }
    </script>

놓기 이벤트

• dragenter : 끌기한 요소가 놓기 영역으로 들어왔을 때 발생
• dragover : 끌기한 요소가 놓기 영역에 있을 때 발생
• dragleave : 끌기한 요소가 놓기 영역을 떠날 때 발생
• drop : 끌기한 요소를 놓기할 때 발생

    <img id="img3" class="image" src="../resources/images/pikachu.png">
    <div id="div2" class="div"></div>
    <script>
        // 올려놓을 대상 div
        let target = document.getElementById('div2');
        // dragover를 하고 있으면 계속해서 이벤트가 호출 되므로 막기 위한 변수
        let isDraggingOver;
        
        // target에 dragenter 이벤트가 발생 했을 때
        target.ondragenter = function(e) {
            target.insertAdjacentHTML('beforeend', 'dragenter : ' + e.target.id + "<br>");
            isDraggingOver = false;
        }

        // target에 dragover 이벤트가 발생 했을 때
        target.ondragover = function(e) {
            // HTML 요소들의 기본 값은 드롭을 받아들이지 않게 되어있어
            // 드롭이 가능하도록 설정하려면 이벤트 객체의 preventDefault() 
            // 메소드를 호출해야 함 - 기본 값 제거
            e.preventDefault();
            // => 이 코드가 없으면 놓기 처리를 했을 때 drop 대신 leave 이벤트가 발생하므로
            //    drop 이벤트를 발생 시키기 위한 장치

            if(!isDraggingOver){
                target.insertAdjacentHTML('beforeend', 'dragover : ' + e.target.id + "<br>");
                isDraggingOver = true;
            }
        }

        // target에 dragleave 이벤트가 발생 했을 때
        target.ondragleave = function(e) {
            target.insertAdjacentHTML('beforeend', 'dragleave : ' + e.target.id + "<br>");
        }

        // target에 drop 이벤트가 발생 했을 때
        target.ondrop = function(e) {
            target.insertAdjacentHTML('beforeend', 'drop : ' + e.target.id + "<br>");
        }
    </script>

File Drag And Drop

        <span id="droplabel">파일을 여기에 올려 놓으세요</span>
        <br>
        <a id="download" href="#">download file</a>
    </div>
    <script>
        let dropbox = document.getElementById('dropbox');

        // drop 이벤트 발생을 위해 div의 dragover 이벤트에 기본 이벤트 제거 호출
        dropbox.addEventListener("dragover", () => event.preventDefault());

        // drop 이벤트 발생 시 이벤트 핸들러 할당
        dropbox.addEventListener("drop", drop);

        function drop(event){
            // window에 파일 drop이 일어나면 새 창이 뜨는 것 방지
            event.preventDefault();
            console.log(event);
            let files = event.dataTransfer.files;
            console.log(files);

            handleFiles(files);

        }

        function handleFiles(files) {
            let file = files[0];

            // 파일명으로 span 태그 내용 변경
            document.getElementById("droplabel").innerHTML = file.name + "이 올라갔습니다.";

            // FileReader 객체 생성
            let reader = new FileReader();
            // 파일을 읽는 작업
            reader.readAsDataURL(file);
            // 정상적으로 읽었을 경우 수행 되는 onload 이벤트 핸들러
            reader.onload = function(){
                let a = document.getElementById('download');
                a.download = file.name;
                a.href = reader.result;
            };
        }




    </script>

File API

• FileReader 객체는 File 또는 Blob 객체를 이용해 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 함
• File 객체는 다음과 같은 것 등에서 얻는다
• (1) input 태그를 이용하여 유저가 선택한 파일들의 결과로 반환 된 FileList 객체
• (2) Drag And Drop으로 반환 된 DataTransfer 객체

텍스트 파일 프리뷰

• 읽어들이기에 성공 했을 때 호출 되는 이벤트 핸들러 정의 : 변수.onload = function( ) {

    <h3>텍스트 파일 프리뷰</h3>
    <input type="file" id="txtfile">
    <pre id="txtArea">텍스트 파일 내용 출력 영역</pre>
    <script>
        // 파일 첨부 태그에 변화가 있을 때
        document.getElementById('txtfile').addEventListener('change', function(){
            console.log(this);
            console.log(this.files);
            console.log(this.files[0]);

            // 만약 txtfile에 파일이 존재한다면
            if(this.files && this.files[0]) {
                // FileReader 객체 생성
                let reader = new FileReader();
                // 텍스트 파일로 읽기
                reader.readAsText(this.files[0]);
                // 읽어들이기에 성공 했을 때 호출 되는 이벤트 핸들러 정의
                reader.onload = function(){
                    console.log(reader.result);
                    // txtArea에 읽어온 파일의 컨텐츠 넣기, result : 파일의 컨텐츠
                    document.getElementById('txtArea').innerHTML = reader.result;
                };
            }
        });
    </script>

이미지 파일 프리뷰

• readAsDataURL([array]) : 파일 내용을 읽어들여 dataURL 형식의 문자열로 설정
                  

    <h3>이미지 파일 프리뷰</h3>
    <input type="file" id="imgfile">
    <div id="imgArea"></div>
    <script>
        document.getElementById('imgfile').addEventListener('change', function(){
            if(this.files && this.files[0]) {
                let reader = new FileReader();
                // 파일 내용을 읽어들여 dataURL 형식의 문자열로 설정
                reader.readAsDataURL(this.files[0]);
                reader.onload = function() {
                    console.log(reader.result);
                    document.getElementById('imgArea').innerHTML
                    = "<img src='" + reader.result + "'>";
                }
            }
        });
    </script>

텍스트 파일로 다운로드

• Blob(Binary Large Object) : 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룸
• a 태그의 download 속성은 클릭 시 href 속성의 리소스를 다운로드하게 함

    <textarea id="txt" cols="100" rows="10" style="resize:none;"></textarea>
    <br>
    <button id="test1">텍스트 파일 다운로드</button>
    <script>
        document.getElementById('test1').addEventListener('click', function(){
            // a 태그의 download 속성은 클릭 시 href 속성의 리소스를 다운로드하게 함
            let link = document.createElement('a'); // a태그 생성
            link.download = "txtfile.txt";          // download 속성 설정 및 파일명 설정

            // Blob(Binary Large Object)
            // : 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룸
            //   File 객체는 Blob 객체를 상속
            // new Blob([문자열 또는 이진데이터], option)와 같이 생성
            // textarea에 작성 된 문자열을 text 타입으로 하여 blob 객체를 생성
            let blob = new Blob([document.getElementById('txt').value], {type:'text/plain'});

            // FileReader 객체 생성
            let reader = new FileReader();
            // blob을 base64로 변환하여 읽기 설정
            // (8비트 이진 데이터를 64진법으로 변환하는 인코딩 기법)
            reader.readAsDataURL(blob);

            // 읽어들이기에 성공했을 때 호출 되는 이벤트 핸들러
            reader.onload = function(){
                // a 태그의 href 속성에 읽어온 data url 설정
                link.href = reader.result;
                // 링크 클릭 -> 자동 다운로드
                link.click();
            };
        });
    </script>

geolocation

위치 정보 API를 사용하기 위해 navigator.geolocation 내장 객체를 이용해야 함

geolocation 지원 여부 확인

    <button id="btn1">geolocation navigator</button>
    <script>
        document.getElementById('btn1').addEventListener('click', supportGeolocation);

        function supportGeolocation(){
            if(window.navigator.geolocation)
                alert('geolocation을 지원합니다.');
            else
                alert('geolocation을 지원하지 않습니다.');
        }
    </script>

위도/경도 확인

    <div class="area" id="comment"></div>
    <button id="btn2">위치 정보 확인</button>
    <script>
        document.getElementById('btn2').addEventListener('click', getGeolocation);

        function getGeolocation(){
            if(window.navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showPosition, handleError);
            } else {
                document.getElementById('comment').innerHTML = 'geolocation을 
                지원하지 않는 브라우저입니다.';
            }
        }

        // successCallback
        function showPosition(position){
            document.getElementById('comment').innerHTML 
            = '위도 : ' + position.coords.latitude + "<br>경도 : " + position.coords.longitude;
        }

        // errorCallback
        function handleError(error){
            // error.code
            if(error.code === error.PERMISSION_DENIED){
                alert('사용자가 위치 정보에 대한 접근을 막은 경우');
            }
            else if(error.code === error.POSITION_UNAVAILABLE){
                alert('네트워크 또는 GPS에 연결할 수 없는 경우');
            }
            else if(error.code === error.TIMEOUT) {
                alert('사용자의 위치 정보를 계산하는데 시간이 초과한 경우');
            }
            else if(error.code === error.UNKNOWN_ERROR) {
                alert('그 외 알수 없는 문제가 생긴 경우');
            }
        }
    </script>

    <style>
        .area {
            width : 500px;
            min-height: 100px;
            border : 1px solid black;
        }
    </style>

웹 스토리지

• HTML5 이전에는 응용 프로그램이 데이터를 서버에 요청할 때마다 쿠키(cookie)에 정보를 저장함
• 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있음
• 이 정보는 절대 서버로 전송되지 않아 <b>사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장 할 수 있도록 함

웹 스토리지 종류

(1) localStorage

• 보관 기한이 없는 데이터를 저장함
• 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장 된 데이터는 사라지지 않음

(2) sessionStorage

• 하나의 세션만을 위한 데이터를 저장함
• 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장 된 데이터는 사라짐

        // 키-값 쌍을 보관함(키는 무조건 문자열)
        // localStorage setItem
        localStorage.academy = '국립유치원';
        localStorage['class'] = '햇님반';
        localStorage.setItem('teacher', '햇님이');

        // 키에 해당하는 값을 받아옴
        // localStorage getItem
        console.log('localStorage academy : ' + localStorage.academy);
        console.log('localStorage class : ' + localStorage['class']);
        console.log('localStorage teacher : ' + localStorage.getItem('teacher'));

        // sessionStorage도 동일한 메소드 사용
        // sessionStorage setItem
        sessionStorage.loginUser = '별님이';
        sessionStorage['userId'] = 'star';
        sessionStorage.setItem('loginDate', new Date());

        // 키에 해당하는 값을 받아옴
        // sessionStorage getItem
        console.log('sessionStorage loginUser : ' + sessionStorage.loginUser);
        console.log('sessionStorage userId : ' + sessionStorage['userId']);
        console.log('sessionStorage loginDate : ' + sessionStorage.getItem('loginDate'));

    <button id="removeItem">일부 데이터 삭제</button>
    <button id="clearItem">전체 데이터 삭제</button>
    <script>
        document.getElementById('removeItem').addEventListener('click', function(){
            // localStorage에서 class 데이터 삭제
            localStorage.removeItem('class');
            // sessionStorage에서 userId 데이터 삭제
            sessionStorage.removeItem('userId');
        });

        document.getElementById('clearItem').addEventListener('click', function(){
            // localStorage에서 전체 데이터 삭제
            localStorage.clear();
            // sessionStorage에서 전체 데이터 삭제
            sessionStorage.clear();
        });
    </script>

cookie

브라우저에 저장 되는 작은 크기의 문자열로 HTTP 프로토콜의 일부

HTTP(Hypertext Transfer Protocol) 

인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜

프로토콜

▶ 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고 받기 위해 정의
▶ 쿠키는 주로 웹 서버에 의해 만들어지며 서버가 HTTP 응답 헤더의 set-cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장함
▶ 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달

Web Server

▶HTTP를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)을 전송해주는 서비스 프로그램
▶쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰임
▶사용자가 로그인하면 서버는 HTTP 응답 헤더의 set-cookie에 담긴 세션 식별자 정보를 사용해 쿠키를 설정
▶사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP cookie 헤더에 인증 정보가 담긴 고유값(세션 식별자)을 함께 실어 서버에 요청을 보냄
▶서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별
▶document.cookie 프로퍼티를 이용하면 브라우저에서도 쿠키에 접근할 수 있음

쿠키 읽기

• document.cookie는 name=value 쌍으로 구성되어 있음
• 각 쌍은 ;로 구분하며 쌍 하나는 하나의 독립 된 쿠키
•  ;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있음

쿠키 쓰기

• document.cookie에 직접 값을 쓸 수 있으며 document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신
• 다른 쿠키의 값은 변경되지 않음
• 쿠키의 이름과 값에는 특별한 제약이 없기 때문에 모든 글자가 허용되지만 형식의 유효성을 일관성 있게 유지하기 위해 반드시 내장함수 encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리해야 함
• encodeURIComponent로 인코딩 한 이후의 name=value 쌍은 4KB를 넘을 수 없음
• 도메인 하나 당 저장할 수 있는 쿠키의 개수는 20여개 정도로 한정

    <button id="test1">쿠키 읽기</button>
    <button id="test2">쿠키 쓰기</button>
    <button id="test3">쿠키 갱신</button>
    <button id="test4">인코딩 처리 쿠키 쓰기</button>
    <script>    
        document.getElementById('test1').addEventListener('click', function(){
            console.log(document.cookie);
        });

        document.getElementById('test2').addEventListener('click', function(){
            document.cookie = "test=cookie";
            document.cookie = "user=sooyeon";
        });

        document.getElementById('test3').addEventListener('click', function(){
            document.cookie = "user=lim";
        });

        document.getElementById('test4').addEventListener('click', function(){
            let name = 'my name';
            let value = 'Lim sooyeon;
            document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        });
    </script>

expires, max-age 옵션

• expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제 됨(세션 쿠키)
• expires나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제 되지 않음
• 브라우저는 설정 된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 되면 쿠키를 자동으로 삭제
• 쿠키의 유효일자는 반드시 GMT 포맷으로 설정해야 하며 date.toUTCString을 사용하면 해당 포맷을 쉽게 변경 가능
• max-age 옵션을 사용하면 보다 간편하게 초 단위로 만료 기간 설정 가능

    <button id="test5">쿠키 읽기</button>
    <button id="test6">하루 유효 쿠키 쓰기</button>
    <button id="test7">5초 유효 쿠키 쓰기</button>
    <script>
        document.getElementById('test5').addEventListener('click', function(){
            console.log(document.cookie);
        });

        document.getElementById('test6').addEventListener('click', function(){
            // 지금부터 하루 후
            let date = new Date(Date.now() + (24*60*60*1000));
            date = date.toUTCString();
            console.log(date);
            document.cookie = "test=tomorrow; expires=" + date;
        });

        document.getElementById('test7').addEventListener('click', function(){
            // 만료 기간을 5초로 설정하여 쿠키를 5초 뒤 삭제
            document.cookie = "test=5sec; max-age=5";
        });
    </script>