[0324] WAS와 Web Server - 정적 웹사이트와 동적 웹사이트

학습 목표

• 서버의 종류와 역할에 대해서 이해합니다.
• 웹서버와 웹 애플리케이션 서버의 차이점을 이해합니다.
• 정적, 동적이라는 단어를 이해하고, 정적 웹 사이트와 동적 웹 사이트의 차이점을 학습합니다.
• nginx를 통해 정적 웹 사이트, 정적 콘텐츠를 이해합니다.
• nginx를 이용해 정적 웹사이트를 제공하고, Mini WAS를 개발하면서 위의 그림에서 2와 5번에 해당하는 구조를 이해합니다.
• express, fastify를 통해 API 서버를 만들면서 WAS의 구조와 해당 서버에 대한 모듈을 이해합니다.
• 웹 서버와 WAS의 전체적인 구조를 이해하고, 기본적인 CRUD가 있는 블로그 서버를 개발하며, 전체 아키텍처를 이해합니다.

---

정적 웹사이트와 동적 웹사이트

---

• 정적 웹사이트: HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
• 동적 웹사이트: 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)
• 웹사이트 렌더링 방식의 변천
  • AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이즈를 만드려면, 서버가 매번 동적으로 생성해야 했음
  • 동적 웹사이트를 받아오기 위해서는, 서버가 HTML의 형태로 브라우저에 제공해주어야 했기 때문에, 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번했고, 이에 따라 네트워크 상에서 주고받는 패킷의 크기가 다소 컸음
  • 서버에서 웹페이지를 만드는 기술이 보편화되었고, 이러한 동적 웹사이트를 만드는 기술로는 PHP, JSP, ASP 등이 널리 사용됨
  • 브라우저의 발달과 AJAX 기술이 보편화되면서, 모든 동적인 정보들을 서버가 부담할 필요는 없게 됨
  • 필요한 부분만 클라이언트가 요청할 수 있게 되었고, 이로 인해 서버의 부하가 다소 줄어듦
  • 서버는 JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작했으며, 클라이언트 사이드(웹페이지)는 자바스크립트와 AJAX 기술을 이용한 보다 고도화된 웹 앱, 즉 Single Page Applicatiln으로 변모하기 시작함
  • 자바스크립트가 동적인 렌더링을 지원하나, 결국 서버가 웹페이지를 렌더링하지 않으며, HTML/CSS/JS 파일의 소스 코드 그대로 작동하는 특징을 갖고 있기 때문에, 이는 정적 웹사이트임

---

빌드와 언어별 빌드 도구

---

• 빌드: 프로그램의 소스 코드를 독립적인 아티팩트(artifact)로 변환하는 과정으로, 때로는 그 아티팩트 자체로도 실행이 가능하며 대체로 런타임(소프트웨어 실행 환경)이 필요한 경우가 많음
• 프레임워크: 소프트웨어 개발을 쉽게 만들어주기 위해 필요한 도구, 규약의 집합체
  • 백엔드 웹 애플ㄹ리케이션 개발용
    • Spring - Java, Kotlin
    • Django - Python
    • Express - JavaScript
  • 프론트엔으 웹 애플리케이션 개발용
    • React 및 관련 라이브러리 - JavaScript
    • Vue.js, Svelte - JavaScript
  • 모바일 및 데스크탑 애플리케이션 개발용
  • Flutter - Android, iOS 등
  • .NET Framework - Windows
  • Apple 운영체제 기본 Native 프레임워크 Cocoa - macOS, Cocoa Touch - iOS
  • 안드로이드 기본 Native 프레임워크 - Android
• 대표적인 빌드 도구
  • JavaScript 기반의 React 생태계
    • React 프레임워크를 사용하는 경우, create-react-app 또는 next.js와 같은 프레임워크를 사용함
    • 이 경우 대부분 다음과 같은 과정으로 프로덕션용 빌드 결과물(아티팩트)을 만들어낼 수 있음
      • node.js 개발 환경 준비
      • 프로젝트 폴더로 이동
        • package.json 파일이 있는지 확인
      • 의존성(dependency) 설치
        • npm install
      • 빌드
        • npm run build
      • 빌드 결과물 확인
        • build 폴더 확인
        • React는 프론트엔드 웹 애플리케이션이므로 결과물로는 HTML, CSS, JS 파일을 포함함
        • 이후 이 파일들을 nginx 등에서 정적 호스팅할 수 있음
    • 의존성 설치 후 빌드하지 않고 바로 애플리케이션을 실행하기 위해서는 npm run start 등의 명령어를 사용할 수 있음
    • 애플리케이션에 단위 테스트가 제공된다면, 애플리케이션의 테스트를 위해 npm run test 명령어 사용
    • 각 프로젝트에 사용되는 package.json 파일이 어떻게 구성되어 있느냐에 따라 달라질 수 있음
  • Java/Kotlin 기반의 Spring Boot 생태계 (Gradle)
    • Java/Kotlin 애플리케이션을 빌드하면 JVM(자바 런타임) 위에서 실행되는 war 파일이 아티팩트로 생성되며, 빌드 도구를 이용해 실행할 수도 있음
    • 대표적인 빌드 도구는 maven, Gradle이 있으며, Gradle은 아래 흐름을 따라 실행
      • 자바 개발 환경(JDK, OpenJDK가 대표적) 준비
      • gradle 설치
      • 프로젝트 폴더로 이동
      • 빌드
        • gradlew build 명령어 사용
    • 자바 애플리케이션은 실행을 위해 빌드가 필수적이므로, 빌드 후에 gradlew bootRun 명령을 통해 애플리케이션의 실행이 가능함
• 빌드가 필요 없는 경우
  • node.js 앱이나 Python과 같이 소스 코드 그대로 런타임을 실행할 수 있는 경우, 즉 다른 변환 작업이 필요 없는 경우에는 빌드 과정이 생략될 수 있음