레이블이 Web인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Web인 게시물을 표시합니다. 모든 게시물 표시

10월 28, 2016

HTTP


HTTP (HyperText Transfer Protocol)

WWW 상에서 정보를 주고 받을 수 있는 프로토콜로 HTML 문서 및 다른 종류의 데이터를 주고 받는데 사용. TCP, UDP 방식을 사용하며 80번 포트를 이용함. 버전 0.9, 버전 1.0 및 버전 1.1이 존재하는데 현재 대부분 버전 1.0 이나 버전 1.1을 사용함. HTTP/2를 개발 중.

HTTP는 클라이언트와 서버 사이의 요청/응답(request/response) 프로토콜로 요청 메시지, 응답 메시지가 각각 구분되어 있으며 이에 따라 공통으로 사용되는 헤더와 request 헤더, response 헤더가 존재함. 먼저 클라이언트가 서버에 연결을 요청하면 Connect, Request, Response, Close 과정을 거쳐 통신을 수행함. 버전 0.9 의 경우 같은 페이지 내에서도 요소마다 Connect와 Close 과정을 거쳐서 효율이 매우 떨어졌지만, 버전 1.0 부터 한번의 Connect 후에 Request와 Response를 반복할 수 있게 됨.


HTTP Request

HTTP Request |devwoodo's blog

HTTP Response

HTTP Response |devwoodo's blog

reference

HTTP Response


내용

HTTP Response 는 HTTP Request 에 대한 응답 패킷. 서버에서 쓰이고 있는 프로토콜 버전, Request에 대한 실행 결과 코드(HTTP Status code), 간략한 실행 결과 설명문(OK 등)이 담겨 있으며, 전달할 데이터 형식, 데이터 길이 등 추가 정보가 MIME 형식으로 표현되어 있음. 그리고 헤더 정보 뒤에는 실제 데이터가 담겨 있음.


HTTP Status code (HTTP Response의 실행 결과 코드)

1XX (조건부 응답)

요청을 받았으며 작업을 계속함을 의미.

2XX (성공)

클라이언트의 요청을 수신하여 이해하고 승낙했으며, 성공적으로 처리했음을 의미

  • 200(Ok)
  • 201(Create)
  • 202(Accepted)
  • 203(Non-Authoritative Information)
  • 204(No Content)
  • 205(Reset Content)
  • ...

3XX (리디렉션 완료)

요청을 마치기 위해 클라이언트가 추가 동작을 취해야 하는 경우


4XX (요청 오류)

클라이언트에 오류가 있는 경우

  • 400(Bad Request) : 서버가 요청의 구문을 인식하지 못함
  • 401(Unauthorized) : 이 요청은 인증이 필요함
  • 403(Forbidden) : 서버가 요청을 거부함
  • 404(Not Found) : 서버가 요청 받은 페이지를 찾을 수 없음
  • 405(Method Not Allowed) : 요청에 지정된 방법을 사용할 수 없음
  • 406(Not Acceptable)
  • 408(Request Timeout) : 서버의 요청대기가 시간을 초과함
  • ...

5XX (서버 오류)

유효한 요청을 서버가 명백히 수행하지 못했음을 의미

  • 500(Internal Server Error) : 서버에 오류 발생해 요청을 수행할 수 없음
  • 501(Not Implemeted) : 서버에 요청을 수행할 수 있는 기능이 없음. ex) 서버가 요청 메소드를 인식하지 못할 때
  • 502(Bad Gateway) : 잘못된 응답을 받음
  • 503(Service Unavailable) : 서버가 오버로드 되거나 유지 보수를 위해 다운됨. 대게 일시적인 상태
  • 504(Gateway Timeout) : 제 때 응답을 받지 못함
  • ...

reference


HTTP Request


크게 GET, POST, 기타 방식이 존재


GET

가장 일반적인 HTTP Request 방식으로 요청 데이터에 대한 인수를 URL을 통해 전송함. URL에 인수가 그대로 나타나기 때문에 보안에 취약한 방식. GET 방식에서는 각 이름과 값을 &로 결함하며 글자수는 255자로 제한됨.


POST

GET과 달리 HTTP 헤더에 데이터를 전송. 내부의 구분자가 각 파라미터(이름, 값 등)를 구분하며, 서버를 이를 해석하며 처리해야하기 때문에 GET 방식보다 상대적으로 처리 속도가 늦음. 많은 양의 데이터를 전송하는 경우 사용.


기타

  • HEAD : 서버 측의 데이터를 요청하고 검색하는데 사용.
  • OPTIONS : 자원에 대한 요구/응답 관계에서 관련된 선택 사항의 정보를 요청할 때 사용.
  • PUT : 메시지에 포함되어 있는 데이터를 지정한 URI에 저장.
  • DELETE : URI에 지정되어 있는 자원을 서버에 지울 수 있게 함.
  • TRACE : 요구 메시지의 최종 수신처까지 루프백 검사에 사용.

