SPA(Single page application)?

한 개의 페이지로 이루어진 애플리케이션.

• 전통적인 웹 페이지는 여러 개의 페이지로 이루어져 있다.

• 페이지 이동이 이루어질 때 마다. 새로운 html을 받아 해석한 뒤 보여 준다.

  → 웹에서 제공되는 정보가 많아 짐에 따라 서버 측에서 모든 화면을 준비한다면? 성능상 문제가 발생할 수 있다.

  → 캐싱, 압축으로 어느정도 해결 가능하나. 사용자와 인터랙션이 자주 발생하는 모던 웹 어플리케이션은 부적절 하다.

  → html을 계속 서버에 새로 요청하면? 사용자의 상태 유지가 번거롭고 바뀌지 않는 부분도 리 렌더링 하기 때문에 비효율 적이다.

리액트 같은 라이브러리 혹은 프레임워크를 사용하면?

• 렌더링은 브라우저 담당.
• 사용자와 인터랙션이 발생하면 필요한 부분만 js를 통해 업데이트 해준다.
• 새로운 데이터가 필요하다면?
  • 서버 api를 호출 해 필요한 데이터만 새로 불러와 사용한다.

SPA는 화면이 한 종류 일까?

• 서버에서 사용자에게 제공하는 페이지는 한 페이지 이지만 페이지에서 요청된 js 또는 주소에 따라서 다양한 화면을 보여 줄 수 있다.

라우팅

• SPA에서 다른 주소에서 다른 화면을 보여주는 것을 말한다.

SPA의 단점.

앱의 규모가 커지면? 자바 스크립트 파일이 너무 커진다.

• 한번에 모두 받기 때문에, 사용하지 않을 js파일 까지 모두 로딩한다.

  → 코드 스플리팅 으로 개선 가능.

JS를 실행하지 않는 일반 크롤러는 페이지의 정보를 제대로 수집 하지 못한다.

• 구글, 네이버, 다음 등 검색 결과가 제대로 나오지 않는다.

  → SSR (Server Side Rendering) 으로 모두 해결 가능.

Single-page Application, SPA란?

기존 웹 방식과는 다르게, 페이지 요청 시 완전히 새로운 페이지를 불러오는 것이 아닌, 동적으로 페이지를 다시 작성해 '사용자와 소통' 하는 웹 애플리케이션 or 웹 사이트를 뜻함.

→ 처음 로드 하고 난 뒤, 새로고침이 없는 것이 특징이다.

장점이 뭐야?

연속적인 페이지 간의 사용자 경험의 간섭을 막아준다.

→ 기존 형태의 웹이 주던 딱딱하고 끊기는 느낌을 사용자에게 주는 것이 아니라. 애플리케이션처럼 부드럽고 자연스러운 사용자 경험 (UX)을 느끼게 해 준다.

→ SPA의 최대의 목적은 뛰어난 사용자 경험을 준다는 것이다.

필요한 리소스만 부분적으로 로딩

→ 페이지의 모든 정보를 가져오는 것이 아닌, 화면 구성에 필요한 정보만 동적으로 요청을 해서 화면을 변경하는 방식으로 사용한다.

→ 필요한 부분만 요청하는, 데이터를 적게 사용하는 방식이기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.

서버의 연산 부담을 클라이언트로 분산

→ 최초의 http 요청을 통해 딱 한 번만 http, Css, javascript를 로딩. 이후 데이터를 받아 올 때만 서버와 통신.

→ 통신된 데이터를 통해 기존 페이지의 내부를 수정해서 보여주는 방식.

컴포넌트로 나누어서 개발함으로 관리적 용이성

→ 모던 웹 들은 계속 다채로워지고 화려해지고 있다. ( 점점 복잡해진다!)

→ 많은 컴포넌트 ( 홈페이지에서 각각의 아이템들이라고 생각하면 편하다. 메뉴창, 내비게이션 바 등..)를 분리해서 관리를 함.

→ 데이터 변경이 있어 화면을 재 구성해야 하는 경우 전체를 바꾸는 것이 아닌, 컴포넌트 단위로 화면을 갱신.

단점이 뭐야?

초기 구동 속도가 느리다.

