[웹 구성 간 흐름] 웹 내 주체 : 웹 페이지를 사이에 둔 웹 브라우저와 웹 서버

[그림으로 보는 웹 구성 간 흐름]

---

[그림으로 보는 웹 내 주체 : 웹 페이지를 사이에 둔 웹 브라우저와 웹 서버]

---

1. 마크업 언어 & 마크다운 언어

• 마크업 언어 (Markup Language)
  • 문서를 구성하는 구조적 의미 (제목, 단락, 목록 등)
• 마크다운 언어 (Markdown Language)
  • 사용에 용이한 마크업 파생 언어

---

2. Cascading & Selector, Specificity

Cascading

• 종속 혹은 우선순위

Selector, Specificity

• selector : 선택자
  1. Element(Tag) →
  2. Class →
  3. Id →
  4. Inline 순서로 적용 우선 순위가 높아짐
• specificity : 선택자가 좁아질 수록, 구체적일 수록 명료하게 정의되어 우선 순위가 높음

---

3. 웹 브라우저에서의 Render 절차

1. 네트워크를 통해 받은 HTML → DOM, CSS → CSSOM
2. 구문 분석을 통해 DOM → DOM Tree, CSS → CSSOM Tree로
3. 두 Tree → Render Tree
4. Render Tree → Layout(Reflow) → Paint(Repaint)

Time to interactive(TTL)

HTML + CSS 로드 후 JS를 통해 마우스 이벤트 등이 비로소 적용되었을 때

---

4. WS와 WAS의 차이

• WS = Web Server : 정적 웹 리소스 반환 ex) 포장버거
  • 외부에 제공하려는 데이터를 웹 페이지의 형태로 미리 생성해두고 요청에 따라 반환
    • 예) 1000명 유저 정보 페이지 →웹페이지 1000개
• WAS = Web Application Server : 정적 + 동적 웹 리소스 반환 ex) 수제버거

  • 요청에 따라 바로 웹 페이지를 생성해서 반환
    - 웹 서버 : 요청 → 반환
    - 어플리케이션 : 요청 → 연산 → 반환 (동적 웹 페이지를 만드는 주체)

    → 공간 효율과 실시간성에서 장점

CGI(Common Gateway Interface)

• 웹 서버와 어플리케이션을 연결하기 위한 기술
• 웹 서버가 요청을 받아 어플리케이션을 실행하고 웹 페이지 생성을 요청하기 위한 연결고리

---

5. 프로그램과 프로세스, 스레드의 차이

한 개의 프로그램에 한 개의 프로세스가 존재,
한 개의 프로그램(한 개의 프로세스) 내에 수많은 스레드 존재 가능

• 프로그램(Program) : 정적 상태의 파일
  • 파일이 저장 장치에 있지만 메모리에는 올라가 있지 않은 정적인 상태
• 프로세스(Process) : ‘프로그램’이 실행되고 있는 동적 상태의 컴퓨터 프로그램
  • 메모리에 적재되고 CPU 자원을 할당받아 프로그램이 실행되고 있는 상태
    • 실행 단위가 크고 싱글태스킹
• 스레드(Thread) : 실행 단위가 작고 멀티태스킹
  • 하나의 프로세스 내에서 동시에 진행되는 작업 갈래, 흐름의 단위

WAS 중 Tomcat

Java Servlet을 실행시키고 JSP 코드가 포함되어 있는 동적 웹 페이지를 구동시켜주는 프로그램

• 1요청 : 1 스레드
  • 스레드 풀 : 몇 개의 스레드를 만들어놓고 대기시켜둘지 개수를 지정
  • 할당 → 수행 (스레드) → 반환 (스레드 풀)

Servlet

동적 웹 페이지를 만들 때 사용 되는 자바 기반의 웹 애플리케이션 프로그래밍 기술

• 1요청에 대해 할당되는 1 자바 스레드 = 서블릿
• 서블릿 컨테이너 = 서블릿 관리자

---

6. WAS에서 MVC패턴

• Controller : 요청을 받고, 연산을 시작시키고, 결과를 반환
  • 요청 → 연산 → 반환
• Model : 데이터에 대한 조회, 조작
• View : Model을 기반으로 만들어진 웹 페이지이자, 유저의 요청을 받아 Controller는 응답 반환

---