reference

10월 18, 2016

TCP 3-way handshaking, 4-way handshaking

  • SYN : 시퀀스 동기화 요청
  • ACK : 패킷을 받았다는 응답. 다음에 받을 시퀀스 넘버를 가지고 있음.
  • FIN : 연결 종료 요청



3-way handshaking: Connection establishment


  1. Step1
  2. Initiator[CLOSED]가 SYN(To Receiver)를 전송. Initiator는 전송한 SYN(To Receiver)에 대한 ACK를 기다리는 Initiator[SYN-SENT]로 전환.

  3. Step2
  4. Receiver[LISTEN]가 SYN(From Initiator)에 대한 ACK와 SYN(To Initiator)를 전송. SYN(To Initiator)에 대한 ACK를 기다리는 Receiver[SYN-RECEIVED]로 전환. Initiator[SYN-SENT]가 ACK(From Receiver)를 받으면 Initiator[ESTABLISHED]로 전환. 받은 SYN(From Receiver)에 대한 ACK를 전송.

  5. Step3
  6. Receiver[SYN-RECEIVED]가 ACK(From Initiator)를 받으면 Receiver[ESTABLISHED]로 전환. TCP 연결이 확립, 데이터 교환이 가능.



4-way handshaking: Connection termination

세 방향 핸드셰이크는 네트워크로 연결된 미디어를 통해 세 개의 패킷만 전송하면 되지만 이 신뢰성 있는 연결을 종료하려면 네 개의 패킷을 전송해야 합니다. TCP 연결은 데이터가 서로에 관계 없이 각 방향으로 흐를 수 있는 전이중이기 때문에 각 방향으로 개별적으로 전송해야 합니다.


  1. Step1
  2. Terminator[ESTABLISHED]가 FIN(From Terminator)를 전송. FIN(From Terminator)에 대한 ACK를 기다리는 Terminator[FIN-WAIT-1]으로 전환.

  3. Step2
  4. Receiver[ESTABLISHED]가 FIN(From Terminator)에 대한 ACK를 전송. 어플리케이션에게 close 알리고 Receiver[CLOSE-WAIT]로 전환. Terminator[FIN-WAIT-1]은 ACK(From Receiver)를 받으면, FIN(From Receiver)를 기다리는 Terminator[FIN-WAIT-2]로 전환.

  5. Step3
  6. Receiver[CLOSE-WAIT]는 어플리케이션이 close할 준비가 되면 FIN(To Terminator)를 전송. Fin(To Terminator)에 대한 ACK를 기다리는 Receiver[LAST-ACK]로 전환. Terminator[FIN-WAIT-2]는 FIN(From Receiver)를 받으면 ACK를 전송하고, terminating process 전에 전송되었을지 모르는 패킷을 기다리는 Terminator[TIME-WAIT]로 전환. 일정시간 동안 여분의 패킷을 기다린 후 연결 종료 Terminator[CLOSED].

  7. Step4
  8. Receiver[LAST-ACK]는 ACK(From Terminator)를 받으면, 연결을 종료 Receiver[CLOSED].



reference

3월 21, 2016

superscript (윗첨자), subscript (아랫첨자) 삽입하는 방법. (markdown/html)

순수 markdown 문법

  • superscript: ^(text)^
  • subscript: ~(text)~

만약 text 사이에 공백이 있다면 공백에 \ (escape) 처리를 해줘야 함. ex) ^hello\ world!^


html tag 사용

markdown에서는 위의 문법을 지원하지 않는 경우가 있음. github 에서는 위의 문법을 지원하지 않는데, 이런 경우엔 html tag를 사용. markdown 뿐 아니라 html에서도 사용 가능.

  • superscript: <sup>superscript</sup>
  • subscript: <sub>subscript</sub>

1월 28, 2016

HTML anchor - 웹페이지 내 원하는 부분으로 이동하는 링크 만들기

HTML anchor란?

같은 webpage 내에서 특정 문단 등으로 이동할 수 있게 해주는 일종의 링크.

예시> 사용 방법, 참고


사용 방법

<a> 태그와 name attribute를 사용. name attribute는 HTML5 에서 deprecated.

  1. destination 지정: <a name="anchor_name"> destination_string</a>를 지정
  2. departure link 만들기 : <a>태그 사용한 링크 다는 방식과 동일하게 링크 삽입. 단, url 주소 맨 마지막에 (url)#anchor_name 덧붙임
  3. 만약 같은 웹페이지 내에서의 이동이라면 url 주소를 생략한채 #anchor_name만 입력도 가능.

