TCP/IP 4계층 - 애플리케이션 계층

2018-04-11

network

network, tcp/ip

애플리케이션 계층

애플리케이션 계층의 프로토콜들은 웹이나 이메일, 파일 공유와 같이 사용자가 실제로 사용하면서 체감할 수 있는 서비스를 제공한다. 하지만 사용자가 직접 이용하지 않아서 체감할 수 없는 프로토콜들도 존재하는데 DNS, DHCP, SSL/TLS, NTP, LDAP와 같은 것들이 있다. 이러한 프로토콜들은 OS나 다른 애플리케이션 계층의 프로토콜들이 간접적으로 사용하는데, 주로 인터넷이나 LAN의 원활한 사용을 위해 사용자에게 보이지 않는 이면에서 동작하고 있다.

HTTP

HyperText Transfer Protocol의 약자이다. 말 그대로 요청에 대한 응답으로 HTML을 해준다.

HTTP message

HTTP 프로토콜을 통해 클라이언트와 서버는 데이터를 주고받게 되는데, 이 때에 주고받은 데이터를 HTTP 메세지라고 부르며 크게 request, response의 두 가지 형태로 구분된다. HTTP 메세지는 총 네 가지 영역으로 구분한다.

start line - 요청 / 응답에 따라 두 가지로 나뉨
- 요청 : request line
- 응답 : status line
header - 메세지 상세정보
blank line
message body

stateless status

HTTP는 무상태성이다. 통신할때 정보를 한 번씩 주고받고 바로 끊기때문에 상태정보를 저장하지 않는다. 상태정보를 저장하지 않는다 함은 사용자나 클라이언트의 컨택스트를 서버쪽에 유지 하지 않는다는 의미로,쉽게 표현하면 HTTP Session과 같은 컨텍스트 저장소에 상태 정보를 저장하지 않는 형태를 의미한다.

URL

Uniform Resource Locator의 약자이다.

1 2	http://www.sample.co.kr/sample/index.html 스키마://호스트.도메인/디렉터리/파일

HTTP 응답과 상태 코드

HTTP response 데이터의 첫 번째 행에는 상태 코드가 들어가며, 요청에 대한 응답 상태를 표시하기 위함이다. 응답 내용은 메세지 바디에 들어가게된다. 상태코드는 1xx ~ 5xx 번 대로 이루어져 있으며 간단하게 살펴보면

1xx : 조건부 응답
2xx : 성공
3xx : 리다이렉트
4xx : 클라이언트 오류(요청 오류)
5xx : 서버 오류
로 나누어 진다.

세션을 유지하기 위한 쿠키

앞서 얘기한 것 처럼 HTTP는 stateless 프로토콜이기 때문에 요청과 응답하는 과정에서 상태 정보를 저장하지 않는다. 상태를 유지하기 위해서 Cookie(쿠키)를 사용한다.

웹 브라우저는 웹 서버로부터 응답받은 메세지에 Set-Cookie라는 물자열이 있는지 확인하고, 만약 있으면 쿠키 내용을 로컬 디스크에 쿠키형태로 저장한다. 기본적으로 쿠키는 클라이언트가 보관하고있기 때문에 보안에 취약한데, 각각의 브라우저들이 자체적으로 방어책을 구현하고 있다. 예를 들면, 쿠키가 생성된 웹 서버와 동일한 도메인을 사용하는 웹 사이트에만 쿠키를 전송시키거나, 유효기간이 지난 쿠키들을 폐기하기도 한다. 중요한 것은 유출되었을 때 보안 문제가 생길 만한 정보는 쿠키에 저장하지 않는 것이 제일 중요하다. 기본적으로 각종 정보는 서버에 저장하는 것이 원칙이고, 동일한 사용자인지 확인하기 위한 세션 ID 등의 식별 정보만 클라이언트에 쿠키로 저장하도록 제한해야 한다.

네트워크 기초

2018-04-10

network

