1. 웹의 등장

• 처음에는 여러 컴퓨터에 저장된 문서들을 공유하기 위한 기술
• 문서 : 웹 페이지
  • 웹 페이지는 특수한 언어로 제작되어 있어 인간이 바로 읽을 수 없음
    • 1. 특수한 언어 = HTML(하이퍼 텍스트 마크업 언어)
    • 2. 웹 페이지 리더기 = 웹 브라우저
• 여러 컴퓨터 : 웹 서버

웹 페이지

• HTML : 문서
• CSS : 문서 서식 - Cascading Style Sheet
• JS : 문서 변경 이벤트 - 유저와 웹 페이지 사이의 인터랙션
  • 버튼을 누르면 어떤 영역 색이 변하거나
  • 어떤 링크를 누르면 안내창이 뜸

HTML(하이퍼 텍스트 마크업 언어)

• 하이퍼텍스트 : 문서 간 이동을 정의(하이퍼링크,인용)
• 마크업 언어 : 문서를 구성하는 구조적 의미(제목, 단란, 목록)
  • 마크다운 언어 : 쉽게 쓰는 마크업 파생 언어

웹 브라우저

• 웹 페이지의 3개 구성 요소 (HTML,CSS,JS)모두 실행 및 렌더하여, 유저에게 결과 웹 페이지 노출
  • HTML ~= DOM : HTML은 단지 텍스트, DOM은 HTML 조작을 위해 제공되는 API(객체)
  • CSS ~= CSSOM : CSS는 단지 텍스트, CSSOM은 CSS 조작을 위해 제공되는 API(객체)
  • DOM Tree + CSSOM -> Render Tree
  • Render Tree -> Layout(Reflow) -> Paint(Repaint)
  • HTML + CSS가 웹 브라우저에서 유저에게 표기가 완료되면, JS를 통해 인터렉션 이벤트 등 적용
    - Time to interactive(TTI) : HTML + CSS 로드 뒤 JS를 통해 마우스 이벤트 등 비로소 적용됐을 때
    
    
    

2. 인터넷

• Intranet, 인트라넷(사내망) : 대학과 연구기관 각각 사내 네트워크
  • 외부로 트래픽이 나가지 않아 보안을 위해 혹은 개인/단체적 활용을 위해 사용
  • LAN : 블리자드 배틀넷과 같은 온라인 서비스가 불가능한 경우 친구와 단둘이 방을 만들어 플레이
    • 단둘이 방을 만들어 = 인트라넷(사내망) 구축 필요
    • 단둘이 멀리 떨어져 있으면 컴퓨터간 회선을 연결할 방법이 없다
    • 그래서 가상의 인트라넷(사내망) 구축이 필요 = VPN(Virtual Private Network)
• Internet, 인터넷 : 사내 네트워크들을 게이트웨이를 통해 외부로 연결한 네트워크
  • 게이트웨이 : 내부 네트워크(회선)과 외부 네트워크(회선) 연결 통로
    
    
    

3. 웹 서버 주소

IP주소와 도메인 네임

• 모든 웹 서버는 주소를 갖는다
• 이 주소의 정식 명칭은 IP주소라고 한다
  • ex) 126.10.1.12 - 네트워크 주소라고도 부름
• IP주소는 인간이 읽기 어려운 형태이기에 도메인 네임 사용
  • ex)naver.com
• 웹 브라우저는 DNS를 이용하여 도메인 네임이 어떤 웹 서버 IP인지 알 수 있음
  • DNS : 어떤 도메인 네임이 어떤 IP주소인지 검색 및 변환 시스템
  • 웹 브라우저에 naver.com 이라는 URI를 입력했을 때 어떻게 동작하는가
    - 1. 웹 브라우저에 naver.com 도메인 네임을 입력하면, 실제 IP주소 가 무엇인지 DNS절차로 확인
    - 2. 실제 웹 서버의 IP주소를 알았으니 웹 브라우저는 원래 하고자했던 요청을 진행(웹 페이지 반환해오기)
    
    
    

4. 웹 검색 엔진

구글과 SEO

세계 모든 웹 서버의 정보들을 조회하려면 모든 도메인 네임을 알아야하나? 무언가가 대신 세계 모든 웹 서버의 웹 페이지들을 미리 찾아놓고, 정리한 뒤에 내 검색어에 따라 그에 적합한 웹 페이지들을 전달해주면 어떨까?

