회고록(22) - 네트워크, 웹, HTTP + @

1. 데일리 일기

이전까지 알고리즘 문제풀다보니 회고록을 오랜만에 작성하는 것 같다. 문제 풀이를 올리는건 좀 아니라고 생각해서 그냥 문제만 계속풀었다.

이번부터 네트워크, 웹, HTTP 를 배웠다. 양이 너무 많아서 어느 정도 다읽고 정리는 했으나, 심화 내용들을 아직 공부하지 못했다.

그래서 회고록이지만 오늘은 일기만 쓰고 넘어간후, 틈틈이 작성하면서 그래도 부족하다면 주말에 총 정리를 해볼 예정이다.

오늘 범위를 공부하면서 내 독해속도가 조금 느린가...생각이 들었다. 개인적으로 만족할 정도로 이해하지 못하면 못넘어가는 성격이라 넘어가질 못한다. 이해가 되지 않는 부분은 일단 미루고, 노션에 기록해 두었다가 시간내에 모든 범위를 먼저 탐색하는게 좋은 것 같다. 우연히 뒷부분 내용을 배우면서 이해되는 부분도 있으니까 말이다.

그래도 만약 내일,모레, 3일 후까지도 쌓이는 것 같다면, 학습법에 대해서 상담을 좀 받아보고 싶다.

2. 오늘 배운 내용

웹 애프리케이션에 대한 이해

네이티브 애플리케이션

정의

• (안드로이드, ios등) 특정 실행환경에 종속되어 설치하고 사용하는 애플리케이션

장점

• 애플리케이션이 설치된 기기/시스템 리소스 접근이 용이하다.
• 인터넷이 없어도 실행가능하다.
• 보안이 상대적으로 좋다.

단점

• 더 많은 개발비가 들어간다.
• 빠른 업데이트가 힘들다.
• 운영체제에 독립적이지 않다.
• 앱스토어 통과가 힘들다.

웹 애플리케이션

정의

• 웹 브라우저 통해서 접근이 가능한 애플리케이션

장점

• 개발비가 싸다.
• 브라우저를 통해 실행하므로 실행환경에 독립적이다.
• 업데이트 및 유지 관리가 쉽다.
• 어플리케이션 스토어 승인이 필요없다.

단점

• 인터넷이 없으면 사용이 불가능하다.
• 네이티브 애플리케이션보다 상대적으로 느리다.
• 상대적으로 접근성이 떨어진다.
• 너무 자유로워서 보안이 상대적으로 취약하다.

네트워크를 만드는 기술

LAN

가까운 일부 호스트들을 한곳에 묶은 컴퓨터 네트워크를 말한다.

WAN

LAN 네트워크들을 연결하여 확장시킨 네트워크를 말한다.

인터네트워크

네트워크끼리 연결하여 네트워크를 확장한 개념을 말한다. 인터넷의 동작 방식이기도 하다.

장점

• 한 네트워크가 고장이 나거나 불필요한 통신이 일어나도 전체로 확산하지 않는다.
• 각 네트워크별로 개별 방침에 따라 관리가 가능하다.

프로토콜

각 호스트들 사이에서 메세지를 주고받을 수 있는 규칙의 체계이다.

왜필요할까?

프로토콜을 통해 어느 컴퓨터(호스트)든 일관된 규칙으로 네트워크를 사용할 수 있다.

Internet Protocol Suite

• 컴퓨터들끼리 인터넷에서 정보를 주고받는데 사용되는 통신규약의 모음이다.

최근 규약(프로토콜)은 TCP/IP 체계를 따르는 경우가 많다.

TCP/IP 체계

• 각 컴퓨터의 인터넷 프로토콜 스택은 Network Access Layer - Internet Layer - Transport Layer - Application Layer로 이루어져있다.
• 거시적으로 보면 한 Application Layer부터 올라와 다른 Application Layer로 데이터가 흘러가는 형식이다.

IP 주소

정의

• Internet Protocal
• 네트워크에 연결된 특정 컴퓨터의 주소를 말합니다.
• TCP/IP 체계에서 컴퓨터를 구별하기 위해 사용하는 주소입니다.

