좌충우돌 개발

2018-01-05_TIL

05 Jan 2018 | HTML

2018년 01월 04일.

부모와 자식 관계의 태그

검색어
html specification

Website = Webpages(link로 묶음)
웹페이지는 HTML로 만들어진 문서(정보)로 링크를 통해 묶여 있다.

오늘 배운 태그

\  : 공백 태그 마크업 언어로 블로그를 작성 할때 HTML 태그를 사용

<ul> : (unordered list) <li> 태그의 부모 태그(리스트를 구분할 때 사용)
<ol> : (ordered list) <li> 태그의 부모 태그
<li> : 리스트

<title> : 제목 (크롤링에서 책제목과 같이 인식한다)
<meta charset “utf-8”> : utf-8로 저장된 문서(이진코드로 저장된 파일)를 열때 브라우저가 해당 형식으로 열어서 해당 글자가 깨지지 않도록 해주는 역할

<!doctype hmtl> : HTML임을 나타내는 관용적 태그
<html> : HTML
<head> : 해드 본문을 설명하는 태그
<body> : 본문

<a href=”url” target=”_blank” title=”툴팁” > : anchor 태그 링크를 나타냄

HTTP 완벽가이드 - HTTP 메시지

04 Jan 2018 | HTTP

3장 HTTP 메시지

3.1 메시지의 흐름

  • 인바운드 : 클라이언트에서 서버
  • 아웃바운드 : 서버에서 클라이언트

3.2 메시지의 각 부분

3.2.1 메시지 문법
  • 요청 메시지 형식

    <메서드> <요청 URL> <버전>
    <헤더>
    CRLF(빈줄)
    <엔터티 본문>

  • 응답 메시지 형식

    <버전> <상태 코드> <사유 구절>
    <헤더>
    CRLF(빈줄)
    <엔터티 본문>

메서드
클라이언트 측에서 서버가 리소스에 대해 수행해주길 바라는 동작

요청 URL
요청 대상이 되는 리소스를 지칭하는 완전한 URL 혹은 URL의 경로

버전
이 메시지가 사용 중인 HTTP의 버전

상태 코드
요청 중에 무엇이 일어났는지 설명하는 세 자리의 숫자

사유 구절(reason-phrase)
숫자로 된 상태 코드의 의미를 사람이 이해할 수 있게 설명해주는 짧은 문구
상태 코드 이후부터 줄바꿈 문자열까지가 사유 구절
오로지 사람에게 잃히기 위한 목적으로 존재

헤더들
이름,콜론(:), 선택적인 공백, 값, CRLF가 순서대로 나타나는 0개 이상의 헤더들. 헤더의 목록은 빈 줄(CRLF)로 끝나 헤더 목록의 끝과 엔터티 본문의 시작을 표시한다.
엔터티 본문
엔터티 본문은 임의의 데이터 블록을 포함한다.

3.2.2 시작줄

모든 HTTP 메시지는 시작줄로 시작한다.

메서드

메서드 설명 메시지 본문이 있는가 ?
GET 서버에 어떤 문서를 가져온다 없음
HEAD 서버에서 어떤 문서에 대해 헤더만 가져온다 없음
POST 서버가 처리해야 할 데이터를 보낸다 있음
PUT 서버에 요청 메시지의 본문을 저장한다 있음
TRACE 메시지가 프록시를 거쳐 서버에 도달하는 과정을 추적한다 없음
OPTIONS 서버가 어떤 메서드를 수행할 수 있는지 확인한다 없음
DELETE 서버에서 문서를 삭제한다 없음

상태 코드
상태 코드는 클라이언트에게 무슨일이 일어났는지 알려준다

전체 범위 정의된 범위 분류
100 - 199 100-101 정보
200 - 299 200-206 성공
300 - 399 300-305 리다이렉션
400 - 499 400-415 클라이언트 에러
500 - 599 500-505 서버 에러

사유 구절

버전 정보
버전 정보는 어떤 애플리케이션이 지원하는 가장 높은 HTTP 버전을 가리킨다.
버전 번호는 버전의 각 숫자는 분리된 숫자로 다루어 진다. HTTP/2.22는 HTTP/2.3보다 높은 버전이다

3.2.3 헤더

