DevOps14일차 - 정적웹사이트, 동적 웹사이트

문한성·2023년 3월 24일

부트캠프

목록 보기

22/123

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

정적 및 동적 웹사이트는 구축, 업데이트 및 사용자에게 제공되는 방식이 다른 두 가지 유형의 웹사이트입니다.

정적 웹 사이트는 HTML 및 CSS만 사용하여 구축되며 페이지의 콘텐츠는 웹 사이트 소유자가 수동으로 업데이트할 때까지 동일하게 유지됩니다. 정적 웹 사이트의 페이지는 미리 구축되어 서버에 저장되며 사용자가 페이지를 요청하면 서버는 미리 구축된 페이지를 사용자의 브라우저로 전송합니다. 정적 웹 사이트는 간단하고 쉽게 만들고 호스팅할 수 있으며 서버 측 처리가 필요하지 않기 때문에 빠르게 로드됩니다. 그러나 기능 및 상호 작용 측면에서 제한적입니다.

반면에 동적 웹사이트는 PHP, Ruby 및 JavaScript와 같은 보다 복잡한 기술을 사용하여 구축되어 페이지의 콘텐츠가 사용자 입력 또는 기타 동적 요인에 따라 자동으로 변경될 수 있습니다. 동적 웹 사이트의 콘텐츠는 데이터베이스에 저장되며 사용자가 페이지를 요청하면 서버는 데이터베이스에서 관련 데이터를 검색하고 사용자 브라우저에 대한 사용자 정의 페이지를 생성합니다. 동적 웹 사이트는 더 복잡하고 더 많은 서버 측 처리가 필요하지만 사용자 계정, 전자 상거래 및 콘텐츠 관리 시스템과 같은 고급 기능을 허용하여 더 유연하고 상호 작용할 수 있습니다.

요약하면 정적 웹 사이트는 더 간단하고 빠르며 만들고 호스팅하기 쉽지만 기능과 상호 작용 측면에서 제한적입니다. 동적 웹 사이트는 더 복잡하고 유연하며 대화형이지만 더 많은 서버 측 처리가 필요하고 만들고 호스팅하기가 더 어려울 수 있습니다. 사용할 유형의 선택은 개발 중인 웹 사이트의 특정 요구 사항에 따라 다릅니다.

웹사이트 렌더링 방식의 변천

AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만드려면, 서버가 매번 동적으로 생성하는 수 밖에 없었습니다. 한편 동적 웹사이트를 받아오기 위해서는, 서버가 HTML의 형태로 브라우저에 제공해주어야만 했기 때문에, 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번했습니다. 따라서, 네트워크 상에서 주고받는 패킷의 크기가 다소 컸습니다.

이처럼 AJAX 이전에는 서버에서 웹페이지를 만드는 기술이 보편화되었고, 이러한 동적 웹사이트를 만드는 기술로는 PHP, JSP, ASP 등이 널리 사용되었습니다. (물론 node.js로도 동적 웹페이지를 만드는 것이 가능합니다)

// 동적 웹페이지 예제 (node.js)
const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html'); // HTML 문서의 형태로 전달됨
  res.end('<h1>동적 웹페이지</h1><p>with 랜덤한 값</p>' + Math.random()); // 서버에 의해서 동적으로 바뀜
});

server.listen(3000);

그러나, 점차 브라우저의 발달과 AJAX 기술이 보편화되면서, 모든 동적인 정보들을 서버가 부담할 필요는 없게 되었습니다. 필요한 부분만 클라이언트가 요청할 수 있게 되었고, 이로 인해 서버의 부하가 다소 줄어들게 되었습니다.

이에 따라 서버는 JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작했으며, 클라이언트 사이드, 즉 웹페이지는 자바스크립트와 AJAX 기술을 이용한 보다 고도화된 웹 앱, 즉 Single Page Application으로 변모하기 시작합니다. 자바스크립트가 동적인 렌더링을 지원하나, 결국 서버가 웹페이지를 렌더링하지 않으며, 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 파일이 아티팩트로 생성됩니다. 빌드 도구를 이용해 이를 실행할 수도 있습니다. Spring 및 Spring Boot 생태계에서는 대표적인 빌드 도구가 두가지(maven, Gradle)가 있습니다. 그 중에서 여기서는 Gradle 위주로 간략하게 흐름을 설명합니다.

자바 개발 환경(JDK, OpenJDK가 대표적) 준비
gradle 설치
프로젝트 폴더로 이동
빌드
- gradlew build 명령 입력
자바 애플리케이션은 실행을 위해서 빌드가 필수적입니다. 따라서, 빌드 후에 실행을 위해서 gradlew bootRun 명령을 통해 애플리케이션의 실행이 가능합니다. 그밖에 gradle tasks를 이용해 gradle에서 사용할 수 있는 다양한 태스크를 확인할 수 있습니다.