특징

• LAN 네트워크 내부에서 사용되는 것이 Private IP 주소이고, 인터넷에서 사용되는 것이 Public IP 주소이다.

IPv4

정의

• 네덩이의 숫자로 구성된 IP를 말합니다.
• 한덩이마다 옥텟(2진법의 8글자)로 이루어져 있습니다.

최근에는 IPv6가 나왔으나 아직도 IPv4를 주로 사용합니다.

MAC 주소

정의

• 네트워크 어댑터마다 한개씩 할당되어 있는 고유식별자로 네트워크 송수신 상대를 특정하기위한 네트워크 주소로 사용됩니다.

왜 필요할까?

• IP로 컴퓨터의 주소를 찾을 수는 있지만 실제로 네트워크 송수신을 보낼수는 없습니다.
• 네트워크 송수신을 위해서는 네트워크 주소인 MAC 주소가 필요합니다.
• 같은 LAN 네트워크의 송수신 상대를 찾기 위해 ARP 프로토콜이 동작합니다.
• ARP 프로토콜은 네트워크 전체에 패킷을 보내고 해당 IP를 가지고 있는 컴퓨터가 자신의 MAC주소를 Response하게 됨으로서 통신을 가능하게 해주는 프로토콜입니다.

패킷

정의

• 네트워크가 전달하는 데이터의 형식화된 블록이다.

why?

• 회선 교환 방식은 마치 전화처럼 여러 상대와 통신이 불가능 했기때문에, 여러 상대와 통신이 가능하게 하도록 패킷 교환 방식이 등장했습니다.
• 원본데이터를 작은 단위로 나누고, 여러 회선을 통해 통신을 주고받습니다.
• 작은 단위들은 목적지에 도착하면 가지고 있는 순서정보를 통해 다시 데이터로 복원됩니다.

서브넷 마스크

정의

• IP 주소의 네트워크부(주소)와 호스트부를 구분해주는 일을 합니다.

IP 주소의 할당과 관리

• 서브넷 마스크로 알게 된 네트워크 주소는 ex) 192.168.200.0 입니다. (호스트부가 0임)
• IP주소는 호스트 부의 숫자로 할당을 하게됩니다.(1~254) 가능
• 마지막 덩어리가 255(1111111) 인경으는 브로드캐스트 주소를 나타냅니다.

IP 프로토콜의 한계

