SEB_BE 29일차 - 네트워크 (웹 애플리케이션 작동 원리)

subimm_·2022년 10월 3일
0

코드스테이츠

목록 보기
28/83

💡 오늘의 학습목표

  • 네트워크
  • 웹 구성
  • HTTP

📜 웹 애플리케이션

  • 네이티브 애플리케이션 : 특정 실행환경에 종속
    • 장점
    1. 웹애플리케이션보다 빠르다.
    2. 설치된 기기의 시스템/리소스에 접근 용이 (GPS, 카메라)
    3. 인터넷 없이 사용 가능
    4. 웹애플리케이션에 비해 안전(모바일은 앱스토어의 승인필요)

    • 단점
    1. 웹애플리케이션보다 개발비가 더 들어간다.
    2. 빠른 업데이트가 힘들다.
    3. 앱스토어 승인이 힘들고 비용 발생
  • 웹 애플리케이션 : 웹 브라우저를 통해 접근 가능
    • 장점
    1. 브라우저를 통해 실행되어서 설치나 다운로드 필요 없음.
    2. 업데이트등 유지관리가 용이
    3. 네이티브 애플리케이션에 비해 만들기가 비교적 간편
    4. 앱스토어 승인이 필요 없음.

    • 단점
    1. 인터넷이 없으면 사용 불가
    2. 네이티브에 비해 속도가 느림
    3. 스토어에서 관리되지 않아 사용자 접근성이 떨어짐
    4. 질적으로나 보안상 위험에 노출되기 쉬움.

📙 네트워크 기술

📜 TCP/IP 기본

  • LAN : 좁은 범위에서 연결된 네트워크 / WAN(세계의 네트워크)
  • 인터네트워킹 : 여러 네트워크를 연결하는 것
  • 프로토콜 : 네트워크의 공통된 약속 (현재는 TCP/IP 가 주로 사용)

TCP / IP 4계층 모델

  • IP주소
    네트워크에 연결된 특정 PC의 주소를 나타내는 체계 IPv4(네 덩이의 숫자로 구분)
    터미널에서 nslookup 명령어로 주소 확인 가능
  • MAC 주소
    제조사에서 할당하는 고유 시리얼
    이더넷에서는 MAC주소 사용 , TCP/IP 에서는 IP주소 사용
  • 패킷
    기기끼리의 통신에는 회선교환 방식(음성전화 시스템)과 패킷교환 방식이 있다.
    원본 데이터를 패킷이라고 하는 작은 단위로 나누고 여러 회선을 공용해 통신을 주고 받음.
    도착한 곳에서 원래대로 복원 가능

📜 IP주소

  • 네트워크부가 어디까지인지 나타내는 것이 서브넷 마스크
    ex)255.255.255.0 (4옥텟은 호스트부)
  • 호스트부가 0으로만 이루어진 것은 네트워크 주소로 그 네트워크를 의미
    호스트부가 1로만 이루어진 것은 브로드캐스트 주소 ARP와 같은 기능을 사용하기 위해 사용

📜 TCP, UDP

TCP/IP 4계층에서 인터넷 계층의 상위에서 동작

  • TCP 3-way handshake : 양끝단의 기기의 신뢰성 있는 데이터 통신을 위해, TCP방식이 연결을 설정하는 방식

📜 PORT

  • 대상 IP기기의 특정 어플리케이션을 특정하는 번호
    어느 서버로 보내는 요청인지 특정할 수 있다.
    자주 사용되는 포트 번호

📜 URL, DNS

  • URL : 웹에 게시된 어떤 자원을 찾기 위해 브라우저에서 사용되는 메커니즘.
  • Domain name : IP 주소를 대신하여 사용하는 도메인 이름.
  • DNS : 도메인 네임 시스템 : 도메인 이름을 IP주소로 변환하거나 반대의 경우를 위해 개발된 데이터 베이스 시스템

📙 웹을 구성하는 기술

  • : 인터넷에서 제공되는 하이퍼텍스트 시스템

📜 클라이언트 - 서버 아키텍처

  • 서비스를 이용하는 (클라이언트) 와 서비스 제공(서버) 로 나뉜 구조 (2티어 아키텍처)
  • 3티어 아키텍처 (데이터베이스 추가)

📜 웹 애플리케이션 아키텍처

  • 클라이언트-서버 간의 연결에 대한 설명 방법
    • 웹 애플리케이션 특징
  1. 데스크탑 애플리케이션처럼 상호작용 가능
  2. 특정 기능을 가지고 있다.(정보 검색 등)
  3. 정보나 자료 등의 콘텐츠 관리 시크템과 함께 작동한다.

📜 웹 애플리케이션의 요청 흐름

  • client-side와 server-side로 작동. 유저가 요청을 하면 크게
  1. 유저의 입력에 따라 브라우저에서 작동하는 프로그램 (프론트엔드)
  2. HTTP 요청에 따라 서버에서 요청 처리하는 프로그램 (백엔드)
  • 웹 애플리케이션의 3단계 계층 구조
    • Presentation Layer : 유저와 브라우저등으로 직접적으로 접촉 (Web Server 포함)
    • Application Layer: 비즈니스 로직, 혹은 도메인 로직
      유저의 요청을 브라우저로부터 받아서 처리 (Application Server 포함)
    • Data access Layer : 퍼시스턴스 레이어. 데이터 저장소에 접근하여 데이터를 불러오거나 저장을 담당.
  • 주3개 계층에 속하지 않은 구조
    Cross-cutting : 보안, 통신, 운영 관리등을 위한 요소
    Third-party integrations : 제 3의 API 서비스를 이용, ex) PG사를 이용한 결재기능