• 무언가 = 구글
• 미리 찾아놓고 = 웹 크롤링 : 세계 모든 웹 서버의 웹 페이지 정보 수집(봇)
• 정리한 뒤에 = 인덱싱(PageRank 알고리즘)
  • 앞서 수집한 웹 페이지들을 상관관계별로 분류하여 검색 시 적합한 결과 반환
• 내 검색어에 따라 그에 적합한 웹 페이지를 전달해주면 어떨까? = 검색엔진

4.1 검색 엔진

검색어와 검색 결과의 연관성이 구글, 네이버 등 검색 엔진 유저의 만족도

• 세상 모든 웹 서버의 웹 페이지는 정말 다양하며 각기 갖고있는 정보도 가지각색
• 수많은 웹 페이지속에서 내 웹 페이지를 관심있는 사람에게 적절하게 노출하기
  • 검색 시 상위 노출 전략 : SEO(Search Engine Optimization)

  SEO

• 좋은 내용 Good Contents
• 의미를 가진 HTML 문법 Semantic HTML
• 키워드 및 메타 태그
• 성능 Performance Metrics
• 웹 표준 / 웹 접근성

  Performance Metrics

• Load Time - 페이지를 로드하는데 걸리는 시간
• FCP : First Contentful Page - 웹 페이지 내 가장 첫 의미있는 정보가 보여지는 순간까지의 시간
• LCP : Largest Contentful Page - 웹 페이지 내 가장 큰 의미있는 정보가 보여지는 순간까지의 시간
• TBT : Total Blocking Time - 동기 실행 시 멈춘 시간들
• TTI : Time to Interactive - JS가 모두 동작 가능한 상태로 준비 완료 되기까지의 시간
  • TTI가 완료된 바로 다음에 FCP
• FID : First Input Delay - 이벤트 버튼 등을 누르고 그 이벤트 반영이 시작하기까지의 지연시간
  
  
  

5.1 웹서버

정적 웹 페이지

• 미리 만들어진 웹 페이지 : 단순히 요청에 따라 그대로 반환
  • 웹 브라우저가 웹 서버에 요청 - 웹 서버가 웹 브라우저에 반환
  • 만약, 유저 정보 페이지처럼 반복되는 템플릿에 일부 정보만 변경되면?
    • ex) 1000명의 유저 정보 페이지 = 1000개의 웹 페이지 필요
  • 그렇다면, 반복되는 템플릿과 유저 정보를 분리해보면?
    • ex) 1개의 유저 정보 페이지 템플릿 = 웹페이지 1개
    • 1000명 유저 정보는 데이터베이스에 저장

동적 웹 페이지

• 요청에 따라 만드는 웹 페이지
  • 요청에 따라 데이터베이스에서 데이터 조회 및 페이지 생성 = 어플리케이션
  • 웹 서버가 요청을 받으면, 어플리케이션을 실행 후 넘겨 동적 페이지 생성 위임
    • CGI
      • 웹 서버가 요청을 어플리케이션에 넘겨주기 위한 연결고리
      • 초기 CGI는 1요청 : 1비상주 프로세스
      • 매번 요청에 따라 프로세스가 실행되고 웹 페이지 만들고 반환하고 죽는다
      • stateless(무상태성) : 매 요청마다 새로운 프로세스가 생성-실행(반환)-죽음 이기에 요청 간 정보 없음
      • 이를 보완한게 FCGI, WCGI
      • FCGI
        • 1요청 : 1상주 프로세스
        • Stateful(상태성) : 아무리 많은 요청이 와도 기존 프로세스가 실행(반환)만 하기에 요청 간 정보 공유
        • 매번 요청에 따라 이미 열려있던 프로세스가 웹 페이지 만들고 반환하고, 프로세스는 계속 살아있는다
        • 프로세스가 계속 상주해 있으니 위 CGI초기보다 매 프로세스 준비기간은 줄어듦
    • PHP(Personal Home Page Tools -> Hypertext Preprocessor)
      • 간단히 홈페이지 제작용 서버 스크립트 언어
  • 동적 웹 페이지의 장점
    • 공간 효율 : 수많은 페이지들을 웹 서버가 들고있을 필요 없이 매번 만들어서 반환하면 된다는것
    • 실시간성 : 요청이 들어온 순간의 데이터로 만들기 때문에 데이터 및 페이지의 신선도가 높다

