[TIL] 웹 애플리케이션 작동원리

1. 웹 애플리케이션에 대한 이해

• 특정기기에 설치하여 사용하는 애플리케이션(application)을 네이티브 애플리케이션(Native App)이라 부름
• 네이티브 애플리케이션의 환경은 Apple IOS, Android OS, Windows 같은 것을 이야기함
• 웹 어플리케이션은 웹 브라우저를 통해 접근 할 수 있는 애플리케이션을 이야기함

웹 애플리케이션

장점

1. 플랫폼 독립적: 웹 애플리케이션은 웹 브라우저에서 실행되기 때문에 여러 플랫폼에서 작동합니다.
2. 설치 및 업데이트가 간단함: 사용자는 웹 애플리케이션을 설치할 필요가 없으며, 개발자는 업데이트를 서버에서 진행하여 모든 사용자가 자동으로 최신 버전을 사용할 수 있습니다.
3. 저비용 개발: 웹 애플리케이션은 다양한 플랫폼에서 작동하기 때문에 별도의 개발 및 유지보수 비용이 절감됩니다.

단점

1. 성능: 웹 애플리케이션은 네이티브 애플리케이션에 비해 일반적으로 느린 성능을 가집니다.
2. 인터넷 연결 요구: 웹 애플리케이션은 인터넷 연결이 필요한 경우가 많으며, 오프라인에서 실행되지 않을 수 있습니다.
3. 제한된 기능: 웹 애플리케이션은 브라우저의 제한으로 인해 일부 기능을 사용할 수 없거나 제한될 수 있습니다.

네이티브 애플리케이션

장점

1. 성능: 네이티브 애플리케이션은 웹 애플리케이션에 비해 일반적으로 빠른 성능을 가집니다.
2. 풍부한 기능: 네이티브 애플리케이션은 장치의 모든 기능에 접근할 수 있어 더 풍부한 기능을 제공합니다.
3. 오프라인 사용 가능: 네이티브 애플리케이션은 인터넷 연결 없이도 사용할 수 있는 경우가 많습니다.

단점

1. 플랫폼 별 개발: 네이티브 애플리케이션은 특정 플랫폼에 최적화되어 개발되기 때문에 여러 플랫폼에서 작동하려면 추가 개발이 필요합니다.
2. 설치 및 업데이트 과정: 사용자가 네이티브 애플리케이션을 사용하려면 앱을 직접 설치해야 합니다. 또한 개발자가 애플리케이션을 업데이트할 때마다 사용자가 수동으로 업데이트를 설치해야 할 수 있습니다.
3. 저장 공간 요구: 네이티브 애플리케이션은 사용자의 장치에 설치되므로, 저장 공간을 차지합니다. 이는 특히 저장 공간이 제한된 장치에서 문제가 될 수 있습니다.
4. 앱 승인 및 배포: 네이티브 애플리케이션은 종종 앱 스토어를 통해 배포되며, 이 경우 개발자는 스토어의 가이드라인을 따라야 하고 승인 과정을 거쳐야 합니다. 이로 인해 애플리케이션 출시까지의 시간이 늘어날 수 있습니다.

2. 네트워크를 만드는 기술

TCP/IP 기본

LAN과 WAN

• LAN(Local Area Network) 좁은 범위의 네트워크
• WAN(Wide Area Network) 수많은 LAN이 모여 전세계 네트워크를 구성

인터 네트워킹(internetworking)

Internetworking은 여러 개의 독립적인 네트워크들이 상호 연결되어 하나의 큰 네트워크로 동작하도록 하는 과정이나 기술을 말합니다. 이는 서로 다른 네트워크들 사이에서 데이터를 전송하고 통신할 수 있도록 하기 위한 필수적인 과정입니다. 인터넷은 가장 대표적인 인터네트워킹의 예시로, 전 세계 수많은 네트워크들이 연결되어 정보를 주고받는 방대한 네트워크입니다. 이러한 인터네트워킹은 라우터, 브리지, 게이트웨이와 같은 네트워크 장비들을 사용하여 이루어지며, TCP/IP와 같은 통신 프로토콜을 기반으로 합니다.

프로토콜(protocol)

• 컴퓨터들끼리 소통하는데 필요한 약속된 규격
• 서로 다른 컴퓨터끼리 혹은 멀리 떨어져있는 컴퓨터들끼리 네트워크를 통해서 소통할 때 일관되어야 서로 통신이 가능함

TCP/IP

