[ASAC 7기] 웹의 본질과 흐름을 알아보자 : 요청반환동작원리, 웹접근성, 네트워크

본 포스팅은 수업내용의 단순 정리글입니다.

 

01. 웹 구성 간 흐름 및 직무 종류

이번 포스팅은 웹 개발은 무엇인가에 대한 본질적인 질문부터 시작한다. 웹 개발은 결국 요청과 반환이라고 볼 수 있으며 웹을 이해하고 요구사항뿐 아니라 보안 등의 예외사항을 구현해내야하기 때문에 웹을 아는 것은 중요하다고 할 수 있다.

요청과 반환은 웹브라우저와 웹 서버라는 주체를 통해 이루어지고 있으며 요청반환 방법으로는 REST API, GraphQL, gRPC등이 있다.

웹 브라우저는 html, css, js로 이루어져 있으며, 웹 서버는 웹서버와 웹어플리케이션 서버로 나뉜다. 각각의 구성요소에 대해서도 살펴보자. 

웹 브라우저 다른 사람과 공유하기 위해서는 인터넷이 필요하다. 인트라넷이 무엇인지 알아보며, ISP와 DNS에 대해 알아보자.

웹 브라우저를 통해 내게 필요한 정보만 검색할 필요성이 있다. 이를 알아보기 위해 웹 검색엔진과 SEO가 무엇인지, 웹페이지의 성능에 대한 지표에 대해서도 알아보자. 

 

 

 

01. 들어가며 : 웹의 본질과 장점, 동작원리를 알아보자

01-01. 웹 개요 : 웹 개발은 무엇이며 왜 배우는가

 

 

무엇을 배웠는가?

 

굳이 앱 개발이 아닌 웹 개발을 선택한 이유를 말 할 수 있는 "웹에 대한 본질과 간단한 동작원리"에 대해 배웠다. 

간단하게 말하면, 프론트엔드는 웹페이지의 그 자체를 말하며, 백엔드는 웹 페이지 내 표기할 데이터들을 말한다.

후에 자세히 말하겠지만 웹의 본질은 요청을 주고 결과를 받는 것이다.

따라서 프론트엔드 개발자든, 백엔드개발자든 웹에 대한 전반적인 이해가 필요하다. 

 

 

 

02. 웹의 본질인 요청<->반환의 주체, 동작원리, 방법을 알아보자.

01-02. 웹 본질 : 요청 — 반환의 주체와 방법

 

무엇을 배웠는가?

 

웹의 요청과 반환이 이루어질 수 있는 방법 중 하나인 REST API와 웹의 요청과 반환이 이루어질 수 있는 서버구조인 단일서버구조(Monolithic), 다수서버구조(MSA)를 배웠다.

 

1) 요청<->반환의 주체 : 웹브라우저, 웹 서버

- 웹 서버의 개수에 따라 Monolithic과 MSA로 나뉜다.

• Monolithic : 단일 웹 서버로 다수 서비스 제공, 그렇기에 단일 이슈가 전체 이슈로 퍼질 수 있다.(SPOF Single Point of Failure)
• MSA : 다수 웹서버로 각각 개별 서비스 제공,
  • 하나의 서비스 문제가 다른 서버 문제로 전파되지 않음(❓)
  • 단점 : 서비스마다 서버가 많아지면 수많은 서버 속 어떤 서버의 어떤 api를 사용해야할지 정리정돈 버전관리 안됨.
  • 이 단점을 보완하기 위해 API GW(Gateway)(‼️)가 등장(모든 서버에 대한 모든 api호출을 중앙화)

 

 

2) 요청<->반환의 방법 : REST API, GraphQL, gRPC 등

• REST API(Method동사 + URI/URL명사)
  
  • URL, Location : https://aaron.com = 장소
  • URI, Indicator : https://aaron.com/users/aaron/favorite-things = 장소 내 지정
    • URI (Path) 에 들어가는 변수 (‼️)
      • Path Variable : /hello/world
      • Query Parameter : /hello?next=world
      • Request Body = JSON : “{ category: ‘cat’, emotion: ‘smile’ }”
  • HTTP Response Status
    • 10X : 정보성 응답 ← Informational Response
    • 20X : 성공 (응답 완료) ← Successful Response
    • 30X : 리다이렉션 ← Redirection
    • 40X : 권한 혹은 잘못된 접근 (유저의 잘못) ← Client Error
    • 50X : 서버 내부 문제 ← Server Error
• GraphQL
  • REST API의 각 비지니스 도메인마다 수많은 API들을 일일히 만들어야하는 단점 보완
  • GraphQL 과 REST API 의 차이점 (❓)
• 심화 : gRPC, Queue, WebSocket, WebHook(‼️)

 

 

 

03. 웹 내 주체: 웹 브라우저 <-> 웹 페이지 <-> 웹서버 에 대해 알아보자.

