728x90
반응형
728x90
반응형

HTTP(HyperText Transport Protocol)

 웹 서버와 클라이언트 간의 문서를 교환하기 위한 통신 규약

 HTTP는 웹에서만 사용하는 protocol로 TCP/IP 기반으로 서버와 클라이언트 간의 요청과 응답을 전송


 HTTP 0.9 -> HTTP 1.0 -> HTTP 1.1
 HTTP 0.9 : 읽기 전용. GET 요청만 가능했습니다. 
 HTTP 1.0 : POST, HEAD 가 추가 되었습니다. 즉 클라이언트에서 서버로의  데이터 전송도 가능해 졌습니다. 
 HTTP 1.1(최신 버전) : PUT,DELETE,TRACE 등 추가 되었습니다. 클라이언트는 서버로의 데이터 전송 뿐만 아니라 변경, 삭제 까지 가능하게 되었습니다.


클라이언트 요청[편집]

GET /restapi/v1.0 HTTP/1.1
Accept: application/json
Authorization: Bearer UExBMDFUMDRQV1MwMnzpdvtYYNWMSJ7CL8h0zM6q6a9ntw

서버 응답[편집]

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Connection: close

<html>
<head>
  <title>An Example Page</title>
</head>
<body>
  Hello World, this is a very simple HTML document.
</body>
</html>

응답 코드[편집]

 HTTP 상태 코드 문서를 참고하십시오.

클라이언트가 서버에 접속하여 어떠한 요청을 하면, 서버는 세 자리 수로 된 응답 코드와 함께 응답한다. HTTP의 응답 코드는 다음과 같다.

코드메시지설명
1XXInformational(정보)정보 교환.
100Continue클라이언트로부터 일부 요청을 받았으니 나머지 요청 정보를 계속 보내주길 바람. (HTTP 1.1에서 처음 등장)
101Switching Protocols서버는 클라이언트의 요청대로 Upgrade 헤더를 따라 다른 프로토콜로 바꿀 것임. (HTTP 1.1에서 처음 등장)
2XXSuccess(성공)데이터 전송이 성공적으로 이루어졌거나, 이해되었거나, 수락되었음.
200OK오류 없이 전송 성공.
202Accepted서버가 클라이언트의 요청을 수락함.
203Non-authoritavive Information서버가 클라이언트 요구중 일부만 전송.
204Non Content클라이언트의 요구를 처리했으나 전송할 데이터가 없음.
205Reset Content새 문서 없음. 하지만 브라우저는 문서 창을 리셋해야 함. (브라우저가 CGI 폼 필드를 전부 지우도록 할 때 사용됨.) (HTTP 1.1에서 처음 등장)
206Partial Content클라이언트가 Range 헤더와 함께 요청의 일부분을 보냈고 서버는 이를 수행했음. (HTTP 1.1에서 처음 등장)
3XXRedirection(방향 바꿈)자료의 위치가 바뀌었음.
300Multiple Choices최근에 옮겨진 데이터를 요청.
301Moved Permanently요구한 데이터를 변경된 URL에서 찾았음.
302Moved Permanently요구한 데이터가 변경된 URL에 있음을 명시. 301과 비슷하지만 새 URL은 임시 저장 장소로 해석됨.

[8]