웹 프로그래밍을 하다보면 네트워크 지식을 알게 모르게 필요로 했던거 같다. 프레임워크를 사용하면서 내부적으로 어떻게 작동되는지 제대로 이해하지 못한채 사용하는 경우가 많았는데 이유를 생각해보니 HTTP에 대해서 아주 조금의 지식만 가지고 있었기 때문에 그랬지 싶다. 당장 FBV만 사용하더라도 각 함수들의 첫 번째 인자로 request를 받는데 이는 HttpRequest의 인스턴스이며 어디로부터 오는지 전혀 이해할 수 없었고 궁금해하지도 않았다.

Django를 공부하다보니 인터넷 네트워크가 어떻게 작동하는 지 문득 궁금해지게 되었고 깊은 이해보다는 전체적인 프로세스를 전반적으로 다루어보자 싶어서 두루두루 공부한 것을 정리해 보려고 한다.

네트워크 기초

보통 네트워크를 공부한다고 하면 OSI 7계층과 TCP/IP 4계층이 있다. 더 큰 범주에 속해있는 것은 OSI 7계층으로서 네트워크 전송 시 데이터 표준을 정리한 것이라고 한다. TCP/IP 4계층은 이에 속하는 더 작은 개념으로서 이 이론을 실제로 사용하는 인터넷 네트워크 표준이 TCP/IP 4계층이라고 한다. 그리고 TCP/IP 4계층은 인터넷 모델이라고도 부른다.

컴퓨터 네트워크의 종류
컴퓨터 네트워크는 여러 대의 컴퓨터를 서로 연결하여 서로 데이터를 주고받을 수 있도록 망이 사전에 구축된 것을 말한다. 통신망의 거리에 따라 LAN(Local Area Network) 그리고 WAN(Wide Area Network)으로 나눈다.
- LAN = Local Area Network
  - 가정이나 사무실처럼 실내에서 비교적 근거리에 위치한 컴퓨터들이 연결된 것을 의미한다.
- WAN = Wide Area Network
  - 집 밖이나 회사 건물 밖처럼 비교적 먼 거리에 위치한 컴퓨터들과 연결된 것을 말한다.

공부하기 전까지 인터넷 = 네트워크라고 생각하고 있었는데, 여러 네트워크 중에서 가장 규모가 큰 네트워크가 인터넷이라고 한다. 또한 스마트폰을 연결하기 위해 무선 기술을 활용한 것을 무선 네트워크(모바일 네트워크)라고 한다.

3G / 4G
WiMAX
Wi-Fi

네트워크에 연결된 컴퓨터들은 서버 혹은 클라이언트에 속하게 되는데 서비스를 제공하는 쪽을 서버(Server) / 서비스를 제공 받는 쪽을 클라이언트(Client)라고 부른다. 서버와 클라이언트의 역할은 하드웨어로 구분하는 것이 아니라 어떤 역할의 프로그램을 설치하느냐에 따라 결정된다.

네트워크 전달방식

네트워크 전달 방식에는 패킷 교환 방식과 회선 교환 방식이 있다. 컴퓨터 네트워크에서는 이메일이나 파일과 같은 데이터를 패킷(Packet)으로 분할한 후 주고 받는다. 이때에 패킷은 어디로 전달되야하는지 알 수 있도록 주소(address)정보를 가지고 있다.

회선 교환 방식
- 아날로그 방식의 유선전화 또는 3G 휴대전화가 사용했다
- 통신하려는 양쪽 디바이스가 하나의 통신 경로를 점유하는 방식이다
- 때문에 일대일 통신을 기본으로 한다
- 통신 속도가 안정적이라는 장점이 있다
패킷 교환 방식
- 주고받을 데이터는 작게 쪼갠 후 주고받는다
- 다른 데이터 조각들과 섞여서 주고 받곤한다
- 통신 경로를 공유하며 전달하기 때문에 여러 상대와 통신할때 효과적이다
- 주고받는 패킷이 증가하면 전송 속도가 느려지는 단점이 있다

계층 모델