헤더의 분류

  • 일반 헤더 : 요청과 응답 양쪽에 모두 나타날 수 있음
  • 요청 헤더 : 요청에 대한 부가 정보를 제공
  • 응답 헤더 : 응답에 대한 부가 정보를 제공
  • Entity 헤더 : 본문의 크기와 콘텐츠, 혹은 리소스 그 자체를 서술
  • 확장 헤더 : 명세에 정의되지 않은 새로운 헤더

헤더를 여러 줄로 나누기
긴 헤더 줄은 그들을 여러 줄로 쪼개서 더 읽기 좋게 만들 수 있는데, 추가 줄 앞에는 최소 하나의 스페이스 혹은 탭 문자가 와야 한다

HTTP/1.0 200 OK
Content-Type: image/gif
Content-Length: 8572
Server: Test Server
  Version 1.0

3.2.4 엔터티 본문

엔터티 본문은 HTTP 메시지의 화물이라고 할 수 있다.

3.3 메서드

3.3.1 안전한 메서드(Safe Method)

안전한 메서드를 요청 하였을 때 서버에서는 아무런 변경이 일어나지 않음을 이야기 한다.
안전한 메서드의 목적은, 서버에 어떤 영향을 줄 수 있는 안전하지 않은 메서드가 사용될 때 사용자들에게 그 사실을 알려주는 HTTP 애플리케이션을 만들 수 있도록 하는 것이다.

3.3.2 GET

서버에게 리소스를 달라고 요청하기 위해 쓰인다.

3.3.3 HEAD

GET 유사하지만 엔터티 본문을 받지 않는다.

  • 리소스를 가져오지 않고도 그에 대해 무엇인가(타입)를 알아낼 수 있다.
  • 응답의 상태 코드를 통해, 개체가 존재하는지 확인할 수 있다.
  • 헤더를 확인하여 리소스가 변경되었는지 검사할 수 있다.

서버 개발자들은 반드시 반환되는 헤더가 GET으로 얻는 것과 일치함을 보장해야 한다. 또한 HTTP/1.1준수를 위해 HEAD 메서드가 반드시 구현되어 있어야 한다.

3.3.4 PUT

PUT 메서드의 의미는, 서버가 요청의 본문을 가지고 요청 URL의 이름대로 새 문서를 만들거나, 이미 URL이 존재한다면 본문을 사용해서 교체하는 것이다.

3.3.5 POST

POST 메서드는 서버에 입력 데이터를 전송하기 위해 설계되었다.

3.3.6 TRACE

클라이언트가 어떤 요청을 할 때, 그 요청은 방화벽, 프락시, 게이트웨이등의 애플리케이션을 통과한다. TRACE 메서드는 주로 진단을 위해서 사용되며 HTTP 애플리케이션에 메서드를 다르게 처리한다. TRACE 요청을 어떻게 처리할지 는 중간 애플리케이션이 결정을 내린다.

3.3.7 OPTIONS

OPTIONS 메서드는 웹 서버에게 여러 가지 종류의 지원 범위에 대해 물어본다. 서버에게 특정 리소스에 대해 어떤 메서드가 지원되는지 물어 볼 수 있다.

3.3.8 DELETE

DELETE 메서드는 리소스 삭제를 요청한다.

2018-01-04_TIL

04 Jan 2018 | HTML

2018년 01월 04일.

잊고 있었던 HTML 문법을 상기 시키기 위해 코딩야학 3기를 시작

HTML은 정보를 표현하는 언어이다. 그럼으로 의미에 맞는 태그를 사용해야 한다.

예를 들어 <br> 나 <p>태그의 차이점 이다. <br>은 단순히 줄바꿈 태그이고 <p>태그는 단락을 나누는 태그이다.
만약 단락을 나눠야 하는 자리에 간격을 좀 더 띄우기 위해 줄바꿈 태그를 연속적으로 사용한다면 해당 문서를 분석할 때 엉뚱하게 해석할 수 있다. 물론 사람은 그렇지 않겠지만 자동화된 크롤러나 프로그램등에서 … 이 때는 CSS를 활용하여 <p>태그에 속성으로 주어 해당 간격을 띄우게 만들어 준다.