303See Other요구한 데이터를 변경하지 않았기 때문에 문제가 있음.
304Not modified클라이언트의 캐시에 이 문서가 저장되었고 선택적인 요청에 의해 수행됨 (보통 지정된 날짜보다 더 나중의 문서만을 보여주도록 하는 If-Modified-Since 헤더의 경우). [9]
305Use Proxy요청된 문서는 Location 헤더에 나열된 프록시를 통해 추출되어야 함. (HTTP 1.1에서 처음 등장)
307Temporary Redirect자료가 임시적으로 옮겨짐.
4XXClient Error(클라이언트 오류)클라이언트 측의 오류. 주소를 잘못 입력하였거나 요청이 잘못 되었음.
400Bad Request요청 실패. 문법상 오류가 있어서 서버가 요청사항을 이해하지 못함, [10]
401.1Unauthorized권한 없음 (접속실패). 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지 않음. [11]
401.2Unauthorized권한 없음 (서버설정으로 인한 접속 실패). 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지않음. [12]
401.3Unauthorized권한 없음 (자원에 대한 ACL에 기인한 권한 없음). 클라이언트가 특정 자료에 접근할 수 없음. [13]
401.4Unauthorized권한 없음 (필터에 의한 권한 부여 실패). 서버에 접속하는 사용자들을 확인하기 위해 설치한 필터 프로그램이 있음. [14]
401.5Unauthorized권한 없음 (ISA PI/CGI 애플리케이션에 의한 권한부여 실패). 이용하려는 서버의 주소에 ISA PI나 CGI프로그램이 설치되어 있고, 권한을 부여할 수 없음. [15]
402Payment Required예약됨.
403.1Forbidden금지 (수행접근 금지). 수행시키지 못하도록 되어있는 디렉터리 내의 실행 파일을 수행하려고 하였음.
403.2Forbidden금지 (읽기 접근 금지). 접근한 디렉터리에 가용한 기본 페이지가 없음. [16]
403.4Forbidden금지 (SSL 필요함). 접근하려는 페이지가 SSL로 보안유지 되고 있음. [17]
403.5Forbidden금지 (SSL 128필요함). 페이지가 128비트의 SSL로 보안유지 되고 있음. [18]
403.6Forbidden금지 (IP 주소 거부됨). 사용자가 허용되지 않은 IP로부터 접근함.
403.7Forbidden금지 (클라이언트 확인 필요). 클라이언트가 자료에 접근할 수 있는지 확인 요함. [19]
403.8Forbidden금지 (사이트 접근 거부됨). 서버가 요청사항을 수행하고 있지 않거나, 해당 사이트에 접근하는 것이 허락되지 않음.
403.9Forbidden접근금지 (연결된 사용자수 과다). 서버가 BUSY 상태에 있어서 요청을 수행할 수 없음.
403.10Forbidden접근금지 (설정이 확실 하지 않음).
403.11Forbidden접근금지 (패스워드 변경됨). 잘못된 암호를 입력했음.
403.12Forbidden접근금지(Mapper 접근 금지됨). 클라이언트 인증용 맵이 해당 웹 사이트에 접근하는 것이 거부됨.
404Not Found문서를 찾을 수 없음. 서버가 요청한 파일이나 스크립트를 찾지 못함.
405Method not allowed메서드 허용 안됨. 요청 내용에 명시된 메서드를 수행하기 위해 해당 자원의 이용이 허용되지 않음. [20]
406Not Acceptable받아들일 수 없음. [21]
407Proxy Authentication Required프록시 서버의 인증이 필요함. [22]
408Request timeout요청 시간이 지남.
409Conflict요청을 처리하는 데 문제가 있음. 보통 PUT 요청과 관계가 있다. 보통 다른 버전의 파일을 업로드할 경우 발생함. (HTTP 1.1에서 새로 등장)
410Gone영구적으로 사용할 수 없음.
411Length Required클라이언트가 헤더에 Content-Length를 포함하지 않으면 서버가 처리할 수 없음.(HTTP 1.1에서 새로 등장)
412Precondition Failed선결조건 실패. 헤더에 하나 이상의 선결조건을 서버에서 충족시킬 수 없음. [23]
413Request entity too large요청된 문서가 현재 서버가 다룰 수 있는 크기보다 큼. [24] (HTTP 1.1에서 새로 등장)
414Request-URI too long요청한 URI가 너무 김. [25]
415Unsupported media type요청이 알려지지 않은 형태임. (HTTP 1.1에서 새로 등장)
5XXServer Error(서버 오류)서버 측의 오류로 올바른 요청을 처리할 수 없음.
500Internal Server Error서버 내부 오류. [26]
501Not Implemented필요한 기능이 서버에 설치되지 않았음. [27]
502Bad gateway게이트웨이 상태 나쁨. [28]
503Service Unavailable외부 서비스가 죽었거나 현재 멈춘 상태 또는 이용할 수 없는 서비스. [29]
504Gateway timeout프록시나 게이트웨이의 역할을 하는 서버에서 볼 수 있음. 초기 서버가 원격 서버로부터 응답을 받을 수 없음. (HTTP 1.1에서 새로 등장)
505HTTP Version Not Supported해당 HTTP 버전을 지원하지 않음.

HTTP 메소드

 GET, ,HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH



728x90
반응형

'프로그래밍 > Web' 카테고리의 다른 글