• 인터넷 통신 스위트(Internet Protocol Suite) 은 인터넷에서 컴퓨터들이 서로 정보를 주고받는데 쓰이는 통신규약의 모음
• TCP(Transmission Control Protocol), IP(Internet Protocol)
• TCP/IP 4계층 모델 → 인터넷 통신을 가능하게 하는 프로토콜들의 집합, 각 계층 마다 서로 다른 역할과 담당이 있음

계층 이름 설명 예시

1	응용 계층 (Application Layer)	사용자와 가까운 계층, 응용 프로그램 동작	HTTP, FTP, SMTP, IMAP, POP3
2	전송 계층 (Transport Layer)	데이터 신뢰성 있는 전송, 세그먼트 분할 및 에러 복구	TCP, UDP
3	인터넷 계층 (Internet Layer)	데이터 경로 결정, 다른 네트워크와의 통신	IP, ICMP, ARP
4	네트워크 인터페이스 계층 (Network Interface Layer)	물리적 네트워크 장비와의 인터페이스, 데이터 전송	Ethernet, Wi-Fi, PPP

IP

• IP는 Internet Protocol의 줄임 말
• IPv4는 Internet Protocol version 4의 줄임 말
• IPv6(IP version 6) - 개인 PC의 보급이 늘어나면서 IPv4로 할당할 수 있는 PC의 한계를 넘게되어 등장, 그러나 아직 IPv4를 많이 사용
• IPv4 인프라가 많이 구축되어 있어서 여전히 사용중이지만 곧 미래에는 결국 주소 고갈 문제로 IPv6로 넘어가야 할 필요성이 있음
• IP프로토콜의 한계 : 중간에 패킷이 손실 되었을 때 송신자 측에서 알 수 있는 방법이 없

MAC

• 네트워크 기기는 제조사에서 할당한 고유 시리얼, MAC 주소를 IP 주소와 조합해야만 네트워크 통신이 가능함
• MAC 주소를 파악하기 위해 ARP (address resolution protocol)을 사용
• ARP를 통해 MAC 주소를 파악하는 과정
  1. 송신 호스트는 수신 호스트의 IP 주소를 알고 있지만, 수신 호스트의 MAC 주소를 모릅니다.
     • 송신 호스트는 네트워크 상에서 특정 IP 주소로 데이터를 보내기 위해 해당 IP 주소에 해당하는 MAC 주소를 필요로 합니다.
  2. ARP 요청을 보냅니다.
     • 송신 호스트는 수신 호스트의 IP 주소에 해당하는 MAC 주소를 찾기 위해 ARP 요청 패킷을 브로드캐스트합니다. ARP 요청 패킷에는 송신 호스트의 MAC 주소와 IP 주소, 그리고 수신 호스트의 IP 주소가 포함됩니다.
  3. 수신 호스트는 ARP 요청을 받습니다.
     • 수신 호스트는 자신의 IP 주소와 ARP 요청 패킷에 포함된 IP 주소가 일치하는지 확인합니다. 일치한다면, 수신 호스트는 ARP 응답 패킷을 송신 호스트에게 전송합니다.
  4. ARP 응답을 보냅니다.
     • ARP 응답 패킷에는 수신 호스트의 MAC 주소가 포함됩니다. 송신 호스트는 이를 수신하여 해당 MAC 주소를 캐싱합니다.
  5. 캐시를 사용하여 향후 패킷 전송에 사용합니다.
     • ARP 응답을 받은 송신 호스트는 해당 MAC 주소를 캐싱합니다. 이후, 동일한 IP 주소로 데이터를 보내야 할 경우, 송신 호스트는 이전에 수신한 ARP 응답을 사용하여 MAC 주소를 찾습니다. 이를 통해 ARP 요청 패킷을 보내지 않아도 되므로, 패킷 전송 속도가 향상됩니다.
  위와 같이 ARP를 사용하여 MAC 주소를 파악하는 과정은, 송신 호스트가 IP 주소를 가지고 있지만 해당 IP 주소에 해당하는 MAC 주소를 모르는 경우에 사용됩니다. ARP는 로컬 네트워크에서만 작동하기 때문에, 다른 네트워크로 패킷을 전송할 때는 다른 프로토콜을 사용해야 합니다.