언어도 그러하지만 HTML을 사용하여 개발하는데 모든 태그를 알아야 하는 것은 아니다.
자주 사용되는 태그의 사용법을 정확히 알고 있으면 된다.

오늘 배운 태그
<br> : 줄바꿈
<p> : 단락
<img src=’’ width=”100%”> : 이미지 삽입

HTTP 완벽가이드 - URL과 리소스

03 Jan 2018 | HTTP

2장 URL과 리소스

2.1 인터넷의 리소스 탐색하기

URL의 구조 : ‘스킴://서버의위치/경로’

2.2 URL 문법

URL 스킴의 문법
<스킴>://<사용자 이름>:<비밀번호>@<호스트>:<포트>/<경로>;<파라미터>?<질의>#<프래그먼트>

컴포넌트 설명 기본값
스킴 리소스를 가져오려면 어떤 프로토콜을 사용하여 서버에 접근해야 하는지 가리킨다 없음
사용자 이름 몇몇 스킴은 리소스에 접근을 하기 위해 사용자 이름을 필요로 한다. anonymous
비밀번호 사용자의 비밀번호를 가리키며, 사용자 이름에 콜론(:)으로 이어서 기술 한다. 이메일 주소
호스트 리소스를 호스팅하는 서버의 호스트 명이나 IP 주소 없음
포트 리소스를 호스팅하는 서버가 열어 놓은 포트번호. 많은 스킴은 기본 포트를 가지고 있다 ( HTTP의 기본 포트는 80) 스킴에 따라 다름
경로 이전 컴포넌트와 빗금(/)으로 구분되어 있으며, 서버 내 리소스가 서버 어디에 있는지를 가리킨다. 경로 컴포넌트의 문법은 서버와 스킴에 따라 다르다. 없음
파라미터 특정 스킴들에서 입력 파라미터를 기술하는 용도로 사용한다. 파라미터는 이름/값을 쌍으로 가진다. 파라미터는, 다른 파라미터나 경로의 일부와 세미콜론(;)으로 구분하여 기술하며, 여러 개를 가질 수 있다. 없음
질의 스킴에서 애플리케이션(데이터베이스, 게시판, 검색엔진, 기타 인터넷 게이트웨이)에 파라미터를 전달하는데 쓰인다. 질의 컴포넌트를 작성하는데 쓰이는 공통 포맷은 없다. 이는 URL의 끝에 "?"로 구분한다. 없음
프래그먼트 리소스의 조각이나 일부분을 가르키는 이름이다. URL이 특정 객체를 가리킬 경우에 프래그먼트 필드는 서버에 전달되지 않는다. 이는 클라이언트에서만 사용한다. URL의 끝에서 "#"문자로 구분한다. 없음
2.2.1 스킴: 사용할 프로토콜

스킴은 리소스에 어떻게 접근하는지 알려주는 중요한 정보다. 이는 URL을 해석하는 애플리케이션이 어떤 프로토콜을 사용하여 리소스를 요청해야 하는지 알려준다.
스킴 컴포넌트는 알파벳으로 시작해야 하고 URL의 나머지 부분들과 첫 번째’:’문자로 구분한다. 스킴 명은 대소문자를 가리지 않는다.

2.2.2 호스트와 포트
2.2.3 사용자 이름과 비밀번호

많은 서버가 자신이 가지고 있는 데이터에 접근을 허용하기 전에 사용자 이름과 비밀번호를 요구한다

2.2.4 경로

URL의 경로 컴포넌트는 리소스가 서버의 어디에 있는지 알려준다. 해당 경로는 계층적 파일 시스템 경로와 유사한 구조를 가진다.

2.2.5 파라미터

많은 스킴이 객체에 대한 호스트 및 경로 정보만으로는 리소스를 찾지 못한다. URL의 파라미터는 애플리케이션이 서버에 정확한 요청을 하기위해 필요한 입력 파라미터를 받는데 사용한다. 이컴포넌트는 이름/값 쌍의 리스트로 URL 나머지 부분들로 부터 ‘;’문자로 구분하여 URL에 기술한다. 이를 통해 애플리케이션이 리소스에 접근하는데 필요한 어떤 추가 정보든 전달할 수 있다.

2.2.6 질의 문자열