아파치 버전 확인하는 방법  (0) 2022.10.21
JSP 처리과정!!  (0) 2017.11.30
WEB과 WAS의 차이(아파치와 톰캣의 차이에 대해 아는가)  (2) 2017.11.15
서버와 클라이언트 생활코딩 강의  (0) 2017.07.14
728x90
반응형

이벤트타입

이벤트 타입이라는 것은 이벤트의 종류

 -폼(submit, change, blur, focus)

*submit : 폼의 정보를 서버로 전송하는 명령

*change : 폼 컨트롤의 값이 변경되었을 때 사용

*blur, focus : focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트

 -문서 로딩

console.log(t); // null 을 출력, 스크립트 호출 시 id가 ‘target’이 존재하지 않기 때문

<head>

    <script>

        window.addEventListener('load', function(){ //

            var t = document.getElementById('target');

            console.log(t); // p#target

        })

    </script>

</head>

<body>

    <p id="target">Hello</p>

</body>

load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행되기 때문에 앱의 구동이 지연되는 부작용이 초래할 수 있습니다.

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없습니다.

실제 라이브러리 사용으로 내부적으로 알아서 채택합니다. 이벤트 타입 때문에 고민하는 경우가 없습니다. 하지만 둘의 차이는 아는 것이 중요합니다.

 -마우스

Click : 클릭했을 때 발생하는 이벤트 Dblclick : 더블클릭을 했을 때 발생하는 이벤트

Mousedown : 마우스를 누를 때 발생 Mouseup : 마우스버튼을 땔 때 발생

Mousemove : 마우스를 움직일 때 Mouseover : 마우스가 엘리먼트에 진입할 때 발생

Mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 Contextmenu : 컨텍스트 메뉴가 실행될 때 발생

키보드 조합

event.shiftKey, event.altKey, event.ctrlKey

마우스 포인터 위치 : 이벤트 객체의 clientX와 clientY를 사용

jQuery이벤트(jQuery와 none jQuery의 비교)

jQuery를 사용하지 않았을 경우의 코드 분량에 차이가 있습니다.

또한, jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 합니다. 이러한 이유로 jQuery와 같은 라이브러리를 사용합니다.

-on API 사용법(On은 jQuery에서 가장 중요한 API)

selector 인자

<ul>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JavaScript</a></li>

</ul>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>

    $('ul').on('click','a, li', function(event){

        console.log(this.tagName); // A LI

    })

</script>

두 번째 인자에 ‘a li’ 태그를 필터링 했기 때문에 ul태그에 대한 이벤트가 발생하는 것이 아님

Late binding(존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 기능)

다중 바인딩(하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법)

이벤트 제거(off를 사용)

<input type="text" id="target"></textarea>

<input id="remove"  type="button" value="remove" />

<p id="status"></p>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>

  var handler = function(e){

    $('#status').text(e.type+Math.random());

  };

  $('#target').on('focus blur', handler) // focus이벤트만 삭제

  $(‘#target’).on(‘focus’, function(e){

  alert(1);

)

  $('#remove').on('click' , function(e){

    $('#target').off('focus', handler);

  })

</script>

 

네트워크통신

자바스크립트를 이용해서 웹브라우저의 통신 기능

Ajax(페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 것)

Asynchronous JavaScript And XML : 비동기적 자바스크립트와 XML

비동기적으로 자바스크립트를 이용해 서버와 통신하는 방법

if(통신완료 && 통신성공) = if(xhr.readyState && xhr.status)

POST방식

JSON(서버와 클라이언트 간의 데이터를 주고 받는 형식)

JavaScript Object Notation : 자바스크립트에서 객체를 만들 때 사용하는 표현식

JSON API

*JSON.parse() : 인자로 전달된 문자열을 자바스크립트의 데이터로 변환

*JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환

Ajax와 JSON

Json은 모든 언어에서 객체와 배열로 사용할 수 있는 특징이 있음

JSON의 적용

var tzs = JSON.parse(_tzs); //자바스크립트의 데이터로 변환

jQueryAjax

브라우저간의 차이(크로스 브라우징)를 jQuery가 알아서 해결합니다.

 

http://api.jquery.com/category/ajax/

data : 서버로 데이터를 전송할 때 이 옵션을 사용

dataType : 서버 측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정, 값으로 올 수 있는 것은 xml, json, script, html으로 형식을 지정하지 않으면 jQuery가 알아서 판단합니다.

