09.30 (웹-앱 작동원리)

 

 

이 수업을 받기 전에 웹과 앱은 다르다고 생각했다.

사실 다르긴 하다. 웹이 웹으로만 이루어져 있다면 말이다.

여기서 말하는 웹은 인터넷에서 제공되는 하이퍼텍스트 시스템을 의미한다.

지금 우리가 사용하는 웹사이트의 대부분은 웹으로만 이루어져 있지 않다.

웹으로만 이루어져 있다면 그 사이트는 정적일 것이다. 해당 페이지에서 추가적인 반응을 일으킬 수 없다는 것이다.

하지만,

우리는 어디서나 동적인 웹사이트를 마주하고, 그 안에서 특정 기능을 사용할 수도 있고 상호작용 또한 할 수 있다.

즉, 웹사이트가 동적 페이지를 포함하게 되는 순간부터 웹 애플리케이션이 된다는 것을 의미한다.

우리가 오늘날 사용하고 있는 거의 모든 웹사이트들이 웹 애플리케이션으로 이루어져 있다.

 

---

요약

 

LAN(Local Area Networks) = 좁은 범위에서 연결된 네트워크

WAN(Wide Area Networks) = LAN들이 모여 구성된 세계의 네트워크

 

인터네트워킹(internetworking) = 한 네트워크를 확장하거나, 네트워크와 네트워크를 연결하는 등

여러 네트워크를 연결하는 것 (전 세계적으로 인터네트워킹 하는 것이 우리가 사용하는 인터넷임)

 

프로토콜(protocol) = 컴퓨터들 간의 소통에 필요한 공통된 약속

가전제품의 전원 연결부와 전원 코드가 모두 일정 규격에 맞춰져 있는 것처럼 일관되어 있다.

 

IP주소(Internet Protocol address, IP address) =  네트워크에 연결된 특정 PC의 주소를 나타내는 체계

IPv4(네 덩이의 숫자로 구분된 IP 주소체계)를 사용하고 있지만 많은 PC의 보급으로 인해 IPv6가 생겨났다.

 

MAC 주소 = 제조사에서 할당하는 고유 시리얼인 MAC 주소를 IP주소와 조합해야만 네트워크를 통한 통신이 가능하다.

이더넷에서는 네트워크 상의 송수신 상대를 특정하고자 MAC 주소를 사용하고 TCP/IP 에서는 IP address를 사용하기 때문

(+ 이더넷 = 가정이나 건물과 같은 로컬 환경의 컴퓨터 및 기타 장치를 네트워크에 연결하기 위해 개발된 통신 표준)

 

패킷 = 컴퓨터는 여러 상대와 통신이 가능해야 했기 때문에 원본 데이터를 패킷이라고 하는 작은 단위로 나누고

여러 회선을 공용해 통신을 주고받는다. (패킷 교환)

(+ 전화는 회선 교환(1대 1 데이터 교환)이다.)

 

---

IP 

 

192.168.1.1에서 (IPv4)

192.168.1 까지는 어떤 네트워크인지를 알 수 있는 정보인 네트워크 부이고

그 이후 .1 은 그 네트워크 안의 특정 컴퓨터를 지칭하는 정보이다.

여기서 네트워크부가 어디까지인가를 나타내는 것을 서브넷 마스크라고 한다.

8자리 2진수 묶음을 옥텟이라고 한다. 즉, IPv4 주소는 4개의 옥텟을 갖고 있다. (4개의 8비트 필드로 이루어짐)

 

IP주소는 호스트부를 변경해 가면서 할당이 이루어진다.

8자리로 이루어진 2진수이고, 0과 255를 제외한 254개의 주소만이 할당 가능하다.

(호스트부 = 0  → 네트워크 주소, 호스트부 = 255 → 브로드캐스트 주소)

 

비연결성(패킷을 받을 대상이 없거나 서비스 불능 상태에 빠져도 상대의 상태 파악이 불가능하기 때문에 그대로 전송)