• 비연결성(전송대상이 사라져도 모른다.)
• 비신뢰성(패킷이 중간에 잘못되어도 모른다.
• 인터넷 계층이므로, 한 IP주소에서 여러 Application을 사용할때 구별할수가 없다.

이를 위해 우리는 TCP UDP 를 사용한다.

TCP 와 UDP

공통점

• 인터넷 계층 위에서 동작한다.
• 인터넷 계층과 Application Layer(http) 를 중개해주는 역할을 한다.

차이점

• TCP는 전송을 보장하고, 전송 순서마저 보장해준다.(UDP는 보장하지 못한다.)
• TCP는 보장하다보니 느리다.(UDP는 빠르다.)

TCP 3 way handshake

1. SYN : 한 TCP(sender) 에서 다른 TCP(receiver)로 통신을 하고싶다고 보낸다.
2. SYN/ACK : 응답하는 ACK와 함께 SYN을 보낸다.
3. ACK : ACK를 reciver에게 다시 보내어, 연결이 성립된 사실을 알리고 실제 데이터가 전송이 시작됩니다.

UDP를 언제 쓸까

그렇 이렇게 전송 신뢰성이 있는 TCP가 있는데 UDP는 언제 쓸까?

• 애플리케이션의 정교한 제어가 필요할때(실시간 전송)
• 연결 설정에 무관하게 사용할때(속도가 최우선일때)

PORT

정의

• 같은 IP에서 여러 애플리케이션이 동작할떄 특정 애플리케이션을 특정하는 번호이다.

특징

• IP의 한계 극복
• TCP와 UDP에 사용됨
• 065535 개로 정할 수 잇으며, 특히 0 1023 포트는 통신규약으로 정해져있다.

URL

네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.

구조

• 프로토콜 - 호스트(IP주소,도메인주소) - url Path
• url path 이후로는 URI의 범위로 파일하나하나를 식별하는 의미를 지닌다.

도메인 네임

왜 만들어졌을까?

• IP주소는 숫자 네덩이 이기떄문에 외우기도 어렵고 가독성도 좋지않았다. 그래서 도메인이름으로 바꾸어 쉽게 사용 할 수 있다.
• gTLD, ccTLD의 TLD들로 도메인 종류가 나뉘어져 있습니다.

DNS

정의

• 호스트의 이름을 IP주소로 변환하거나 IP주소를 호스트의 이름으로 변환해오는 DB 시스템입니다.

동작방식

• 도메인 으로 요청이 있을때 DNS상의 리졸버가 도메인 서버로 IP 주소를 요청합니다.
• 이때 이전에 동작한적이 있어 캐시속에 IP주소가 있다면, 바로 돌려줍니다.
• 도메인 서버는 루트 네임 서버, TLD 네임서버, 권한이 있는 네임서버로 이루어져 있습니다.
  • 이러한 서버들도 전부 여러개 있기 때문에, 도메인 서버는 안정적으로 유지됩니다.
• 루트 네임서버는 TLD 네임서버의 주소를 리턴하고, TLD 네임서버는 권한ㄴ이 있는 네임서버의 주소를 리턴하고 최종적으로는 우리가 요청한 주소의 IP주소를 반환해 주면서 캐시속에 저장합니다.

Zone file

• 위의 DNS 동작방식에서 요청들은 Zone file table을 통해 각각의 요청에 알맞은 IP 주소들을 받아올 수 있습니다.
• 이름 레코드 /클래스 /TTL/레코드 타입/ 레코드 데이터 로 이루어져 있으며 데이터쪽에 쪼개진 IP주소들이 존재합니다.

웹을 구성하는 기술

웹이란?

인터넷에서 제공하는 하이퍼 텍스트 시스템을 말한다.
여기서 하이퍼 시스템은 텍스트 뿐만 아니라 하이퍼텍스트로 문서간의 정보를 서로 연관지어 참조할 수 있는 구조를 말한다.

클라이언트 서버 아키텍쳐

웹에서 제공되는 서비스들은 주로 클라이언트의 요청과 서버의 응답으로 이루어져있습니다.

why?

• 리소스가 존재하는 곳과 활용하는 곳을 분리시켜, 계속 변하는 리소스에서도 끊임없이 업데이트없이 클라이언트쪽 App을 사용하게 할 수 있게 만듭니다.

Web application란?

• 정적인 Website에 동적페이지를 추가한 형태이다.
• 요즘의 대부분은 Web Application 이라고 말 할수 있다.

웹 어플리케이션 아키텍처란?

웹 어플리케이션 아키텍처의 정의

• 유저가 웹 브라우저를 통해 요청을 하면 어플리케이션의 다양한 요소들(프론트족의 브라우저 부터 서버쪽의 DB까지)이 알맞은 상호작용을 유지할수 있도록 설계하는 방법이다.
• 많은 유저가 요청했을때, 알맞은 응답을 할 수 있도록 설계하는 것이 중요하다.

웹 어플리케이션의 요소들

• 유저 인터페이스 요소 : 유저의 입력에 따라 브라우저에서 작동하는 프로그램은 Client side에서 처리하고,
• 구조 요소 : 브라우저의 HTTP 요청에 따라 서버에서 요청을 처리하는 부분을 Server Side에서 처리합니다.

웹 애플리케이션을 3단계 계층구조로 나누기도 합니다.

• Presentation Layer : UI 같은 유저와 직접 접촉하는 곳
• Application Layer : 유저의 요청을 처리하는 곳(비즈니스 로직등이 들어감)
• Data Access Layer : 필요한 데이터를 불러오거나 저장하는 LAyer

웹 애플리케이션 구현 방식

• Single Page Application : 한 페이지에서 페이지 변화없이 상호작용 가능한 요소들로 구성된 APP
• Microservice arichitecture : 모듈처럼 작고 가벼운 특정한 한가지 기능에 집중한 웹 애플리 케이션
• Severless Architecture : 웹 애플리케이션 서버와 기타 기능들을 제 3자에게 의탁하는 방식

웹 애플리케이션의 구현 기술

1. HTTP
2. Cookie와 세션
3. 사용자 인증

SSR(Server Side Redering) CSR의 차이점

SSR

• 서버에서 웹 페이지를 다 만들어 놓은 후, 브라우저에게 body로 보내면 페이지를 그대로 렌더링하는 방식을 말한다.
  CSR
• 서버에서 페이지를 받아오는 경우 : 서버에서 웹페이즈의 골격이 될 부분과 JS 파일을 보내고, 브라우저에서 해당 페이지를 완전히 렌더링된 페이지로 바꾼다.
• 서버에서 데이터를 받아오는 경우 : 받아온 데이터를 가지고 웹페이지에 렌더링 합니다.

언제쓸까?

• SEO에 유리해야하거나 페이지를 당장 빨리 보여주어야하거나, 사용자와 상호작용이 적을댸는 SSR을 사용한다.
• 사용자와 상호작용이 많거나 동적 렌더링 페이지를 만들때는 CSR을 사용합니다.

CORS(cross origin resource sharing)

• HTTP 헤더를 추가해서 한 서버와 연결된 웹 애플리케이션이 다른 서버의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제를 말한다.

• 일반적으로는 다른 도메인의 서버가 들어오는 것을 막고 있지만 CORS를 이용하면 다른 도메인 서버의 리소스를 가져 올수 있는 것이다.

종류

• Simple requset : 특정 조건들을 만족해야만 사용가능
• preflighted request : 사용자 정의 헤더를 이용하면 preflighted request가 가능하다.
  • 실제로 HTTP 메서드를 실행하기전에 OPTIONS로 해당 서버에 문제가 되지 않는지 요청한다.
• credential requset : 다른 도메인과의 요청에서도 쿠키와 세션을 유지하고 싶을때 하는 요청입니다.

AJAX

정의

• Single Page Application을 만들기 위해 사용되는 Ashchronous JavaScript And XMLHttpRequest의 약자이다.
• 웹 페이지의 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 나타낼수 있게 하는 기술입니다.

어디쓰이나?

• 구글 검색창
• 무한스크롤

장점

• 화면에 필요한 부분만 렌더링 할수 있다.
• 어느 브라우저든 사용가능하다
• 유저 중심의 APP 생산이 가능하다.
• 더 작은 대역폭으로 서버에서 데이터를 보낼수 있다.

단점

• 서버에서 기본 뼈대만 보내므로 SEO에 불리하다.
• 뒤로가기 시 AJAX는 이전 상태를 기억하지 않으므로 문제가 발생할 수 있다.(따로 해결해줘야한다.)

HTTP

HTTP란

정의

• HyperText Transfer Protocaol의 줄임말로 HTML 같은 문서를 전송하기 위한 Application Layer 프로토콜입니다.

무상태성

• 클라이언트와 서버가 통신을 주고받는 과정에서 HTTP는 이들의 상태를 저장해주지 않습니다.

HTTP 메세지

HTTP 메세지는 클라이언트와 서버간의 요청, 응답에 사용되는 메세지입니다.

구조
Start Line(Status Line) - HTTP headers - emptyLine - body 로 구성되어 있습니다.

HTTP 메서드

• GET
• POST
• PUT
• PATCH
• DELETE

클라이언트와 서버 사이에서 hTTP가 동작하는 방식

1. 클라이언트가 HTTP 규정대로 브라우저 URI로 요청메세지를 작성하여 보낸다.
   • 고려할점 : HTTP 메서드, URI, HTTP 버전등
   • 서버에서 만들어 놓은 API 규정에 맞게 요청 URI를 보낸다.
2. 요청 받은 서버는 요청에 알맞은 데이터를 바디에 넣어 제공한다.

3. 새로 알게 된 내용 & 이해가 안가는 내용

이해가 안가는 내용

라우팅 부분이 이해가 안가서 따로 정리해서 노션에 적어놓을 예정이다.