<a> 태그와 id attribute를 사용.
  1. destination 지정 :
    <a name="anchor_name"> destination_string</a>를 지정
  2. departure link 만들기 : <a>태그 사용한 링크 다는 방식과 동일하게 링크 삽입. 단, url 주소 맨 마지막에 (url)#anchor_name 덧붙임
  3. 만약 같은 웹페이지 내에서의 이동이라면 url 주소를 생략한채 #anchor_name만 입력도 가능.


참고

How to Link to a Specific Line or Paragraph on a Web Page Using HTML
by Christopher Heng, thesitewizard.com

webpage에 이미지 올리는 방법

blogger에 이미지 삽입하는 방법

바로 업로드하는 방법

  1. html 작성 창에서 그림 선택
  2. 메뉴에서 '업로드' 선택

google photo (picasa)를 거쳐 업로드하는 방법

  1. 기타기기(아이패드, 스마트폰 등)인 경우, Google photo로 이미지 파일 내보내기
  2. google photo에서 업로드하고자 하는 이미지를 선택하여 cloud에 저장
  3. google photo에 저장된 이미지파일은 자동으로 picasa에도 등록됨

  4. html 작성 창에서 그림 선택
  5. 메뉴에서 '피카사' 선택
  6. 정렬 조건, 크기 등 선택



git wiki에 이미지 삽입하는 법

  1. repos.에 이미지를 저장한 후 commit하여 remote repos.에 이미지 업로드
  2. 이미지를 저장한 ropos.에 들어가 이미지를 클릭->오른쪽 위에서 RAW 선택
  3. 새로운 창에 이미지가 나타나면 https://raw...로 시작하는 주소를 복사
  4. 복사한 주소로 이미지를 로드

1월 12, 2016

Blogger에서 code 삽입하는 법: Gist, 기타..

Gist 사용

  1. GitHubGist 접속 후 오른쪽 상단의 New gist 선택
  2. 소스코드를 입력한 후 Create private 혹은 Create public을 선택. private은 검색 엔진에 잡히지 않아 내가 url을 공유한 사람만이 접근 가능.

  3. 상단의 Embed에 나온 script 태그를 복사해 html 문 내의 원하는 위치에 삽입
  4. 이렇게 삽입한 코드는 Gist에서 수정 시 블로그에도 자동으로 반영이 된다고 함.

기타

12월 22, 2015

HTML 자주 쓰는 태그


Tag 목록

  • <pre> </pre>
  • preformatted. 미리 포맷된 텍스트를 나타냄. 이 요소 내부의 텍스트는 HTML 적용 전 텍스트에 적용된 그대로의 비례, 글꼴로 표시됨. 고정폭 띄어쓰기를 제공하여 tab과 같은 역할로도 사용 가능

  • <br>
  • 줄바꾸기

  • <blockquote> </blockquote>
  • 인용 구문 문단 지정

  • <p> </p>
  • 단 지정


escape character

  • < : &lt
  • > : &gt
  • & : &amp
  • : : &#58
  • ; : &#59

주의

<xmp> </xmp> 삽입된 코드( ; < > , HTML태그 등 )를 그대로 보여주는 태그.
But deprecated. 쓰지 말것.

현재 <xmp>를 대신할 태그가 없어 다소 번거롭긴하지만 escape 캐릭터를 매번 사용하는 방법 외에는 뾰족한 수가 없는 듯

참고

Atom: Github에서 출시한 오픈소스 텍스트 에디터

  1. 개요
  2. GitHub에서 만든 hackable 텍스트 에디터. 크롬의 오픈소스와 HTML, CSS를 이용하여 작성했으며, 이들 언어를 사용하여 커스터마이징이 가능.

  3. 설치 순서
    1. atom download
    2. extantion 설치
    3. setting > install 에서 extention 이름으로 찾기

      • emmet
      • minimap
      • script

    4. 기타 개별적인 커스터마이징 적용

12월 18, 2015

GitHub Wiki의 page를 subdirectories 구조로 작성하기?

 subdirectories 구조를 만들 수는 있지만, 해당 페이지에 접근할 때는 무조건 root에서 접속하게 됨.

즉, ../wiki/ 아래에 subd1을 만들더라도 해당 페이지에 ../wiki/subd1/page1으로 접근하는것이 아니라, /wiki/page1으로 접근하게 됨.

참조

How can you use subdirectories in a GitHub wiki checkout? |StackOverflow Jan 18 '13
How to structure github wiki files? |StackOverflow Jun 13 '14

12월 11, 2015

Markdown이란? Markdown 문법

정의
  HTML 과 같이 웹페이지를 나타내는데 사용되는 언어로 각 글자에 서식을 표현해줄 수 있음.
 단순하여 사용하기 쉽고 호환성이 매우 좋음.
 Multimarkdown 등 확장 문법 존재함.

문법
 참고 링크 참조


참고
http://blog.kalkin7.com/2014/02/05/wordpress-markdown-quick-reference-for-koreans/
http://sergeswin.com/1013