DEVELOPER / WEB
8분 읽기 (대략 1134 단어)

HTTP 통신이란?

HTTP란?

이번에는 웹의 기초인 HTTP에 대해서 알아보고자 한다. 나는 학원에서 IOT와 BigData를 배우면서 웹에 대한 기초를 배우지 않았으며 웹 개발자로 취업을 할 때 가장 걸림돌이 되었던것이 웹에 대한 기초였다. 혹 이전의 나와 비슷한 상황에 마주치는분들에게 도움이 되었으면 좋겠다.

HTTP는 Hyper Text Transfer Protocol 의 약자로 직역을 하면 하이퍼 텍스트 전송 프로토콜이다. HTTP는 웹 서버와 클라이언트 간의 통신을 하기 위한 통신 규약이다. 주로 80포트를 사용하며 초기 0.9버전부터 최근 3버전이 등장하였다.

HTTP 통신

HTTP 통신은 Request(요청)과 Response(응답)으로 이루어져 있으며 기본적으로 요청과 응답을 한번 하면 통신은 끊긴다.

Request (요청)

Requset Header

크롬 -> 개발자도구 -> 네트워크 탭에서 확인이 가능하다.

requsetHeader

클라이언트에서 웹 서버에 요청한 정보가 담겨있다.
중요한 정보만 설명하자면

  • Host : 요청하려는 서버 호스트의 이름과 포트번호
  • User_Agent : 접속한 기기에 대한 정보가 담겨있다. 해당 데이터로 웹환경인지 모바일 환경인지 구분이 가능하다.
  • Method : 요청 메서드 종류가 표시된다.
  • Accept : 클라이언트가 처리 가능한 타입 종류를 나열한다.
  • Accept-charset : 클라이언트가 지원 가능한 문자열 인코딩 방식
  • Accept-language : 클라이언트가 지원 가능한 언어를 나열한다.
  • Referer : 직전에 머물렀던 링크 주소
  • Cookie : 쿠키 값 (key-value)

    글 작성 기준날짜로 앞으로는 크롬에서 User_Agent 보안상의 이유로 천천히 철폐할 계획이라고한다. 뉴스 보기

Request Method

Method 전송형태 설명
GET GET [request-uri]?query_string HTTP/1.1 Host:[Hostname] 혹은 [IP] URL(URI) 형식으로 정보를 검색하기위해 서버에 요청한다.
POST POST [request-uri] HTTP/1.1 Host:[Hostname] 혹은 [IP] Content-Lenght:[Length in Bytes] Content-Type:[Content Type] [데이터] FORM 입력을 처리하기 위해 서버에 데이터를 전송하며 파일도 전송이 가능하다. 데이터를 요청 메세지의 body 담아 전송한다.
PUT PUT [request-uri] HTTP/1.1 Host:[Hostname] 혹은 [IP] Content-Lenght:[Length in Bytes] Content-Type:[Content Type] [데이터] POST와 같이 서버에 전송하는 형식은 동일하다. 하지만 자료 수정(UPDATE)를 요청한다.
DELETE DELETE [request-uri] HTTP/1.1 Host:[Hostname] 혹은 [IP] 자료를 삭제를 요청한다.

가장 많이 사용되는 메서드는 GET 과 POST이며 쉽게 생각해서 게시판에 글의 정보를 가져올떄는 GET 글을 작성할떄는 POST메서드가 사용된다.

Response (응답)

Response Header

Request Header (요청)와 마찬가지로 크롬 -> 개발자도구 -> 네트워크 탭에서 확인이 가능하다.

responseHeader

클라이언트에서 웹 서버에 요청한것에 대한 웹서버의 응답정보가 담겨있다.

  • Server : 웹 서버 소프트웨어의 종류와 정보
  • Cache-Control : 브라우저가 캐시를 처리할때 사용되는 정보, no-cache로 지정할 경우 캐시 저장을 하지 않는다.
  • Content-Type : 서버가 클라이이언트에 정보를 전달하는 형식표시와 인코딩형식을 담고있다.
  • Content-Length : 전송되는 데이터의 크기를 바이트단위로 표시
  • status : 상태코드 상태코드
  • expire : 응답된 정보의 만료시간을 나타낸다. Cache-Control에 max-age가 있는 경우 무시된다.
  • Location : 300번대 응답이나 Created 응답이 왔을 때 이동할 페이지를 알려주는 헤더
  • HTTP : 메시지가 만들어 진 시간
  • Connection : HTTP 1.1 버전에만 존재, 기본적으로 keep-alive, 특별한 의미가 없다.

#Refernces

DEVELOPER / ETC
9분 읽기 (대략 1347 단어)

마크다운(MarkDown) 문법 알아보기

마크다운(MarkDown)

마크다운 문법은 GIT의 README 파일이나 온라인문서, 혹은 일반텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운으로 작성된 문서는 HTML 등 다른 문서로 쉽게 변환이 가능하다.

마크다운(MarkDown) 문법 사용법

헤더 Headers

큰 제목 (h1)
　==========

중간 제목 (h2)
 -----------

# 제목1 h1
## 제목2 h2
### 제목4 h3
#### 제목4 h4
##### 제목5 h5
###### 제목6 h6

큰 제목 (h1)

중간 제목 (h2)

제목1 h1

제목2 h2

제목4 h3

제목4 h4

제목5 h5
제목6 h6

폰트

1
2
3
4
5
6
7
8
9
*이탤릭체*, _이탤릭체_

**볼드체**, __볼드체__

***이탤릭볼드체***

~취소선~

<u>밑줄</u>