01-03. 웹 내 주체 : 웹 페이지를 사이에 둔 웹 브라우저와 웹 서버

 

무엇을 배웠는가?

웹 내 주체인 웹브라우저, 웹 페이지, 웹 서버가 각각 어떤 구조인지, 서로에게 제공하기 위해 무슨원리로 동작 하는지 알아보았다.

 

1) 웹 등장

• 웹은 정보교환과 공동연구를 위해 개발되었다. 웹페이지는 논문, 실험결과 등의 문서였으며, 웹 브라우저는 그 논문을 읽을 수 있게 하는 리더기 였다. 웹 서버는 여러 컴퓨터, 즉 웹페이지 제공자의 역할을 했다.

 

2) 웹 페이지 (HTML + CSS + JS)

• 마크업 언어/마크다운언어
  • 마크업 언어 : 문서를 구성하는 구조적 의미
  • 마크다운 언어 : 쉽게 쓰는 마크업 파생 언어
• CSS(Cascading Style Sheet) 종속/우선순위
  • 더욱 분명하게 선택자를 지정할 수록 우선순위가 높아진다.(Specific할수록)
  • 최종 아래에 선언된 것이 우선순위가 높다 (!important는 예외)
• JS(문서 조작, 이벤트)
• 웹 브라우저 렌더링 절차
  • DOM > CSSOM > Render Tree > Layout(Reflow) > Paint(Repaint)
    • html이 바뀔 때마다 repaint가 실행되기 때문에 이를(직접적인 돔조작에 따른 repaint를) 효율적으로 개선하기 위해 react 탄생
  • TTI(Time To Interactive) : html,css로드 뒤 js를 통해 마우스 이벤트 등이 비로소 적용됐을 때.
• 웹서버(WS)와 웹 어플리케이션 서버(WAS) (❓❓❓)
  • 웹 서버 : 정적 웹 리소스 반환
  • 웹 어플리케이션 서버 : 정적 + 동적 웹 리소스 반환

 

04. 네트워크의 종류와 구조, 네트워크를 통해 웹 페이지가 통신되는 원리를 알아보자.(❓❓❓)

01-04. 인터넷과 인트라넷 그 사이의 ISP 와 DNS

 

무엇을 배웠는가?

웹이 공유되려면, 세상에 알리려면 외부 네트워크와 연결이 필요하다. 그 네트워크의 종류와 구조, 우리가 웹사이트 주소를 얻기위한 동작원리를 알아보았다.

 

 

 

 

05. 세계 모든 웹 페이지 정보들을 효율적으로 조회하기 위해 존재하는 웹 검색엔진과 웹 성능에 대해 알아보자

01-05. 웹 검색 엔진(구글)과 SEO 그리고 Core Web Vital

 

무엇을 배웠는가?

웹 서버들이 네트워크를 통해 연결되어 있고 우리는 세계 모든 웹 서버의 웹 페이지 정보들에 접근하려한다. 그렇다면 모든 웹페이지를 일일히 쳐서 웹페이지 정보들에 접근해야할까? 아니다. 이를 효율적으로 수행하기 위한 웹 검색엔진(구글)이 있다. 웹 검색엔진에 대해 알아보고 웹 성능에 대해서도 알아보았다.

• SEO(Search Engine Optimization)
  • 검색 시 상위 노출 전략
  • 웹페이지 내용이 관련된 내용이어야 하며, 
  • 이벤트 및 페이지 이동성능도 좋아야 한다.
  • 고려요소 : good contents, Semantic Tag HTML, 키워드 및 메타태그, 성능 Performance Metrics, 웹 접근성'
• robots.txt, sitemap.xml
  • 내(웹 서버)가 어떤 웹 페이지를 갖고있는지에 대한 맵과 = sitemap.xml
  • 내(웹 서버)가 갖고있는 어떤 웹 페이지를 웹 크롤러로 허용하고 허용안할것인지 결정 = robots.txt
• 웹 페이지 성능(Performance Metrics : Core Web Vital)
  • Load Time
  • FCP : First Contentful Paint - 웹 페이지 내 가장 첫 의미있는 정보가 보여지는 순간까지의 시간
  • LCP : Largest Contentful Paint - 웹 페이지 내 가장 큰 의미있는 정보가 보여지는 순간까지의 시간
  • TBT : Total Blocking Time - 동기 실행 시 멈춘 시간들
  • TTI : Time to Interactive - JS 자바스크립트가 모두 동작가능한 상태로 준비 완료되기까지의 시간
    • TTI : Time to Interactive 완료된 바로 다음에 FCP : First Contentful Paint
  • FID : First Input Delay - 이벤트 버튼 등을 누르고 그 이벤트 반영이 시작하기까지의 지연시간
• 크롬 > Lighthouse
  • 크롬 lighthouse에서 웹페이지의 점수를 볼 수 있다.