→ SPA의 단점 이라기보다 SPA구조 상 어쩔 수 없는 상황이다. SPA는 초기에 웹에 필요한 대부분의 리소스를 다운로드한다.

→ 이러한 손해를 감수하고도 얻고자 하는 것은 전체적인 속도 , 반응성, 사용성을 추구하기 위함이다. 하지만 우리는 어찌 되었든 메인 페이지는 빠르게 뜨길 원한다면?

1. Lazyload
   • 많은 양의 코드 (초기 다운로드)를 작은 양의 개별 작업으로 분할시켜 제공하는 방법.
   • Code splitting.
   • Route-based code splittig

검색엔진 최적화(SEO)가 어렵다.

→ 이 문제는 js기반 비동기 연동 모델로 작동되는 모든 웹 환경에서 문제가 생긴다.

→ SPA가 극단적으로 js를 사용하다 보니 더욱 부각되는 것뿐이다.

→ 대부분의 서치 봇 들이 html을 파싱 해서 정보를 만든다. 그렇기 때문에 SPA와 같이 html의 뼈대 위에 js 비동기 통신 모듈을 통해 내용을 채우는 방식을 사용하면, 서치 봇이 제대로 감지를 못하는 상황까지 이른다.

—> 이를 해결하기 위해서 SSR (Server SIde Rendering)이라는 방식으로 사용되고 있다.

그래서 SPA는 좋은 거야?

이에 대한 정답은 없다고 생각한다. 어떠한 기술을 바라볼 때, 항상 좋은 점만 있는 것은 아니다.

SPA와 기존 고전 웹의 특징을 잘 비교 한 뒤 본인이 만들 웹 페이지에 기획과 콘셉트에 맞게 스스로 고민하고 선택하는 것이 중요하다고 생각한다.

mongodb Community Edition 설치

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4

echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.0.list

sudo apt-get update

sudo apt-get install -y mongodb-org

React 이전

Jquery , Backbone, AngularJS

2006년 Jquery 등장 이후 Dom을 다루는 형식으로 표준 처럼 사용되었다.

Backbone과 AngularJS역시 돔을 다루는 중요한 방법으로 Jquery 사용.

React 등장

• Facebook이 만든 Javascript 라이브러리
• Facebook, Netflix, Dropbox, Twitter, Evernote, Uber 등 많이 사용함.
• View 라이브러리이다.

그래서 왜 React가 나왔는데?

• 기존 웹 프로젝트가 거대해지면, 코드의 양도 자연스럽게 증가

  → 기존 html, js 코드들이 분리되지 않기에 코드 가독성이 매우 낮아짐.

  → 관리의 효율이 매우 떨어진다.

• React는 Component와 Module로 어느정도 해결.

  → 뚜렷한 의미를 가지는 클래스들의 모듈화!

Component

• Ui를 구성하는 개별적인 뷰 단위.
• Component들이 결합되어 앱이 탄생.
• Component의 핵심은 쉽게 재사용이 가능하게!

→ 복잡한 화면을 각자의 개념으로 작은 단위로 쪼개고, 해결한 뒤, 다시 합쳐 해결!

→ 개념으로 쪼개다?? : 해결하는 방법을 각자가 가지고 있고 외부에서는 알 필요가 없다.

Jsx

• React를 위해 태어난 새로운 js문법.
• 기존 js는 화면을 표현하기 불편하기 때문에 등장.

Virtual DOM

• 이것을 가능하게 해주는 것이 Virtual Dom이다.

1. React Component 는 Render를 호출. 결과값을 Return한다.
2. React 는 새로운 Return 값을 가지고 새로운 Virtual DOM을 생성.
3. 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 차이점을 찾아냄.
4. 차이점이 새긴다면 실제 Virtual DOM → DOM 적용.

인터넷의 시작

• 독립적인 다양한 형태의 네트워크를 엮어내겠다는 아이디어에서 시작

• 아파넷 (ARPANET)이 인터넷의 개념을 도입.

• 기존의 전화망에서 사용하는 서킷(circuit)기반의 네트워크가 아니라 데이터의 패킷을 중심으로 하는 네트워크를 구축

