1. 웹 애플리케이션 이해
- 특정 장치에 설치되어 사용되는 응용 프로그램을 기본 응용 프로그램이라고 합니다.
- 기본 애플리케이션 환경은 Apple IOS, Android OS 및 Windows와 같은 것을 말합니다.
- 웹 애플리케이션은 웹 브라우저를 통해 액세스할 수 있는 애플리케이션입니다.
인터넷 신청
장점
- 플랫폼 독립적: 웹 애플리케이션은 웹 브라우저에서 실행되기 때문에 여러 플랫폼에서 작동합니다.
- 간편한 설치 및 업데이트: 사용자는 웹 응용 프로그램을 설치할 필요가 없으며 개발자는 서버에서 업데이트할 수 있으므로 모든 사용자가 자동으로 최신 버전을 갖게 됩니다.
- 비용 효율적인 개발: 웹 애플리케이션이 다양한 플랫폼에서 작동하기 때문에 별도의 개발 및 유지 관리 비용이 절감됩니다.
불리
- 성능: 웹 애플리케이션은 일반적으로 기본 애플리케이션보다 성능이 느립니다.
- 인터넷 연결 필요: 웹 응용 프로그램은 종종 인터넷 연결이 필요하며 오프라인으로 실행되지 않을 수 있습니다.
- 제한된 기능: 웹 애플리케이션의 일부 기능을 사용할 수 없거나 브라우저 제한으로 인해 제한될 수 있습니다.
네이티브 애플리케이션
장점
- 성능: 기본 애플리케이션은 일반적으로 웹 애플리케이션보다 성능이 빠릅니다.
- 풍부한 기능: 기본 애플리케이션은 장치의 모든 기능에 액세스하여 더 풍부한 기능을 제공할 수 있습니다.
- 오프라인 사용 가능: 기본 애플리케이션은 종종 인터넷 연결 없이 사용할 수 있습니다.
불리
- 플랫폼별 개발: 네이티브 애플리케이션은 특정 플랫폼에 최적화되어 개발되기 때문에 크로스 플랫폼이 작동하려면 추가 개발이 필요합니다.
- 설치 및 업데이트 프로세스: 기본 애플리케이션을 사용하려면 사용자가 직접 앱을 설치해야 합니다. 또한 개발자가 애플리케이션을 업데이트하면 사용자가 업데이트를 수동으로 설치해야 할 수 있습니다.
- 디스크 공간 요구 사항: 기본 응용 프로그램은 사용자 장치에 설치되므로 디스크 공간을 차지합니다. 이것은 특히 저장 공간이 제한된 장치에서 문제가 될 수 있습니다.
- 앱 승인 및 배포: 네이티브 애플리케이션은 종종 앱 스토어를 통해 배포되며, 이 경우 개발자는 스토어의 정책을 따르고 승인 프로세스를 거쳐야 합니다. 이로 인해 애플리케이션을 릴리스하는 데 걸리는 시간이 늘어날 수 있습니다.
2. 네트워크 생성 기술
TCP/IP 기본 사항
랜과 WAN
- LAN(Local Area Network) 소규모 네트워크
- WAN(Wide Area Network) 여러 LAN이 결합하여 전 세계적인 네트워크를 형성합니다.
인터넷 작업
인터네트워킹은 여러 독립 네트워크가 연결되어 하나의 대규모 네트워크로 작동할 수 있도록 하는 프로세스 또는 기술을 의미합니다. 이것은 데이터를 전송하고 서로 다른 네트워크 간의 통신을 가능하게 하는 필수 프로세스입니다. 인터넷은 인터네트워킹의 가장 대표적인 예로서 전 세계의 수많은 네트워크가 연결되어 정보를 교환하는 방대한 네트워크이다. 이 네트워킹은 라우터, 브리지 및 게이트웨이와 같은 네트워크 장치를 통해 이루어지며 TCP/IP와 같은 통신 프로토콜을 기반으로 합니다.
규약
- 컴퓨터가 서로 통신하는 데 필요한 약속된 사양
- 서로 다르거나 멀리 떨어져 있는 컴퓨터가 네트워크를 통해 통신할 때 서로 통신하려면 일관성이 있어야 합니다.
TCP/IP
- Internet Protocol Suite는 인터넷에서 정보를 교환하기 위해 컴퓨터에서 사용하는 통신 프로토콜 모음입니다.
- 전송 제어 프로토콜(TCP), 인터넷 프로토콜(IP)
- TCP/IP 4계층 모델 → 인터넷 통신을 가능하게 하는 프로토콜 집합으로 각 계층의 역할과 책임이 다름
계층 이름 설명 예
| 하나 | 애플리케이션 계층 | 사용자와 가까운 계층, 애플리케이션 동작 | HTTP, FTP, SMTP, IMAP, POP3 |
| 2 | 수송층 | 안정적인 데이터 전송, 분할 및 오류 복구 | TCP, UDP |
| 삼 | 인터넷 계층 | 데이터 경로 결정, 다른 네트워크와의 통신 | IP, ICMP, ARP |
| 4 | 네트워크 인터페이스 계층 | 물리적 네트워크 장치에 대한 인터페이스, 데이터 전송 | 이더넷, 와이파이, PPP |
IP
- IP는 인터넷 프로토콜의 약자입니다.
- IPv4는 인터넷 프로토콜 버전 4의 약자입니다.
- IPv6(IP 버전 6) – 개인용 PC가 보편화되면서 IPv4를 할당할 수 있는 PC의 한계를 뛰어넘는 것 같지만 여전히 IPv4가 널리 사용되고 있다.
- 많은 IPv4 인프라가 구축되어 여전히 사용 중이지만 주소 고갈로 인해 가까운 장래에 IPv6로 전환해야 합니다.
- IP 프로토콜의 한계: 보낸 사람이 패킷이 중간에 손실되는 시기를 알 수 있는 방법이 없습니다.
맥
- 네트워크 장비의 경우 제조사에서 부여한 고유한 시리얼 주소와 MAC 주소가 IP 주소와 결합되어야만 네트워크 통신이 가능합니다.
- ARP(Address Resolution Protocol)는 MAC 주소를 결정하는 데 사용됩니다.
- ARP를 통해 MAC 주소를 찾는 과정
- 송신 호스트는 수신 호스트의 IP 주소를 알고 있지만 수신 호스트의 MAC 주소는 모릅니다.
- 송신 호스트는 네트워크의 특정 IP 주소로 데이터를 보내려면 이 IP 주소와 일치하는 MAC 주소가 필요합니다.
- ARP 요청을 보냅니다.
- 송신 호스트는 수신 호스트의 IP 주소에 해당하는 MAC 주소를 찾기 위해 ARP 요청 패킷을 보냅니다. ARP 요청 패킷에는 보내는 호스트의 MAC 주소와 IP 주소, 받는 호스트의 IP 주소가 포함됩니다.
- 수신 호스트는 ARP 요청을 수신합니다.
- 수신 호스트는 자신의 IP 주소를 ARP 요청 패킷에 포함된 IP 주소와 일치시킵니다. 일치하면 수신 호스트는 ARP 응답 패킷을 송신 호스트로 보냅니다.
- ARP 응답을 보냅니다.
- ARP 응답 패킷에는 수신 호스트의 MAC 주소가 포함됩니다. 보내는 호스트는 이를 수신하고 MAC 주소를 저장합니다.
- 향후 패킷 전송을 위해 캐시를 사용하십시오.
- ARP 응답을 수신하면 송신 호스트는 MAC 주소를 저장합니다. 나중에 데이터를 동일한 IP 주소로 보내야 할 때 보내는 호스트는 이전에 받은 ARP 응답을 사용하여 MAC 주소를 찾습니다. 이렇게 하면 ARP 요청 패킷을 보낼 필요가 없으므로 패킷 전송 속도가 빨라집니다.
위와 같이 ARP를 사용하여 MAC 주소를 찾는 과정은 송신 호스트가 IP 주소를 가지고 있지만 해당 IP 주소에 해당하는 MAC 주소를 모를 때 사용합니다. ARP는 로컬 네트워크에서만 작동하기 때문에 다른 네트워크로 패킷을 보내려면 다른 프로토콜을 사용해야 합니다.
- 송신 호스트는 수신 호스트의 IP 주소를 알고 있지만 수신 호스트의 MAC 주소는 모릅니다.
- ARP를 통해 MAC 주소를 찾는 과정은 다음과 같습니다.
- ARP에 대한 비유
- ARP와 유사하게, 특정 주소로 메일을 보낼 때 주소의 우편번호를 찾는 것과 비슷합니다.. 주소만 있고 우편번호를 모르는 경우 우편번호 확인을 위해 우체국에 요청을 보내십시오. 그 후에는 이전에 확인했던 우편번호를 기억해 두었다가 다음에 같은 주소로 이메일을 보낼 때 우편번호를 다시 검색할 필요가 없습니다. ARP는 동일한 작업을 수행하여 IP 주소와 연결된 MAC 주소를 찾기 위해 네트워크의 다른 컴퓨터에 쿼리를 보낸 다음 더 빠른 데이터 전송을 위해 이전에 찾은 MAC 주소를 캐시합니다.
패키지
- 패킷 스위칭 방식의 원리: 원본 데이터를 패킷이라는 작은 단위로 나누고 여러 회선을 공유하여 통신을 주고받는다.
- 이러한 방식으로 여러 당사자와의 통신이 가능합니다.
TCP, UDP
TCP 3방향 핸드셰이크
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를 통해 웹 주소에서 찾을 수 있습니다.
개발자 도구
네트워크 탭으로 전환하면 페이지를 새로 고칠 때 작동 방식에 대한 모든 정보를 찾을 수 있습니다.
헤더 등을 정기적으로 확인하는 것이 좋습니다.
DNS(도메인 이름 시스템)
- 주소 요청: 클라이언트 → DNS 리졸버
- 캐시: 액세스가 발생했는지 여부를 확인합니다. 캐시는 정보에 액세스했는지 여부를 확인하도록 설계되었습니다.
- 쿼리 루트 서버:
- RootServer 응답: 이 도메인을 알고 있습니까?
- 응답 TLDServer: 이 도메인을 아십니까?
- NameServer 응답: 마지막으로 Do you know this domain?
- NameServer: Share Purpose로 바로 이동하지 않는 이유
클라이언트-서버 워크플로우
클라이언트 → ((톰캣)웹서버 → 서블릿 컨테이너) → 스프링 컨테이너
였다
cilient → DispatcherServlet(작업할 사람?) → handlerAdapter(기능을 처리하는 사람?) → Controller → Service → DAO → Data(요청)
거꾸로 대답하다
3. 웹을 구성하는 기술
웹 애플리케이션의 구성요소
1. 프런트 엔드
- HTML: 웹 페이지의 구조와 내용을 정의하는 마크업 언어.
- CSS: 웹 페이지의 스타일과 디자인을 정의하는 스타일 시트 언어입니다.
- 자바스크립트: 웹 페이지의 대화형 및 동적 기능을 구현하는 프로그래밍 언어입니다.
2. 백엔드
- 웹 서버: 클라이언트로부터 요청을 받아 처리하고 응답을 반환하는 서버. (예: 아파치, Nginx)
- 애플리케이션 서버: 비즈니스 로직을 처리하고 웹 서버와 데이터베이스 사이에서 작동하는 서버입니다. (예: Node.js, Django, Ruby on Rails)
- 데이터 베이스: 웹 애플리케이션 데이터를 저장하고 관리하는 시스템. (예: MySQL, PostgreSQL, MongoDB)
3. 프레임
- 프런트엔드 프레임워크: 웹 응용 프로그램의 사용자 인터페이스를 개발하는 데 도움이 되는 도구 모음입니다. (예: React, Angular, Vue.js)
- 백엔드 프레임워크: 서버 측 웹 애플리케이션 개발을 단순화하는 도구 모음입니다. (예: Express.js, Django, Ruby on Rails)
웹 애플리케이션의 3계층 아키텍처
교대 설명
| 프레젠테이션 슬라이드 | 여기에는 사용자 인터페이스 요소가 포함되며 웹 서버가 이 영역에 포함됩니다. |
| 애플리케이션 계층 | 비즈니스 로직을 처리하고 애플리케이션 서버가 이 계층에 포함됩니다. 여기에는 데이터 액세스 경로의 표준화가 포함됩니다. |
| 데이터 액세스 계층 | 이 계층은 데이터 저장소에 액세스하고 데이터를 로드하거나 저장하는 역할을 합니다. |
또한 웹 애플리케이션에서 중요한 역할을 하는 섹션 요소 및 타사 통합에 대해 설명합니다.
4. 가로 요소
- 보안: 웹 애플리케이션에서 민감한 정보를 보호하기 위해 사용되는 기술 및 방법. (예: 인증, 승인, 데이터 암호화)
- 의사소통: 클라이언트와 서버 간의 데이터 전송 및 교환을 담당하는 기술. (예: HTTP, WebSockets, RESTful API)
- 운영 관리: 웹 애플리케이션의 성능, 안정성 및 확장성을 관리하기 위한 기술 및 도구입니다. (예: 로드 밸런싱, 모니터링, 로깅)
5. 타사 통합
- 소셜 로그인: OAuth 2.0과 같은 인증 프로토콜을 사용하여 사용자가 자신의 소셜 미디어 계정으로 웹 애플리케이션에 로그인할 수 있도록 합니다. (예: 페이스북, 구글, 트위터)
- 결제 기능: Payment Gateway 서비스를 이용하여 웹 애플리케이션에서 결제를 처리하고 관리할 수 있습니다. (예: 스트라이프, 페이팔, 스퀘어)
웹 애플리케이션 개발에는 다양한 요소와 기술이 사용되며, 각 요소는 웹 애플리케이션의 전체적인 구조와 기능을 형성하는데 밀접하게 관련되어 있다. 개발자는 웹 애플리케이션 요구에 따라 이러한 요소를 선택하고 프론트엔드 및 백엔드 개발을 통해 웹 애플리케이션을 구축합니다. 프레임워크와 라이브러리를 사용하여 개발 효율성과 유지 관리성을 높일 수 있습니다.
웹 애플리케이션 개발 및 유지 관리와 관련된 몇 가지 추가 개념 및 기술이 있습니다.
6. 반응형 웹 디자인
반응형 웹 디자인은 다양한 장치(데스크톱, 태블릿, 스마트폰 등)의 화면 크기와 해상도에 맞게 웹 애플리케이션의 사용자 인터페이스를 디자인하는 기술입니다. 이를 통해 사용자는 사용하는 장치에 관계없이 최적의 사용자 경험을 제공할 수 있습니다.
7. 프로그레시브 웹 앱(PWA)
프로그레시브 웹 앱은 웹 애플리케이션을 개발하는 방법 중 하나로, 웹 애플리케이션이 네이티브 앱과 유사한 기능과 성능을 제공할 수 있도록 하는 기술입니다. 이를 통해 오프라인 작업, 푸시 알림, 웹 애플리케이션에 홈 화면 아이콘 추가와 같은 기능을 구현할 수 있습니다.
8. 웹 애플리케이션 테스팅
웹 애플리케이션 테스트는 웹 애플리케이션의 기능, 성능, 보안 및 유용성을 평가하고 확인하는 프로세스입니다. 테스트는 웹 애플리케이션의 품질을 개선하고 버그와 결함을 찾아 수정하는 데 도움이 됩니다. 단위 테스트, 통합 테스트, 시스템 테스트 및 성능 테스트를 포함하여 다양한 테스트 기술과 도구가 사용됩니다.
9. 웹 애플리케이션 전달
웹 응용 프로그램 배포에는 개발된 웹 응용 프로그램을 사용자가 사용할 수 있도록 인터넷의 서버에 업로드하는 작업이 포함됩니다. 이 과정에서는 웹 서버 설정, 도메인 구매 및 연결, SSL 인증서 설치, 데이터베이스 구축 등을 다룹니다. AWS, Heroku, Netlify 등 웹 애플리케이션을 배포하는 데 도움이 되는 많은 서비스와 도구가 있습니다.
이러한 동일한 웹 애플리케이션의 개발에는 다양한 요소, 기술 및 프로세스가 포함됩니다. 웹 개발자는 프론트엔드와 백엔드 개발을 통해 웹 애플리케이션의 전반적인 구조와 기능을 만들고 반응형 웹 디자인, 프로그레시브 웹 앱, 웹 애플리케이션 테스트, 웹 애플리케이션 배포와 같은 추가 개념과 기술을 사용하여 고품질의 웹 애플리케이션을 만듭니다. 웹 애플리케이션을 개발하고 유지합니다.