위에서 말한 것처럼 OSI 7계층과 TCP/IP 4계층이 있는데, 인터넷 모델이라고 불리기도하는 TCP/IP 4계층에 대해서 살펴보기로 하자. 총 네 가지의 계층으로 구분되어진다.

애플리케이션 계층 - server / client / HTTP / SSH와 같이 서비스를 제공하는 부분
트랜스포트 계층 - TCP / UDP
인터넷 계층 - IP / ICMP / router
네트워크 인터페이스 계층 - Ethernet / Wireless LAN / MAC address

위 와 같이 네 가지의 계층이 있다. 4개 계층 중 서비스의 내용을 결정하는 것은 애플리케이션 계층 하나 뿐이며, 나머지 3개 계층은 보이지 않는 곳에서 통신 기능을 담당하고 있다.

애플리케이션 계층

사용자가 실제로 체감할 수 있는 서비스를 제공하는 계층이다. 웹 서비스를 예로 들면, 웹 브라우저와 웹 서버는 애플리케이션 계층에 속하는 프로그램이 된다. 데이터 전송에 관한 처리는 하위 계층에 위임하며 서비스를 처리하는 데에 집중하는 계층이다.

트랜스포트 계층

상위 계층인 애플리케이션 계층으로부터 전달받은 데이터를 목적지 애플리케이션 계층의 프로그램까지 전달하는 역할을 담당한다. 또한 데이터가 제대로 전달되지 않았을 때 재전송하는 것도 이 계층에서 맡고 있는 역할이다.

인터넷 계층

데이터에 주소 정보를 붙여 수신지(목적지)까지 전달하는 역할을 한다. 목적지까지 도달하기 위한 경로가 있는데 네트워크를 넘나들면서 최적의 경로를 탐색하는 데에 라우터라는 장비를 사용한다.

네트워크 인터페이스 계층

유선 LAN 어댑터나 무선 LAN 어댑터가 처리할 수 있는 형태로 데이터를 변환하고 이 데이터를 목적지까지 전달하는 역할을 한다. 물리적으로 인접하여 연결된 장비까지 어떻게 하면 데이터를 잘 전달할까에 초점을 맞추고 있다.

프로토콜(protocol)

원활한 데이터 송수신을 위해 지켜야할 통신 규약 혹은 절차를 프로토콜이라고 부른다. 통신 절차가 기술된 것 뿐이기 때문에 물리적 형태가 존재하지는 않는다. 하지만 프로토콜에 맞게 동작하도록 만들어진 프로그램이나 통신장비,데이터 포멧 등이 존재하고, 프로토콜을 잘 지켰을때 원활한 통신이 가능해진다.

애플리케이션 계층
- 프로토콜 : HTTP
- HTTP 프로토콜에 따라 동작하도록 만들어진 웹 브라우저
트랜스포트 계층 / 인터넷 계층
- 프로토콜 : TCP/IP
- TCP/IP 프로토콜에 따라 동작하도록 만들어진 OS 내장 통신 프로그램
네트워크 인터페이스 계층
- 프로토콜 : Ethernet(이더넷)
- Ethernet 프로토콜에 따라 동작하도록 만들어진 네트워크 어댑터용 디바이스 드라이버

또한 이더넷에 맞게 동작하도록 만들어진 LAN 케이블과 네트워크 허브가 있다(하드웨어 부분)

대표적인 프로토콜