📜 웹 애플리케이션의 구현

  • Single Page Application
    오늘날 만들어지는 많은 웹 애플리케이션 방식
    유저의 입력과 요청에 의한 콘텐츠나 정보의 최신화가 현재 페이지에서 이루어짐
    (AJAX 사용)
  • Microservice architecture
    작고 가벼운 특정한 한가지 기능에 집중한 웹 애플리케이션
  • Serverless Architecture
    서버와 기타 기반 기능들에 대해 외부 3자인 클라우드 서비스 제공자에게 의탁


    📖 웹 애플리케이션 구현 기술
  • HTTP
    웹 브라우저상에서 클라이언트와 서버간의 통신을 담당하는 프로토콜
    요청 : 처리 종류 메서드이름과 처리 대상의 이름 포함
    응답 : 처리 결과를 나타내는 상태 코드와 헤더, 실제 처리결과 메세지 포함
  • 쿠키 : 사용 유저의 정보를 클라이언트에 보관하고, 다음 접속부터 유저 정보를 클라이언트가 서버로 보내서 유저를 서버가 식별
  • 세션 : 서버에 세션아이디라는 고유 아이디를 할당해서 유저 식별

📜 SSR과 CSR

  • SSR(Server Side Rendering) : 자바스크림트가 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링 (조립 완료 상태로 보내는 것)
  • CSR(Client Side Rendering) : 클라이언트에서 자바스크립트가 페이지를 렌더링
  • SSR을 사용하는 경우 (네이버 블로그)
    1.SEO가 우선순위인 경우
    2.첫 화면 렌더링이 빠르게 필요한 경우
    3.웹 페이지가 사용자와 상호작용이 적은 경우
  • SSR 단점
  1. 자원이 서버에 집중, 유지비용이 높다.
  2. 일부 서드파티 자바스크립트 라이브러리의 경우 불가능할 수 있다.
  • CSR을 사용하는 경우 (아고다)
  1. SEO가 우선순위가 아닌 경우
  2. 풍부한 상호작용이 있는 경우 빠른 라우팅 가능
  3. 웹 애플리케이션을 제작하는 경우 더 나은 사용자 경험 제공
  • CSR 단점
  1. 느린 렌더링 속도, 렌더링의 부하가 클라이언트에 집중
  2. search engine bots과 상성이 안좋다.

📔 HTTP Messages

  • 특징 : 무상태성
  • 클라이언트와 서버 사이에서 데이터가 교환되는 방식.
    요청(Request) / 응답(Responses)
  • 요청과 응답은 다음과 같은 유사한 구조를 지님.
    1.start line : 요청이나 응답의 상태를 나타냄. 응답에서는 status line이라고 부름
    2.HTTP headers : 요청을 지정하거나 메세지에 포함된 본문을 설명하는 헤더의 집합
    3.empty line : 헤더와 본문을 구분하는 빈 줄
    4.body : 요청이나 응답과 관련된 데이터 또는 문서 포함. (payload)
  • 요청(Request)
    클라이언트가 서버에 보내는 메세지
  • Start line 의 3가지 요소
  1. 수행할 작업이나 방식을 설명하는 HTTP 메서드를 나타냄.
  2. 요청대상(일반적으로 URL이나URI) 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성.
    origin형식 absolute형식 authority형식 asterisk형식
  3. HTTP 버전 (구조가 달라짐)
  • Headers
    헤더이름(대소문자구분x), 콜론(:) , 값
    1.General headers: 메시지 전체에 적용되는 헤더
    2.Request headers: fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더
    3.Representation headers: 바디에 담긴 리소스의 정보를 포함하는 헤더
  • Body
    요청의 본문 (선택적)
    GET, HEAD DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 필요x
    1.Single-resource bodies(단일-리소스 본문) : 헤더 두개로 정의된 단일 파일로 구성
    2.Multiple-resource bodies(다중-리소스 본문): 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보를 지님.
  • 응답(Responses)
  • Status line
  1. 현재 프로토콜의 버전
  2. 상태 코드 - 요청의 결과를 나타냄.
  3. 상태 텍스트 - 상태 코드에 대한 설명
    ex) HTTP/1.1 404 Not Found
  • Headers
    헤더이름(대소문자구분x), 콜론(:) , 값
    1.General headers: 메시지 전체에 적용되는 헤더
    2.Response headers: 위치 또는 서버 자체에 대한 정보와 같이 응답에 대한 부가적인 정보를 갖는 헤더
    3.Representation headers: 바디에 담긴 리소스의 정보를 포함하는 헤더
  • Body
    요청의 본문 (선택적)
    201, 204와 같은 상태 코드를 가지는 응답에는 필요x
    1.Single-resource bodies(단일-리소스 본문) :
    길이가 알려진 본문은 두 개의 헤더로 정의
    길이를 모르는 본문은 chunked로 설정
    2.Multiple-resource bodies(다중-리소스 본문): 서로 다른 정보를 담고 있음.

  • 크롬 브라우저 에러 확인
    chrome://network-errors/
profile
코린이의 공부 일지

0개의 댓글