이탤릭체,이탤릭체

볼드체,볼드체

이탤릭볼드체

밑줄

List (목록)

순서있는 목록

HTML의 <ol>, <il> 목록 태그로 변환된다.

1. 순서가 있는 목록
2. 순서가 있는 목록
    - 순서가 있는 않은 목록
3. 순서가 있는 목록
    - 순서가 있는 않은 목록
  1. 순서가 있는 목록
  2. 순서가 있는 목록
    • 순서가 있는 않은 목록
  3. 순서가 있는 목록
    • 순서가 있는 않은 목록

순서가 있는 목록은 어떤 숫자를 넣어도 순서가 제대로 부여된다.

1. 순서가 있는 목록
7. 순서가 있는 목록
9. 순서가 있는 목록
3. 순서가 있는 목록
3. 순서가 있는 목록
  1. 순서가 있는 목록
  2. 순서가 있는 목록
  3. 순서가 있는 목록
  4. 순서가 있는 목록
  5. 순서가 있는 목록

순서 없는 목록

순서 없는 목록은 글머리 기호-,*,+ 를 지원한다.

- 대쉬 (-)
- 별표 (*)
- 더하기 (+)
* 하나
    * 하나
        * 하나
- 둘
    - 둘
        - 둘
- 셋
    * 셋
        + 셋
  • 대쉬 (-)
  • 별표 (*)
  • 더하기 (+)
  • 하나
    • 하나
      • 하나
  • 둘
    • 둘
      • 둘
  • 셋
    • 셋
      • 셋

인용문 (BlockQuote)

인용문은 > 기호를 이용하여 사용한다.

> 인용문: 남의 글이나 말을 직접 또는 간접으로 인용한 문장 _(구글 사전)_

인용문: 남의 글이나 말을 직접 또는 간접으로 인용한 문장 (구글 사전)

인용문은 중첩을 하여 사용을 할 수도 있다.

>인용문 1
>>인용문 2
>>>인용문 3

>>>인용문 4

인용문 1

인용문 2

인용문 3

인용문 4

수평선 (HORIZONTAL RULES)

수평선은 ---,***,___ 세가지 기호를 세개이상 입력하면 출력되며. HTML 의 <hr />로 변환된다.

1
2
3
4
5
--- hyphens 

*** asterisks

___ underscores

hyphens

asterisks

underscores

하이픈과 별표 사이에는 공백이 들어가도 가능하다.

- - - 
hyphens 

* * * 
asterisks

hyphens

asterisks

html 의 <a>태그 로 변환된다.


[링크 예](https://skulter.github.io/ "링크 설명")

[상대 경로](../)

[참조 링크][google]

[google]: http://google.com

링크 예

상대 경로

참조 링크

이미지 (Images)

html의 <img> 태그로 변환된다.
사용법은 링크와 비슷하며 글머리에 !를 적어주면된다.

![이미지 대체 텍스트](이미지 "이미지 설명")

![대체 텍스트(이미지가 없을 시)](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/220px-Markdown-mark.svg.png "마크다운 이미지")

이미지 대체 텍스트

대체 텍스트(이미지가 없을 시)

이미지에 링크를 걸어주기

[![이미지 대체 텍스트](이미지 "이미지 설명")](링크)

[![대체 텍스트(이미지가 없을 시)](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/220px-Markdown-mark.svg.png "마크다운 이미지")](https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4)

이미지 대체 텍스트

대체 텍스트(이미지가 없을 시)

표 (TABLE)

html의

태그로 변환된다.

| 이름 | 나이 | 전화번호 |
:---|:---:|---:
| 홍길동 | 18 | 02-1234-5678 |
| 둘리 | 50 | 02-1234-5678 |
|||02-5678|
||30||
|펭수|||

:--- : 왼쪽정령
:---: : 가운데 정렬
---: : 오른쪽 정렬
이름 나이 전화번호
홍길동 18 02-1234-5678
둘리 50 02-1234-5678
02-5678
30
펭수

코드

코드를 그대로 보여주고싶을떄는 <code> 태그를 이용할 수 있다.

1
2
3
4
5
<code>
int a = 1;

string d
</code>
int a = 1;

string d

마크다운 문서에서 글을 쓴 그대로 보여주고 싶을떄는 <pre> 코드를 이용하면 된다.

1
2
3
<pre>
# 안녕하세요
</pre>
# 안녕하세요

```는 블록 코드를 강조할때 사용한다. ```

``` 블록코드를 강조할떄 사용합니다. ```

블록코드를 강조할떄 사용합니다.

정리

인사말을 제외하면 처음으로 올리게 된 글이다.
포스팅을 하기위해서 가장먼저 배워야 할 마크다운에 대해서 먼저 알아보고자 첫 포스팅은 마크다운 배우기로 정하였다.

마크다운은 2004년 존 그루버에 의해 만들어 졌으며
쉽게 읽고 쓸수 있고 HTML의 태그도 지원하기한다는 장점이 있다. 최근들어 다양한 곳에서 지원하며 많이 쓰이고 있으며 마크다운으로 쓰여진 문서는 .md 라는 확장자를 가지고있다.
마크다운의 단점은 표준이 없다는 것이다.

하지만 난 앞으로 꾸준히 사용해야 할 문법이기 떄문에 한번 정리를 해보았다.

카테고리

링크

태그 클라우드

HEXO HTTP MarkDown Request Response WEB 마크다운 블로그 일상

최근 글

아카이브

태그

HEXO 1
HTTP 1
MarkDown 1
Request 1
Response 1
WEB 1
마크다운 1
블로그 1
일상 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×