인터넷이 고려해야 했던 것들.

• 오픈 아키텍처 (open architecture) : 여러 네트워크 기술과 구조 포괄 및 확장성 확보

• 인터넷 서비스 제공자(ISP, Internet Service Provider) : 각각의 독립적인 네트워크가 다시 사용자에게 서비스를 제공, 이들간 네트워크를 다시 구성하게 해준다.

• P2P (Peer-to-Peer) : 인터넷의 말단이 각자 소통이 가능해져야 한다.

TCP / IP 프로토콜의 탄생.

• 이런 개념이 실질적으로 성공하기 위해서는 신뢰성 있는 네트워크 프로토콜이 필요했다.
  → 데이터 중심으로 통신을 하다보면 데이터 누락( 전파, 전기간섭 )이 생길 수 있다.
  → 데이터 통신이 끊기는 상황도 대비를 해야한다.

NCP ( Network Control Protocol)

• 무선통신 환경을 대상으로 하는 프로토콜

• 초기 아파넷 (ARPANET )에 NCP가 사용 됨

• 고정된 목적지를 제외한 주소를 표현할 방법이 없었다.

• 아파넷에 등록된 네트워크만 참여만 가능 했기에, 자율적인 확장을 생각했던 인터넷 개념과는 맞지 않았다.

게이트웨이 (gateway)와 라우터 (router)

• 데이터 덩어리인 패킷이 목적지에 도달하지 않으면, 재전송등 관리를 해주는 역할.

게이트웨이

• 패킷을 벗겨서 네트워크의 길의 정보 (루트,route)와 인터페이스 처리, 데이터 분할 등 정보 해석한다.
  → 이러한 정보는 IP 헤더에 담도록 한다.

Why grid layout

• 행과 열을 구분하는 데 있어서 추가 개발 없이 css로 2차원 레이아웃을 설계할 수 있다.
• 고정 크기를 가지는 요소들을 넓이에 유연하게 사용할 수 있음.
• 깔끔한 레이아웃을 외부 도움 없이 구현 가능.

지원 범위

Grid Container (부모) 관점

display

• 해당 부모 컨테이너를 그리드를 사용하는 것으로 설정.

1. grid : 블록 레벨의 그리드 생성
2. inline-grid : 인라인 레벨의 그리드 생성

grid-template-columns

grid-template-rows

• 그리드 스타일 을 컬럼인지 로우인지 정한다.

• 값은 트랙 크기를 말함. 그 사이 공간은 그리드 선을 나타냄.

• 그리드 선의 이름을 빈 공간을 두면, 양수와 음수가 자동적으로 생성된다.

.container{
	grid-template-columns : 40px 50px auto 50px 40px;
	grid-template-rows : 25% 100px auto;
}

• 명시적으로 이름을 지어 줄 수 있다.

  → [ ] 대괄호를 사용해서 지정.

  → 하나 이상의 이름을 가질 수 있음.

   