• ARP를 통해 MAC 주소를 파악하는 과정은 다음과 같습니다.
• ARP에 대한 비유 설명
• ARP를 비유하자면, 우리가 특정 주소에 우편을 보낼 때 해당 주소의 우편번호를 찾는 것과 비슷합니다. 만약 주소만 가지고 있고 우편번호를 모르는 경우, 우체국에 요청을 보내 우편번호를 확인합니다. 이후에는 이전에 확인한 우편번호를 기억해두고, 다음에 같은 주소로 우편을 보낼 때는 다시 우편번호를 찾지 않아도 됩니다. ARP도 마찬가지로, IP 주소와 매핑된 MAC 주소를 찾기 위해 네트워크 상의 다른 컴퓨터에 요청을 보내고, 이후 이전에 찾은 MAC 주소를 캐싱하여 더 빠르게 데이터 전송을 가능하게 합니다.

패킷

• 패킷 교환 방식의 원리 : 원본 데이터를 패킷(packet) 이라고 하는 작은 단위로 나누고, 여러 회선을 공용해 통신을 주고 받음
• 이러한 방식을 통해 여러 상대와 통신이 가

TCP, UDP

TCP 3-way handshake

TCP/IP 의 개념은 1970년대 미 국방부가 미국 과 영국, 그리고 프랑스의 대학들의 연구자들과 협력하여 개발

국방부가 TCP/IP를 전시중에 신뢰성을 잃지 않는다고 판단한 이유 - 블로그글

라이브세션

mac 환경
traceroute google.com
192.168.0.1
222.117.215.1
...

window 환경
tracert google.com

google.com 을 찾아가는 경로를 알려줌

원래는 이 IP주소를 다쳐서 찾아가야했지만 DNS를 통해 웹주소를 통해 찾아 갈 수 있음

개발자 도구

네트워크 탭에 가면 페이지를 새로고침할 때 어떤 식으로 돌아가는지 모든 정보가 다 들어있음

Headers 등등을 자주 들어가서 확인하는 것이 좋음

DNS(Domain Name System)

1. 주소요청 : 클라이언트 → DNS Resolver
2. Cache : 접속한 경험이 있는지 없는지 체크함, 어떤 정보에 접근한 적이 있는지 확인하는게 Cache라고 말함
3. RootServer에 질의 :
4. RootServer 응답 : 이 도메인에 대해서 알아?
5. TLDServer 응답 : 이 도메인에 대해서 알아?
6. NameServer 응답 : 최종적으로 물어봄 이 도메인 알아?
7. NameServer에 바로 가지 않는 이유 : 목적을 나눈다

클라이언트 서버 워크 플로우

클라이언트 → ((Tomcat) Web server → Servlet container) → spring container

WAS

cilient → DispatcherServlet(일할사람?) → handlerAdapter(해당 기능 다루는 사람?) → Controller → Service → DAO → Data (request)

다시 역방향으로 response

3. 웹을 구성하는 기술

웹 애플리케이션 구성 요소

1. 프론트엔드(Front-end)

• HTML: 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다.
• CSS: 웹 페이지의 스타일과 디자인을 정의하는 스타일 시트 언어입니다.
• JavaScript: 웹 페이지의 상호작용 및 동적 기능을 구현하는 프로그래밍 언어입니다.

2. 백엔드(Back-end)

• 웹 서버(Web Server): 클라이언트의 요청을 받아 처리하고 응답을 반환하는 서버입니다. (예: Apache, Nginx)
• 애플리케이션 서버(Application Server): 비즈니스 로직을 처리하는 서버로, 웹 서버와 데이터베이스 사이에서 작동합니다. (예: Node.js, Django, Ruby on Rails)
• 데이터베이스(Database): 웹 애플리케이션의 데이터를 저장하고 관리하는 시스템입니다. (예: MySQL, PostgreSQL, MongoDB)

3. 프레임워크(Frameworks)

• 프론트엔드 프레임워크: 웹 애플리케이션의 사용자 인터페이스를 개발하는 데 도움이 되는 도구 모음입니다. (예: React, Angular, Vue.js)
• 백엔드 프레임워크: 웹 애플리케이션의 서버 측 개발을 쉽게 만들어주는 도구 모음입니다. (예: Express.js, Django, Ruby on Rails)

웹 애플리케이션 Three Tier Architecture

계층 설명

Presentation Layer	유저 인터페이스 요소를 포함하며, Web Server가 이 영역에 포함됩니다.
Application Layer	비즈니스 로직을 처리하며, Application Server가 이 계층에 포함됩니다. 데이터 접근을 위한 경로를 규격화하는 과정이 포함됩니다.
Data access Layer	데이터 저장소에 접근하여 데이터를 불러 오거나 저장을 담당하는 계층입니다.

이 외에도 웹 애플리케이션에서 중요한 역할을 하는 Cross-cutting 요소와 Third-party integrations에 대한 설명이 추가되어 있습니다.