비신뢰성(중간에 패킷이 사라져도 알 수 없고, 서로 다른 노드를 거쳐 전송되는 특성상 의도한 순서대로 도착하지 않을 수 있음. 또한 한 IP에서 여러 애플리케이션이 작동하는 경우 특정할 수 없음)

의 한계를 갖고 있다.

 

 

TCP

 

연결 지향적 프로토콜

데이터 전송 표적 기기까지의 전송을 보장하고 전송하는 패킷들의 순서가 보장된다.

신뢰성을 높이는 기능들이 실현되어 있다. (데이터의 신뢰성을 필요로 하는 애플리케이션에 사용)

HTTP의 경우 모든 데이터의 송수신이 가능해야 하기 때문에 TCP를 사용한다.

UDP보다 느리다.

 

 

UDP

 

데이터그램 지향적 프로토콜

전송을 보장하지 않고, 순서가 보장되지 않는다.

하지만 TCP보다 빠르고 단순하며 더 효율적이다. (빠른 속도나 실시간 통신이 중요한 애플리케이션에 사용)

 

 

PORT

 

IP 프로토콜만으로는 한 IP에서 여러 애플리케이션이 동작할 경우 특정 애플리케이션을 골라서 통신할 수 없다.

따라서 대상 IP 기기의 특정 애플리케이션을 특정하는 번호인 PORT를 사용한다.

0 ~ 65,535까지 사용할 수 있고 0 ~ 1023 까지는 주요 통신을 위한 규약에 따라 이미 정해져 있다.

 

 

URL

 

Uniform Resource Locater

웹에 게시된 어떤 자원을 찾기 위한 브라우저에서 사용되는 메커니즘

인터넷상에서 HTML이나 이미지 등 리소스의 위치를 특정하기 위한 서식으로써 탄생했다.

http://	www.google.com:80	/search	?q=Java
:scheme:	:hosts:	:url-path:	:query:

scheme = 통신 방식(프로토콜)을 결정한다.

hosts = 웹 서버의 이름, 도메인, IP를 사용해서 주소를 나타낸다.

url-path = 웹 서버에서 지정한 루트 디렉터리부터 시작하여 웹 페이지, 이미지 등 위치한 경로와 파일명을 나타낸다.

 

URI = (URL의 상위 개념) query, bookmark가 포함된다.

query = 웹 서버에 보내는 추가적인 질문

 

 

Domain name 

 

웹 사이트 주소를 IP주소로만 작성해서 이용하기엔 직관적이지 않고 기억하기도 어려움.

→ 호스트 이름과 도메인 이름으로 바꿔 사용

hosts(127.0.0.1) → www(subdomain). google.com(domain)
(서울시청의 자세한 주소를 말하지 않고 서울시청이라고 말하면 도착지에 갈 수 있는 것과 비슷하다.)

 

gTLD(generic Top Level Domain,. com 등)와 
ccTLD(country code Top Level Domain,. kr 등)으로 종류를 나눌 수 있다.

 

+ DNS(Domain Name System)

호스트의 도메인 이름을 IP주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템

 

---

Web Application Three Tier Architecture (3단계 계층구조)

 

Presentation Layer = 유저와 브라우저 등을 이용해 직접적으로 접촉. UI
Application Layer = 유저의 요청을 브라우저로부터 받아서 처리. 데이터 접근을 위한 경로를 규격화하는 등의 과정
Data access Layer = 애플리케이션의 데이터 저장소에 접근하여 데이터를 불러오거나 저장

+

Cross-cutting = 보안, 통신, 운영 관리 등을 위한 요소
Third-party integrations = 제3의 API 서비스 이용하는 것을 의미 (소셜 로그인, 결제 기능)

 

 

웹 애플리케이션 구현

 

Single page Application

 

유저의 입력과 요청에 의한 콘텐츠나 정보의 최신화가 페이지를 새로 불러오지 않고 현재 페이지에서 이루어짐
직관적으로 알기 쉽고 상호작용 가능한 요소들을 이용, 필수적인 요소만을 요청하기 때문에 유저 경험을 극대화
→  AJAX, Asynchronous JavaScript, XML이 주로 사용

 