success : 성공했을 때 호출할 콜백을 지정, Function( PlainObject data, String textStatus, jqXHR jqXHR )

type : 데이터를 전송하는 방법을 지정, get, post를 사용

serialize() : select, texarea, text, checkbox 등의 값을 리턴

JSON처리방식



출처 : 생활코딩 강의

728x90
반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

WEB2 - JavaScript : 제어할 태그 선택하기 ~ 배열과 반복문의 활용  (0) 2017.12.15
WEB2 - JavaScript : HTML과 JavaScript만남~ CSS기초  (0) 2017.12.09
웹 브라우저 자바스크립트 : 이벤트(Event)  (0) 2017.11.30
웹 브라우저 자바스크립트 : document, text 객체, 문서의 기하하적 특성  (2) 2017.11.29
웹 브라우저 자바스크립트 : DOM(Document Object Model)2  (1) 2017.11.28
728x90
반응형

값으로서의 함수와 콜백(함수의 용도)

자바스크립트에서도 함수는 객체입니다. 즉, 함수 자체가 값이 될 수 있습니다.

var a = function(){ } a라는 변수에 함수가 담길 수 있습니다.


객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.

 

함수는 인자로 전달될 수 있고 리턴값(반환값)으로도 사용 가능합니다.

 

함수는 배열의 값으로 사용할 수 있습니다.

var process = [

    function(input){ return input + 10;},   //input[0] = 11

    function(input){ return input * input;}, //input[1] = 121

    function(input){ return input / 2;}    //input[2] = 60.5

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

 

콜백

function sortNumber(a,b){

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 됩니다.

    return b-a;

}

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수란 ? sort 기본적인 동작 방법을 변경할 수 있습니다. 즉 값으로서 함수를 사용할 수 있기 때문에 오리지널 함수의 동작방법을 값을 전달하는 것을 통해 완전히 바꿀 수 있는 것입니다.

콜백이 가능한 이유는 자바스크립트에서 함수가 값이기 때문에 콜백이 가능합니다.


비동기 처리


콜백은 비동기처리에서도 유용하게 사용됩니다. 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다.

대표적인 예로 AJAX(Asynchronous Javascript And XML) : 자바스크립트를 이용해 html코드를 이용해 화면에 출력

클릭 시 웹 페이지가 변경되지 않고 서버와 웹 브라우저가 내부적으로 조용히 통신하는 기법

Ajax는 웹이 단순히 문서에서 벗어나 이런 동작을 할 수 있는 애플리케이션으로 발전하게 한 단서입니다.


클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것입니다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용됩니다.



function outter(){

    function inner(){

        var title = 'coding everybody';

        alert(title);

    }

    inner(); //'coding everybody' 출력

}

outter(); //'coding everybody' 출력

내부함수에서 외부함수의 지역변수에 접근 가능한 것이 클로저입니다.

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

var inner = outter();

inner(); //'coding everybody' 출력

외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다. 결과는 경고창으로 coding everybody를 출력할 것입니다.

 

private variable

객체 안의 함수가 있는 상태, 첫 번째 매개변수는 title, 매개변수는 함수 안에서 지역변수로 사용

get_title 메소드를 호출하면 title을 리턴합니다.

set_title 메소드는 _title이 title값을 변경합니다.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');


alert(ghost.get_title()); //'Ghost in the shell'

alert(matrix.get_title());//'Matrix'


ghost.set_title('공각기동대');

alert(ghost.get_title()); //'공각기동대'

alert(matrix.get_title()); //'Matrix'

ghost와 matrix는 private 변수에 객체를 담았습니다

private변수가 필요한 이유는 소프트웨어의 규모가 커질수록 많은 데이터가 존재하게 됩니다.

그 데이터를 누구나 수정 가능하다면 소프트웨어가 쉽게 망가질 수 있기 때문입니다.


출처 : 생활코딩 강의

728x90
반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 : arguments, 함수의 호출  (0) 2017.11.16
자바스크립트 JavaScript 간단한 범위에 관한 문제  (0) 2017.11.16
자바스크립트 유효범위: 전역변수와 지역변수  (0) 2017.11.12
자바스크립트 언어 소개!!  (0) 2017.11.10
jsp pageEncoding, charset 변경하는 방법!!  (0) 2017.10.24
728x90
반응형

+ Recent posts

티스토리툴바