정적파일, 동적파일, 미디어파일

 

오늘 정적파일의 정의와 그 반댓말을 공부하다가 많은 사람들이 잘못이해하고 게시글에서 오용하고 있는 글을 봐서 이에 대해서 올바르게 정의내리고 이해하기 위해서 글을 쓴다.

 

 

정적파일

---

 

정적파일(Static file)의 정의는 다음과 같다.

 

1. Javascript, CSS, Image 등 웹 서비스에서 사용하기 위해 미리 서버에 저장해 놓은 파일이다.

• 파일 자체가 고정되어 있고, 서비스 중에도 추가되거나 변경되지 않는다.

우리가 페이지를 만들 때 쓰임이 정해져있는 파일들이기 때문에 개발하는 단계에서 이러한 파일들을 관리한다.

 

2. 외부 환경에 관계 없이 일정한 결과값을 제공해주는 걸 의미한다.

 

3. 정적웹페이지

 

• 웹서버에 미리 저장된 파일(HTML, Image, JavaScript 파일 등)이 그대로 전달되는 웹 페이지

• 서버는 사용자가 요청(Request)에 해당하는 저장된 웹 페이지를 보냄

• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨

 

 

 

 

동적파일x -> 동적웹페이지

---

 

사실 동적파일이라는 말을 구글링해서 찾아보았을 때 딱히 정의된 말을 찾아 볼 수 없었다.사람들은 정적파일 vs 동적파일이라는 말보다는 정적웹페이지 vs 동적웹페이지라는 말로 주로 비교했다.그랬기에 여기서도 동적 웹페이지를 통해 비교하고자 한다.

 

 

1. 동적 웹페이지

• 웹서버에 있는 데이터들을 스크립트에 의해 가공처리 한 후 생성되어 전달되는 웹 페이지 

• 웹서버는 사용자의 요청(Request)을 해석하여 데이터를 가공한 후 웹 페이지에 보냄 

• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨

 

 

 

 

동적 웹은 클라이언트의 요청에 따라 다양한 화면을 제공해 준다.  우리가 로그인을 한 후 마이페이지를 들어가면 각기 다른 정보를 확인할 수 있다. 그리고 상품 페이지에 들어갈 때 각각 다른 화면을 제공받을 수 있다. 이 경우에 웹 서버에서는 단순히 HTML, CSS, JAVASCRIPT 파일만 제공해주는 게 아니라 웹 어플리케이션 서버(WAS)와 직접 통신을 한다.

 

웹 어플리케이션 서버(WAS)는 복잡한 비즈니스 로직, 데이터 베이스와 통신 등을 책임진다(백엔드 개발자가 담당) 웹 서버는 WAS와 통신해서 얻은 결과 값을 바탕으로 가공 작업을 거친다. 최종적으로 만들어진 동적인 웹 파일을 클라이언트에게 전달해 준다. 기본적으로 동적 웹은 정적 웹에 비해 복잡한 로직들과 리소스를 필요로 한다고 보면 된다.

 

 

 

[참고]
웹 어플리케이션 서버는 일종의 API 서버라고 볼 수 있다.

데이터베이스와 통신하며 데이터를 가공하고 전달해주는 역할도 하기 때문이다.

 

그러나 사실 정적 웹을 다운받는 방식으로도 복잡한 어플리케이션을 구현할 수 있다.

일례로 정적인 웹을 다운받은 후 클라이언트(브라우저)에서 다른 서버와 통신을 통해 로그인, 상품 정보 불러오기, 결제하기 등의 작업을 수행할 수 있기 때문이다.

즉 웹 서버에서 단순하게 웹 껍데기를 다운받은 후 브라우저에서 핵심 작업들을 전부 수행하는 것이다.

이런 작업 방식을 Client Side Rendering(CSR)이라고 부른다.

현재 웹 개발에 많이 사용되는 웹 프레임워크 React, Vue 등은 해당 방식으로 동작한다.

 

 

 

미디어 파일(Media file)

 

사실 정적파일의 반댓말을 찾을 떄 동적파일이 아닌 미디어 파일이 주로 나왔다. 

그 정의를 명확히 알아보자.

 

웹사이트 사용자가 웹에서 올리는 파일

• 파일 자체는 고정되어 있지만, 언제 어떤 파일이 정적 파일로 제공되고 준비되는지 예측할 수 없음

 

미디어 파일은 정적 파일과는 다르게 사용자가 업로드하는 파일이다.
따라서 이는 개발하는 단계에서 관리할 수 없는 파일들이기 때문에 따로 분류하여 관리하게 된다.

 

 

 

 

 

 

---

 

Reference:

정적파일 동적파일(동적웹사이트)

https://titus94.tistory.com/4

https://maily.so/grabnews/posts/ce76c9

https://dololak.tistory.com/78

 

정적파일 미디어파일

https://chagokx2.tistory.com/61

https://opentutorials.org/module/4034/24663