URL의 질의 컴포넌트는 게이트웨이를 가리키는 URL의 경로 컴포넌트와 함께 전달하고 있다. 보통 게이트웨이는, 다른 애플리케이션에 접근하려고 할 때 거치는 통로라고 할 수 있다
http://www.joes-hardware.com/inventory-check.cgi?item=12731&color=blue

2.2.7 프래그먼트

HTML 같은 리소스 형식들은 본래의 수준보다 더 작게 나뉠 수 있다. 예를 들어 절이 포함된 용량이 큰 한 개의 텍스트 문서의 경우, 그 리소스에 대한 URL은 텍스트 문서 전체를 가리키겠지만, 이상적으로는 리소스 안에 있는 특정 절을 가리킬 수 있어야 한다.
리소스의 특정 부분을 가리킬 수 있도록, URL은 리소스 내의 조각을 가리킬 수 있는 프래그먼트 컴포넌트를 제공한다.
일반적으로 HTTP 서버는 객체 일부가 아닌 전체만 다루기 때문에, 클라이언트는 서버에 프래그먼트를 전달하지 않는다. 브라우저는 서버로부터 전체 리소스를 내려받은 후, 프래그먼트를 사용하여 보고자하는 리소스의 일부를 보여준다.

2.3 단축 URL

웹 클라이언트는 몇몇 단축 URL을 인식하고 사용한다. 상대 URL은 리소스 안에 있는 리소스를 간결하게 기술하는데 사용할 수 있다. 많은 브라우저가 사용자가 기억하고 있는 URL일부를 입력하면 나머지 부분을 자동으로 입력해주는 URL’자동확장’을 지원한다.

2.3.1 상대 URL

URL은 상대 URL과 절대 URL 두가지로 나뉜다. 절대 URL은 리소스에 접근하는데 필요한 모든 정보를 가지고 있다. 상대 URL은 리소스에 접근하는데 필요한 모든 정보를 얻기 위해서 기저(base)라고 하는 다른 URL을 사용해야 한다.
상대 URL은 URL을 짧게 표기하는 방식이다.

기저 URL : http://www.joes-hardware.com/tools.html
상대 URL : ./hammers.html
새로운 절대 URL : http://www.joes-hardware.com/hammer.html

상대 URL 문법에 따르면 HTML 작성자는 URL에 스킴과 호스트 그리고 다른 컴포넌트들을 모두 입력하지 않아도 된다. 그 정보는 컴포넌트가 포함된 리소스의 기저 URL에서 알아낼 수 있다.
상대 URL은 프래그먼트이거나 URL 일부다. URL을 처리하는 브라우저 같은 애플리케이션은 상대 URL간에 상호 변환을 할 수 있어야 한다.

기저 URL
변환 과정의 첫 단계는 기저 URL을 찾는 것이다. 기저 URL은 상대 URL의 기준이 된다. 그것을 가져오는 몇 가지 방법이 있다.

리소스에서 명시적으로 제공
어떤 리소스들은 기저 URL을 명확하게 기술하기도 한다. 예를 들어 HTML 문서에서는 그 안에 있는 모든 상대 URL을 변경하기 위해서 기저 URL을 가리키는 HTML 태그를 기술할 수 있다.

리소스를 포함하고 있는 기저 URL
만약 상대 URL이 기저 URL을 명시되지 않은 리소스에 포함된 경우, 해당 리소스의 URL을 기저 URL로 쓸수 있다.

기저 URL이 없는 경우
기저 URL이 없는 경우도 있다. 보통 이런 경우는 절대 URL만으로 이루어져 있다는 뜻이다. 하지만 불완전하거나 깨진 URL일 수도 있다.

상대 참조 해석하기
RFC 2396참조

2.3.2 URL 확장

호스트명 확장

히스토리 확장

2.4 안전하지 않은 문자

HTTP 완벽가이드 - HTTP 개관

03 Jan 2018 | HTTP

1. HTTP 개관

1.1 HTTP

1.2 웹 클라이언트와 서버

1.3 리소스

1.3.1 미디어타입

MIME(Multipurpose Internet Mail Extensions) : 원래는 전자 메일 시스템에서 사용되었으나 HTTP에서도 멀티미디어 콘텐츠를 기술하고 라벨을 붙이기 위해 채택