.container{
	grid-template-columns : [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
	grid-template-rows : [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

repeat()

• 반복되는 부분은 간소화 할 수 있다.

.container{
		grid-template-columns : repeat(3,20px,[col-name]);
		/*동일한 코드*/
		grid-template-columns : 20px [col-name] 20px [col-name] 20px [col-name];
}

///////////////////////////////////////////////////////////

.container{
		grid-template-columns : repeat(4, 10px 5px);
		/*동일한 코드*/
		grid-template-columns : 10px 5px 10px 5px;
}

fr 단위

• 전체의 길이에서 여유 공간의 일부를 사용할 수 있다.

/*전체 공간에 1/3씩 나눠서 쓰는 방식*/
.contaier{
		grid-template-columns : 1fr 1fr 1fr;
}

/*50px를 제외한 여유공간을 나눠서 사용하는 방식*/
.contaier{
		grid-template-columns : 1fr 50px 1fr 1fr;
}

grid-template-area

• grid-area로grid-area로 지정한 이름으로 위치를 마음대로 정할 수 있다. (GOOD!)

• 마침표는 빈 셀을 의미한다.

• 그리드의 격자형태를 기준으로 위에서부터 채워진다.

.a{
		grid-area : header;
}

.b{
		grid-area : main;
}

.c{
		grid-area : sidebar
}

.d{
		grid-area : footer;
}

.container{
		display : grid;
		grid-template-columns : 50px 50px 50px 50px;
		grid-template-auto : auto;
		grid-template-areas :
			"header header header header"
			"main main . sidebar"
			"footer footer footer footer"
}

grid-template

• 축약 사용 법

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}



.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
/*동일한 코드*/
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-auto-columns , grid-auto-rows

• 2x2 레이아웃을 설정하고 (4, 1)에 아이템을 지정하게 될 때

  → 즉 지정한 레이아웃을 벗어나게 될 경우 지정하지 않은 간격은 0으로 설정된다.

• 이 상황을 해결하기 위해서 사용.

  → 지정한 간격만큼 암시적으로 늘어난다.

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

• 그리드에 배치를 할 때, 명시적으로 배치한 것을 제외, 자동으로 배치해 줌.

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

/* 1번 이미지 */
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

/* 2번 이미지 */
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

자식 아이템 일괄 정렬

grid-column-gap , grid-row-gap

• 그리드 선의 크기를 정한다. 즉 열과 행 사이의 간격을 정한다고 생각하면 된다.

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

justify-items

• 인라인 컬럼 축을 기준으로 그리드 자식 아이템들을 정렬한다.

.container {
  justify-items: start;
	/* end | center | stretch */
}

align-items

• 인라인 로우 축을 기준으로 그리드 자식 아이템들을 정렬한다.

.container {
  align-items: start;
	/* end | center | stretch */
}

place-items

• align-items + justify-items 축약 설정

.container {
  place-items: start / end
	/* end | center | stretch */
}

justify-content

• 부모 컨테이너의 크기에 상관없이 아이템 크기만큼 레이아웃을 잡고 싶을 때.

• 컬럼 축을 기준으로

.container {
  justify-content: start;
	/* end | center | stretch | space-around | space-between | space-evenly */
}

align-content

• 부모 컨테이너 크기에 상관없이 아이템 크기만큼 레이아웃을 잡고 싶을 때

• 로우 축을 기준으로

.container {
  align-content: start;	
}

place-content

• 축약 설정

Grid Items (자식) 관점

grid-column-start, grid-column-end, grid-row-start, grid-column-end

• 특정 그리드 선을 기준으로 아이템을 배치한다.

• 항목을 겹칠 수 있으며, z-index로 컨트롤할 수 있다.

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

/* 축약 */
.item-a {
  grid-column: 2 / five;
  grid-row: row1-start / 3;
}

grid-area

• grid-template-areas를 통해 지정한, 템플릿에 배치할 수 있다.

.item-d {
  grid-area: header;
}

justify-self

• 아이템 자기 자신의 위치를 컬럼 기준으로 정렬

align-self

• 아이템 자기 자신의 위치를 로우 기준으로 정렬

place-self

• 축약 설정 가능, 1번째 align-self 2번째 justify-self

/* 1번 이미지 */
.item-a {
  justify-self: start;
	/* end | center | stretch */
}

/* 2번 이미지 */
.item-a {
  align-self: start;
	/* end | center | stretch */
}

/* 3번 이미지 */
.item-a {
  place-self: center stretch;
}

[ 참고 ]

A Complete Guide to Grid | CSS-Tricks

예제를 활용한 CSS 그리드 레이아웃 소개

Why FlexBox??

• 데스크톱데스크톱 시대를 벗어나 모바일 시대로 들어가면서 기존 float, position 만으로 대응하기가 어려워짐.

• 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적인 요소 배치, 정렬, 분산할 수 있는 방법을 CSS단에서 제공.

  → 복잡한 계산 없이 유연하게 배치할 수 있다!

지원 범위

1* 이전 flexbox만 지원, 줄 바꿈 미지원

2* 2012년 구문만 지원

3* flex-wrap, flex-flow, align-content 속성 지원하지 않음

4* 부분적으로 버그가 많음.

[참고]

https://caniuse.com/

flex-container(부모) 관점

Flexbox 기본 개념

• flexbox 인터페이스 내의 아이템 공간 배분과 강력한 정렬 기능을 제공함

• 1차원적인 레이아웃 모델로 설계되었다

  → 가로, 세로 한방향만 지원.

• 간단 구조

<div class="flex-container">
		<div class="flex-item"></div> 
		<div class="flex-item"></div> 
		<div class="flex-item"></div> 
		...
</div>

.flex-container{
		display : flex;
		
		flex-direction : row; /*플랙스 박스 가로 세로를 결정 */
		/* row | row-reverse | column | column-reverse */
		
		justify-content : flex-start; /* 메인축 기준 아이템의 정렬 방식 */
		/* flex-start | center | flex-end | space-between | space-around | space-evenly*/

		flex-wrap : nowrap; /* 아이템 항목들이 열 바꾸는 방식 */
		/* wrap | wrap-reverse | initial | inherit */

		flex-flow : row nowrap; /*flex-direction + flex-wrap 속기형*/
		/*두개의 인자값을 순서 상관없이 사용할 수 있고 각각 생략도 가능*/

		align-items : stretch; /* 아이템의 크기를 정렬과 관계지어 설정 */
		/* flex-end | center | flex-start | baseline */
		
		align-content : flex-start; /* 교차축 기준 아이템의 정렬 방식 */
		/* center | flex-end | space-between | space-around | space-evenly | stretch */
}

display : flex

• 플렉스 구조를 사용하려면 display : flex 인 컨테이너로 감싸주어야 한다.
• 감싸진 모든 아이템들은 플렉스 아이템으로 인식하게 된다.

flex-direction

• 기본은 행을 기준으로 배치된다.
• 속성 변경을 통해 좌, 우 , 상, 하 방향 중 결정할 수 있다.

1. row : 좌 → 우
2. row-reverse : 우 → 좌
3. column : 상 → 하
4. column-reverse : 하 → 상

flex-wrap

1. nowrap : 줄을 바꾸지 않는다,
2. wrap : 줄 바꿈을 할 수 있게 한다.
3. wrap-reverse : 반대 방향으로 줄을 바꿈
4. initial : 기본값 설정
5. inherit : 부모 요소로 부터 상속 값을 받음

justify-content

• 콘텐츠를 정렬하는 것.

1. fix-start : 기본값, 컨테이너 시작위치 (왼쪽)부터 정렬

2. fix-end : 컨테이너 끝 (오른쪽)부터 정렬

3. center : 항목을 중앙에 정렬

4. space-between : 첫 항목을 시작 위치, 끝 항목을 마지막 위치, 남은 아이템은 일정한 간격으로 배치

5. space-around : 아이템을 일정한 간격으로 배치

6. space-evenly : 완전히 균등한 공간으로 배분

7. initial : 기본값 따름.

8. inherit : 부모 요소로부터 값을 상속 받음.

   

align-items

• 아이템의 정렬 축을 기준으로 크기값을 설정한다.

1. stretch : 기본값, 모든 플렉스 항목들이 동일한 높이값을 가지도록 조정
2. flex-start : 플렉스 항목들을 컨테이너의 시작에 위치시키지만, 각 항목의 콘텐츠 양에 따라 결정
3. flex-end : flex-start 와 동일 하지만 컨테이너 끝부터 정렬
4. center : 항목 별로 위 아래 공간이 균일하게 분배
5. baseline : 각 항목의 중심을 기준으로 일정하게 정렬

align-content

• flex-box의 메인 축 (direction) 이 아닌 교차축을 기준으로 정렬하는 방식

1. flex-start : 위쪽부터 덩어리 형태로 배치, 여유 공간은 아래쪽에 위치
2. flex-end : 아래부터 덩어리 형태로 배치, 여유 공간은 위쪽
3. center : 교차축에 대해 수직 방향으로 기준으로 정렬
4. stretch : 컨테이너의 높이가 일정하도록 배치
5. space-between, space-around, space-evenly : justify-content와 동일 하나 기준 축이 교차 축

flex-item(자식) 관점

order

• 플랙스 아이템들의 순서를 정함.
• 모든 값은 기본값인 0 을 가짐.
• 양과 음의 정수를 모두 사용해서 정할 수 있다.

flex-basis

• 플랙스 아이템의 넓이 값을 지정.
• 값을 지정하고 남는 값은 grow / shrink로 재분배된다.
• 기본값 auto

flex-grow

• 플렉스 아이템의 넓이를 늘어나도록 정의해 줄 수 있는 속성.
• flex-basis를 정하게 되더라도 flex-grow의 속성이 우선된다.

flex-shrink

• flex-grow와 반대되는 개념.
• 아이템의 총너비의 합이 컨테이너보다 클 경우, flex-shrink의 기준대로 재 분배된다.

align-self

• flex 아이템 그 자체의 정렬을 바꿔주는 것.
• Container에서 설정 가능한 align-content or align-item은 일괄 적용이라면
• align-self는 아이템 개별로 제어가 가능.

1. stretch
2. flex-start
3. flex-end
4. center
5. baseline

[ 참고 ]

A Complete Guide to Flexbox | CSS-Tricks

모던 레이아웃 - 플렉스 박스(Flexbox)

OSI 7 계층

• 네트워크 통신이 일어나는 과정을 7단계로 나눈 것을 말한다.

구별 이유

• 통신이 일어나는 과정을 단계별로 파악할 수 있기 때문이다.
• 문제가 발생한 부분을 다른 곳을 건드리지 않고 고칠 수 있기 때문에.

계층 단계

1 계층 - 물리 계층

• 통신 케이블로 데이터를 전송하는 단계.
• 데이터 단위 : 비트 (bit)
• 프로토콜 : RS-232, RS-449
• 장비 : 허브, 리피터, 케이블

→ 데이터를 전송하기만 할 뿐. 데이터 내용, 에러에 대한 신경을 쓰지 않는다.

2 계층 - 데이터 링크 계층

• Point to Point 간의 안전한 정보의 전달의 수행

  *Point : 물리적으로 연결된 노드

• 데이터 단위 : 프레임 ( Frame )

• 프로토콜 : Mac ( 물리적 주소 )

• 장비 : 브리지, 스위치

→ 이 단계에서 프레임에 주소(MAC)를 부여하고 에러 검출, 재전송, 흐름 제어를 진행한다.

*흐름 제어 : 송수신의 속도를 측정하여 느린 쪽으로 맞춘다.

3 계층 - 네트워크 계층

• 라우팅

  *데이터를 목적지까지 가장 안전하고 빠르게 전달

• 데이터 단위 : 패킷 ( Packet )

• 프로토콜 : IP, ICMP

• 장비 : 라우터

→ 데이터를 연결하고 다른 네트워크로 전달. 인터넷이 가능하게 만들어 준다.

4 계층 - 전송 계층

• End to End 간의 안전한 전송을 지원

  *END : 프로세스를 의미.

• 현 계층에서 1~3 계층에서 해당 데이터를 합쳐서 5 계층으로 넘긴다.

• 데이터 단위 : 패킷 ( Packet )

• 프로토콜 : TCP, UDP, APR

• 장비 : 게이트웨이

→ 이 계층에서 패킷들의 전송이 유효한지 확인하고 전송이 실패한 패킷들을 다시 전송한다

→ 오류 검출 및 복구와 흐름 제어, 중복검사

5 계층 - 세션 계층

• 세션 계층은 프로세스 간의 연결을 유지해준다.

• 이 계층부터 소프트웨어 개발자가 직접 코딩해야 한다.

• 프로토콜 : SSH, TLS

→ 통신하는 사용자들을 동기화하고, 오류 복구 명령들을 다룬다.

6 계층 - 표현 계층

• 번역기 → 컴퓨터마다 다른 데이터 표현 방식을 변환해준다.

• 프로토콜 : JPEG, MPEG, ASCII, EBCDIC

→ 컴퓨터마다 16bit, 32bit, 64bit 등 표현 방식을 바꾸는 것,

→ EBCDIC → ASCII 바꾸는 것

→ 데이터가 TEXT, JPG, GIF 인지 판단.

7 계층 - 응용 계층

• 최종 목적지
• 프로토콜 : HTTP, FTP, SMTP, POP3, IMAP, Telnet

→ 일반적인 응용 서비스를 수행.