애플리케이션 계층
- HTTP : 하이퍼텍스트를 주고받음(웹 페이지)
- HTTPS : 보안을 위해 웹 페이지 데이터를 주고받는 과정을 암호화
- POP3 : 서버에 보관된 수신 메일을 가져옴
- SMTP : 메일 송신
- FTP : 파일 전송
- Telnet : 컴퓨터 원격 제어
- SSH : 보안을 위해 컴퓨터를 원격제어하는 과정을 암호화
- SMB : 윈도 컴퓨터와 파일 공유
- DHCP : 사설 IP(private IP)를 동적 할당
- DNS : 도메인 이름과 IP 주소를 변환
- SSL : 보안을 위해 통신 과정에서 주고받는 데이터를 암호화
트랜스포트 계층
- TCP : 애플리케이션의 데이터를 송수신. 데이터의 정확한 전달을 중시함
- UDP : 애플리케이션의 데이터를 송수신. 데이터의 전송 속도를 중시함
인터넷 계층
- IP : 패킷을 목적지까지 전달
- ICMP : IP의 통신 오류를 전달
- IPsec : 패킷을 암호화하여 전달
- ARP : 네트워크 장비의 MAC address를 알아냄
네트워크 인터페이스 계층
- Ethernet(이더넷): 일반 금속 케이블이나 광 케이블을 통해 데이터를 전달
- PPP : 사용자 인증 후에 원격지의 장비와 통신

[참고]
http://pigbrain.github.io/network/2017/03/08/OSI7_on_Network
http://hahahoho5915.tistory.com/15
http://tar-cvzf-studybackup-tar-gz.tistory.com/38

css 플렉스 박스 기본

2018-04-09

css

css, flexbox

09년에 나왔다고는 하지만 17년이 되도록 존재조차 몰랐던 Flexbox에 대해서 알아보자. 플렉스박스는 CSS의 display 속성을 flex로 줌으로써 html의 레이아웃을 표현하는 방식이다. 아직까지는 인터넷 익스플로러와 같은 구버전 브라우저의 지원률이 미흡하지만 웹 페이지의 레이아웃을 구현하는 데 있어서 기존에 사용했던것 보다 더 간편한 듯 싶다.

사용법은 아래와 같다.

1	display: flex;

첫째로 flexbox 레이아웃을 구성할 때는 부모 컨테이너에 flex를 주어야 한다.

1
2
3

.container {
    display: flex;
}

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

display: flex 로 인해서 div.container 는 flex container가 되었으며 컨테이너 안의 div.box 들은 flex 항목이 된 것이다.(.container는 플렉스 서식 환경을 만들게 되고 .box는 플렉스 항목이 된다.)

Flex container

플렉스 항목들을 감싸고 있는 플렉스 컨테이터네 적용시키는 속성

플렉스박스 방향

플렉스 컨테이너를 만드는 경우 컨테이너 내 하위 태그의 방향을 지정할 수 있다. 속성명은 flex-direction이면 웹 페이지에서 기본값으로 row로 설정되어있다.(React Native에서 사용하는 flexbox에서는 기본 방향이 모바일 어플리케이션처럼 column으로 되어있다.) 전체 플렉스 항목들의 흐름 방향을 제어하기 때문에 플렉스 항목이 아닌 플렉스 컨테이너에서 정의해주어야 한다.

속성 : flex-direction
속성값
- row: flex-direction의 기본값이며 왼쪽에서 오른쪽으로 나열한다
- row-reverse - 오른쪽에서 왼쪽으로 나열한다
- column - 플렉스 항목들을 수직으로 위에서 아래쪽을 향해 나열한다
- column-reverse - 항목들을 수직으로 아래에서 위로 나열한다

플렉스 항목 줄바꿈

플렉스 항목들이 컨테이너의 크기를 초과할때 줄바꿈에 대한 속성이다. 즉 플렉스 항목을 감쌀 것인지 아닌지를 지정한다.

속성 : flex-wrap
속성값
- nowrap : 기본값이며 항목들이 크기를 초과하더라도 줄바꿈을 하지 않는다
- wrap : 플렉스 항목들이 컨테이너 안에서 여러줄로 줄 바꿈이 가능하도록 한다
- wrap-reverse : wrap으로 생기는 줄바꿈의 정렬 방향을 반대로 한다

플렉스 항목을 감싸게 되면 각각의 박스 크기(높이와 폭)는 유동적으로 변하지 않게 된다. 즉, flex-wrap 속성의 값을 wrap으로 두게 되면 화면을 초과할 시에 여러줄로 표현할 수 있으며 원래의 박스 크기를 가지고 있게되는 것이다.