Microservice Architecture

작고 가벼운 특정한 한 가지 기능에 집중한 웹 애플리케이션
각 애플리케이션의 기능 요소들은 상호 간에 의존적으로 설계되지 않음.
→ 원하는 언어를 사용해 기능 개발에 유연성 가짐, 개발 과정의 전반적 속도와 생산성 향상

 

Serverless Architecture

개발자가 웹 애플리케이션의 서버와 기타 기반 기능들에 대해 외부의 3자인 클라우드 서비스 제공자에 의탁하는 방식
→ 특정 기능 개발에만 집중 가능

 

쿠키

웹 애플리케이션을 사용하는 유저의 정보를 클라이언트에 보관
다음 접속부터는 유저의 정보를 클라이언트가 서버로 보내서 유저를 서버가 식별하게 함
쿠키에 담긴 내용으로 유저가 설정했던 항목에 대해서 저장을 해 다음에 이어서 같은 방식으로 작동하게 도와준다.
EX) 쇼핑몰 앱 장바구니

세션

서버에 고유 아이디를 할당해서 유저를 식별
유출되면 안 되는 정보는 서버에서 관리하면서 세션 ID와 매칭 해서 저장해 관리
세션정보는 쿠키에서 관리, 매칭 값들은 서버 측에서 관리가 일반적

사용자 인증

컴퓨터나 특정 시스템 이용 시 유저를 식별할 수 있는 ID값과 암호를 입력
다른 사람의 접근을 차단
일회용 패스워드를 받는다거나, 통신사 전용 소프트웨어 사용, OTP 사용 등 추가적인 인증 절차를 밟음으로써 안정성 증대

 

 

SSR

 

Server Side Rendering

자바스크립트가 웹 페이지를 브라우저가 아닌 서버에서 렌더링 하게 하는 것

(가구 주문 시 조립이 완료된 상태로 도착)

첫 화면 렌더링이 빠르게 필요한 경우(단일 파일의 용량이 작음)와 웹페이지가 사용자와의 상호작용이 적은 경우 사용

검색엔진에 최적화(노출도↑)

하지만

자원 이용이 서버에 집중되어 있어 유지비용이 높고, 일부 서드파티 자바스크립트 라이브러리의 경우 사용이 불가능

 

 

CSR

 

Client Side Rendering

클라이언트에서 자바스크립트가 페이지를 렌더링함

(가구 주문 시 조립이 안되어 있는 상태로 도착)

브라우저의 요청을 서버로 보냄
→ 서버는 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보냄(자바스크립트 파일도 같이)
→ 클라이언트가 페이지와 파일을 받고 렌더링을 통해 완전한 웹 페이지를 구성

 

사이트에 풍부한 상호작용이 있는 경우 빠른 라우팅으로 강력한 사용자 경험을 제공하고

더 나은 사용자 경험(빠른 동작 렌더링 등)을 제공할 수 있다.

하지만

느린 렌더링 속도로 사용자 경험이 안 좋아질 경향(모든 렌더링의 부하가 클라이언트에 집중)이 있고

search engine bots(웹 사이트 트래픽의 품질과 양 개선)과 상성이 안 좋다.

 

 

CORS

 

Cross-Origin Resource Sharing

브라우저 시큐리 모델

웹 애플리케이션의 사용자를 보호하기 위한 브라우저의 자발적인 보호 조치

브라우저에서 서버에 요청을 하고 그에 동의하면,

그 이후에 기존에 요청하려고 했던 것들을 요청해서 정보를 얻게 되는 과정을 거친다.

 

 

AJAX

 

Asynchronous JavaScript And XMLHttpRequest

JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.

웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다.
구글의 검색창, 원티드 탐색 페이지의 무한 스크롤, 페이스북 메시지, 포털사이트의 뉴스 탭 등에 사용된다.

 

---