1.3.2 URI (uniform resource indentifier)

URI는 URL과 URN으로 나누어진다.

1.3.3 URL

URL은 특정 서버의 한 리소스에 대한 구체적인 위치를 서술한다

URL의 구성 요소

  • 스킴(scheme) : 리소스에 접근하기 위해 사용되는 프로토콜을 서술
  • 서버의 인터넷 주소
  • 웹서버의 리소스

오늘날 대부분의 URI는 URL이다.

1.3.4 URN (uniform resource name)

유니폼 리소스 이름 : 아직 실험 중인 상태이다.

1.4 트랜잭션

HTTP 트랜잭션은 요청 명령과 응답 결과로 구성

1.4.1 메서드

흔히 사용되는 HTTP 메서드

HTTP 메서드 설명
GET 서버에서 클라이언트로 지정한 리소스를 보내라
PUT 클라이언트에서 서버로 보낸 데이터를 지정한 이름의 리소스로 저장하라
DELETE 지정한 리소스를 서버에서 삭제하라
POST 클라이언트 데이터를 서버 게이트웨이 애플리케이션으로 보내라
HEAD 지정한 리소스에 대한 응답에서, HTTP 헤더 부분만 보내라
1.4.2 상태코드

모든 HTTP 응답 메시지는 상태 코드와 함께 반환 된다. 클라이언트에 요청 처리의 상태를 알려주는 세자리 숫자이다

흔히 사용되는 HTTP 상태 코드

HTTP 상태 코드 설명
200 문서가 바르게 반환되었다.
302 다시 보내라. 다른 곳에 가서 리소스를 가져가라
404 없음. 리소스를 찾을 수 없다.
1.4.3 웹페이지는 여러 객체로 이루어질 수 있다

애플리케이션은 보통 하나의 작업을 수행하기 위해 여러 HTTP 트랜잭션을 수행한다. 예를 들어 웹브라우저는 시각적으로 풍부한 웹페이지를 가져올 때 대량의 HTTP 트랜잭션을 수행한다. 페이지 레이아웃을 서술하는 HTML ‘뼈대’를 한 번의 트랜잭션으로 가져온 뒤, 첨부된 이미지, 그래픽 조각, 자바 애플릿 등을 가져오기 위해 추가적으로 HTTP 트랜잭션을 수행한다.

‘웹페이지’는 보통 하나의 리소스가 아닌 리소스의 모음이다

1.5 메시지

HTTP 메시지는 단순한 줄 단위의 문자열 이다.

HTTP 메시지의 구성

시작줄
요청이라면 무엇을 해야 하는지 응답이라면 무슨 일이 일어났는지 나타낸다.

헤더
시작줄 다음에는 0개 이상의 헤더 필드가 이어진다. 각 헤더 필드는 쉬운 구문분석을 위해 쌍점(:)으로 구분되어 있는 하나의 이름과 하나의 값으로 구성된다. 헤더 필드를 추가하려면 그저 한 줄을 더하기만 하면 된다. 헤더는 빈 줄로 끝난다.

본문
빈 줄 다음에는 어떤 종류의 데이터든 들어갈 수 있는 메시지 본문이 필요에 따라 올 수 있다. 요청의 본문은 웹 서버로 데이터를 실어 보내며, 응답의 본문은 클라이언트로 데이터를 반환한다. 문자열이며 구조적인 시작줄이나 헤더와 달리, 본문은 임의의 이진 데이터를 포함할 수 있다(이미지, 비디오, 오디오 트랙, 응용소프웨어). 물론 본문은 텍스트도 포함할 수 있다.

1.6 TCP 커넥션

1.7 프로토콜 버전

1.8 웹의 구성요소

프록시
클라이언트와 서버 사이에 위치한 HTTP 중개자

캐시
많이 찾는 웹페이지를 클라이언트 가까이에 보관하는 HTTP 창고

게이트웨이
다른 애플리케이션과 연결된 특별한 웹 서버

터널
단순히 HTTP 통신을 전달히기만 하는 특별한 프록시

에이전트
자동화된 HTTP 요청을 만드는 준지능적(semi-intelligent) 웹클라이언트