플렉스 항목들의 진행 방향과 줄 바꿈

flex-direction과 flex-wrap의 단축 속성이다.

속성 : flex-flow
- 초기값은 row nowrap
속성값
- diredction wrap 순으로 작성한다

정렬

기본 축(주축) 정렬과 교차 축 정렬을 수행하는 속성이 있다.

justify-content - 기본 축 정렬
align-items - 교차 축 정렬

속성값
1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

참고

멋사 세션을 진행하던 도중 본인도 헷갈렸던 것이 있었는데 align-content 이다.

align-items와 마찬가지로 주 축에 대한 교차 축 정렬을 하게 되는데 이 속성은 많은 아이템이 한 줄 이상 넘어가는 경우에 사용한다고 한다. 만약에 플렉스 컨테이너 내의 플렉스 항목들이 한 줄을 넘어가지 않는다면 align-content 속성을 제대로 작동하지 않는다는 의미이다. align-items와 justify-content 속성이 가지는 특성들을 모두 포함하고 있기는 하지만 적용되는 상황이 다른만큼 각별한 주의가 필요하다.

속성 : align-content
속성값
- 초기값은 stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch

Flex item

플렉스 항목들이 가지는 속성

order

컨테이너 안에서 항목들이 나열되는 순서를 의미한다. 숫자가 작을수록 기준 축에 대해서 시작하는 항목이며 높을수록 반대쪽에 위치하게 된다. CSS의 z-index와 비슷하며 음수사용이 가능하다.

order 속성의 정의되면 HTML이나 CSS에서 구문을 어떤 순서에 따라 작성했는지에 상관없이 order에 선언된 값에 의해서만 순서가 정해진다.

flex

flex-grow / flex-shrink / flex-basis의 축약속성이다. 기본값은 0 1 auto이다.

flex-grow : 플렉스 항목의 팽창을 제어함
- 음수사용 불가
- 초기값은 0
flex-shrink : 플렉스 항목의 수축을 제어함
- 음수사용 불가
- 초기값은 1
flex-basis : 플렉스 항목의 기본 크기를 설정함
- 초기값은 auto
flex : 위의 세 가지 속성을 한번에 지정할 수 있는 축약속성
- 초기값 : 0 1 auto

정리

flex container에만 적용 가능한 속성

.flex_container {
  display: flex;                  /* flex container 선언 */
  flex-direction: row;            /* 정렬 방향*/
  flex-wrap: nowrap;              /* 줄 바꿈 */
  justify-content: flex-start;    /* 기본 축(진행 축/주 축) 정렬 */
  align-items: stretch;           /* 교차 축 정렬 */
  align-content: stretch;         /* 여려줄 교차축 정렬 */
}

flex items에만 적용 가능한 속성

.flex-items {
  flex-grow: 0;               /* 팽창 지수 */
  flex-shrink: 1;             /* 수축 지수 */
  flex-basis: auto;           /* 기준 크기 */
  align-self: auto;           /* 독립적 교차축 정렬 */
  order: 0;                   /* 배치 순서 */
}

[참고]
http://webclub.tistory.com/259
http://webclub.tistory.com/260?category=541913
http://www.beautifulcss.com/archives/2812
https://www.slideshare.net/wsconf/css-flex-you-must-konw-wsconfseoul2017-vol2
http://webdir.tistory.com/349

애플리케이션 계층

HTTP

HTTP message

stateless status

URL

HTTP 응답과 상태 코드

세션을 유지하기 위한 쿠키

쿠키(Cookie)

네트워크 기초

네트워크 전달방식

계층 모델

애플리케이션 계층

트랜스포트 계층

인터넷 계층

네트워크 인터페이스 계층

프로토콜(protocol)

대표적인 프로토콜

Flex container

플렉스박스 방향

플렉스 항목 줄바꿈

플렉스 항목들의 진행 방향과 줄 바꿈

정렬

참고

Flex item

order

flex

정리