4. Cross-cutting 요소

• 보안(Security): 웹 애플리케이션에서 중요한 정보를 보호하기 위해 사용되는 기술 및 방법론입니다. (예: 인증, 인가, 데이터 암호화)
• 통신(Communication): 클라이언트와 서버 간의 데이터 전송 및 교환을 담당하는 기술입니다. (예: HTTP, WebSockets, RESTful API)
• 운영 관리(Operations Management): 웹 애플리케이션의 성능, 안정성 및 확장성을 관리하는 기술 및 도구입니다. (예: 로드 밸런싱, 모니터링, 로깅)

5. Third-party integrations

• 소셜 로그인(Social Login): OAuth 2.0과 같은 인증 프로토콜을 사용하여 사용자가 웹 애플리케이션에 소셜 미디어 계정을 사용하여 로그인 할 수 있게 합니다. (예: Facebook, Google, Twitter)
• 결제 기능(Payment Functionality): 결제 게이트웨이(Payment Gateway) 서비스를 사용하여 웹 애플리케이션에서 결제를 처리하고 관리할 수 있습니다. (예: Stripe, PayPal, Square)

웹 애플리케이션 개발에는 다양한 요소와 기술이 사용되며, 각 요소가 서로 긴밀하게 연결되어 웹 애플리케이션의 전체적인 구조와 기능을 구성합니다. 개발자는 웹 애플리케이션의 필요에 따라 이러한 요소를 선택하고, 프론트엔드와 백엔드 개발을 통해 웹 애플리케이션을 구축합니다. 이 과정에서 프레임워크와 라이브러리를 사용하여 개발의 효율성과 유지 보수성을 높일 수 있습니다.

웹 애플리케이션을 개발하고 유지보수하는 데 있어서 몇 가지 추가적인 개념과 기술들이 있습니다.

6. 반응형 웹 디자인(Responsive Web Design)

반응형 웹 디자인은 웹 애플리케이션의 사용자 인터페이스가 다양한 기기(데스크톱, 태블릿, 스마트폰 등)의 화면 크기와 해상도에 맞게 적절하게 조정되도록 디자인하는 기법입니다. 이를 통해 사용자들이 어떤 기기를 사용하더라도 최적의 사용자 경험을 제공할 수 있습니다.

7. Progressive Web Apps(PWAs)

프로그레시브 웹 앱은 웹 애플리케이션을 개발하는 방법 중 하나로, 웹 애플리케이션에 네이티브 앱과 유사한 기능과 성능을 제공할 수 있도록 하는 기술입니다. 이를 통해 오프라인 작동, 푸시 알림, 홈 화면 아이콘 추가 등의 기능을 웹 애플리케이션에 구현할 수 있습니다.

8. 웹 애플리케이션 테스트(Web Application Testing)

웹 애플리케이션 테스트는 웹 애플리케이션의 기능, 성능, 보안, 사용성 등을 평가하고 검증하는 과정입니다. 테스트를 통해 웹 애플리케이션의 품질을 향상시키고, 버그 및 결함을 찾아 수정할 수 있습니다. 다양한 테스트 기법과 도구가 사용되며, 이에는 단위 테스트(Unit Testing), 통합 테스트(Integration Testing), 시스템 테스트(System Testing), 성능 테스트(Performance Testing) 등이 포함됩니다.

9. 웹 애플리케이션 배포(Web Application Deployment)

웹 애플리케이션 배포는 개발된 웹 애플리케이션을 실제 사용자가 사용할 수 있도록 인터넷 상의 서버에 올리는 과정입니다. 이 과정에는 웹 서버 설정, 도메인 구입 및 연결, SSL 인증서 설치, 데이터베이스 구축 등이 포함됩니다. 웹 애플리케이션 배포를 도와주는 다양한 서비스와 도구가 있으며, 이에는 AWS, Heroku, Netlify 등이 포함됩니다.

이렇게 다 같은 웹 애플리케이션 개발에는 다양한 요소, 기술, 과정이 포함되어 있습니다. 웹 개발자는 프론트엔드와 백엔드 개발을 통해 웹 애플리케이션의 전체적인 구조와 기능을 구축하며, 반응형 웹 디자인, 프로그레시브 웹 앱, 웹 애플리케이션 테스트, 그리고 웹 애플리케이션 배포와 같은 추가적인 개념과 기술들을 활용하여 품질 높은 웹 애플리케이션을 개발하고 유지보수합니다.