5.2 웹 어플리케이션 서버

프로세스

• 운영체제로부터 자원을 할당받은 작업의 단위
• 실행 단위가 크고 한개의 프로그램에 한개의 프로세스만 존재

스레드

• 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위
• 실행 단위가 작고 한개의 프로그램(프로세스) 내에 수많은 스레드가 존재가능하다

• 1요청 : 1스레드 = 상주 프로세스의 Stateful 장점과 비상주 프로세스의 Stateless장점을 스레드를 통해 얻어냄
  • 하나의 요청이 들어오면, 하나의 스레드가 해당 요청에 할당
  • 매번 요청마다 스레드를 만들기보다 미리 만들어놓고, 필요에 따라 할당만 하자
    • 스레드 풀(Thread Pool) : 몇개의 스레드를 만들어놓고 대기시킬지 개수를 지정해놓는다
    • 스레드는 자기가 맡은 일을 수행하고, 스레드 풀에 반환된다
  • Servlet 서블릿 : 1 요청에 대해 할당되는 1 자바 스레드는 서블릿이라 불린다
  • Servlet Container 서블릿 컨테이너 : 요청이 오면 갖고있는 스레드를 할당하고, 완료 뒤 회수하는 주체
• PHP 스크립트 언어의 한계 -> JAVA 객체지향 프로그래밍 언어 도입
• PHP 내장 웹 서버가 아닌, JAVA 어플리케이션 내장 웹 서버 Tomcat 등장
• Tomcat 안에 Java 어플리케이션이 있는 일체형 ->WAS(Web Application Server)

6. 웹 페이지 서빙 방식 3가지

템플릿 엔진

동적 웹 페이지를 만들기 위해서는 2개가 필요 = 반복적인 템플릿 + 데이터

• 반복적인 템플릿 = ViewTemplate
• 데이터 = Model
• 동적 웹 페이지 = View(HTML)

MVC(Model - View - Controller)

데이터베이스에서 Model(데이터)를 조회하여 그걸 기반으로 View(웹 페이지)를 만들어 Controller가 반환

• Controller : 요청을 받고, 그에 따른 연산(로직)을 시작시키고, 그 결과를 반환
• Model : 데이터에 대한 조회, 조작
• View : Model(데이터)를 기반으로 만들어진 웹 페이지 + 유저의 동작을 받아 Controller에게 요청 전달
  • 유저가 보는 것 : 웹 페이지 ->Controller가 반환해준 것
  • 유저가 하는 것 : 자바스크립트 인터렉션 ->Controller 호출

1. SSG(Static Site Generation) : Nginx, S3 - 정적 리소스 반환

• 미리 만들어진 웹 페이지인 정적 웹 페이지를 요청에 따라 반환

2. SSR(Server Side Rendering)

• 템플릿 엔진이 웹 어플리케이션 서버에 있다
• 웹 어플리케이션 서버가 동적 웹 페이지를 생성 후 반환
• Spring Thyeleaf, Next.js
• 장점
  • 웹 크롤러 입장에서 해당 홈페이지가 가진 모든 웹 페이지를 볼 수 있어 SEO가 가능하다
• 단점
  • 웹 페이지 요청할 때 마다 웹 서버가 만들어줘야 하기 때문에 웹 페이지 만들고 유저가 보기까지 시간이 걸린다
  • 웹 서버의 CPU, 메모리 자원이 사용되기 때문에 AWS같은 클라우드 사용 시 비용 부담
    

3. CSR(Client Side Rendering)

• 템플릿 엔진이 웹 브라우저에 있다
• 웹 브라우저가 동적 웹 페이지를 생성 후 반환
• React.js
• 장점
  • 1번 절차 Initial Loading에서 큰 파일을 받은 이후로는 웹 페이지 전환이 굉장히 빠르다
• 단점
  • 1번 절차 Initial Loading을 통해 템플릿 엔진(리액트 자바스크립트) 파일을 가져오는데 정말 크다
  • 첫 페이지를 렌더하기 위해 가져와야 하는 파일 용량이 너무 크고, 시간이 오래걸린다
  • 웹 크롤러 입장에서 해당 홈페이지에 어떤 웹 페이지가 있는지 알수가 없으니 SEO가 불가능하다