MDN의 초심자용 서버 사이드 프로그래밍에 대한 기사를 읽고 그에 대한 공부를 해볼 예정이다.
여기서 서버 측 프로그래밍이 무엇이고, 어떤 일을 할 수 있는지, 클라이언트 프로그래밍과 어떤 점이 다른지에 대해 배워볼 것이다.
현대의 전 세계 웹 개발자들은 서버측 개발을 공부하는 것을 권고 하고 있다. 대부분의 큰 사이트들은 동적으로 보여주기 위한 다양한 데이터가 필요할 때 서버측의 코드를 사용한다.
일반적으로 서버에 있는 데이터베이스에 저장된 데이터를 빼내서 일부 코드를 통해 보일 수 있도록 클라이언트(HTML 또는 JavaScript)에게 송신한다.
서버측 코드의 큰 장점은 개별 사용자를 위한 맞춤 웹사이트 컨텐츠를 제공한다는 것이다. 동적 웹사이트는 사용자의 선호도 및 습관에 따라 더 관련성 높은 컨텐츠를 강조 표시할 수 있다.
또한 이것은 사이트를 저장된 개인 선호와 정보를 사용하기 쉽게 만들어 준다.
서버사이드 웹사이트 프로그래밍이 무엇인가?
웹 서버와 통신하는 웹 브라우저는 HyperText Transport Protocol(HTTP)을 사용하고 있다.
우리가 웹페이지의 링크를 클릭하거나 폼을 전송하거나 검색을 시작할 때 우리의 웹 브라우저는 HTTP request를 목적 서버에 전달한다. 요청에는 영향을 받는 리소스를 식별하는 URL, 필요 작업을 정의하는 메서드가 포함된다.
(메소드의 예시로는 리소스를 가져오거나, 삭제하거나 게시하는 것이 있다.
그리고 URL 매개변수(query 문자열 통해 전송된 값-쌍으로 이루어진 객체), POST 데이터(HTTP POST 메소드에 의해 전송된 데이터), 관련 쿠키 파일을 이용해 인코딩된 추가 정보를 포함할 수 있다.
웹 서버는 클라이언트의 요청이 오길 기다리고, 요청이 도착하면 작업을 진행해, 웹 브라우저에 HTTP 응답 메세지를 보낸다. 그 응답은 요청이 성공 또는 실패를 지시하는 상태 라인을 포함하고 있다.
요청에 대한 응답이 성공적이라면 본문은 요청 리소스를 포함할 것이고 이는 웹 브라우저에 보여질 수 있다.
정적 웹 사이트 (Static Website)
아래 그림은 정적 웹 사이트의 기본 웹 구조를 보여준다. (정적 웹 사이트는 특별한 리소스 요청이 들어올 때 서버에서 하드 코딩된 동일 컨텐츠를 반환한다.)
사용자가 페이지를 탐색하거나, 브라우저가 지정된 URL에 HTTP "GET" 요청을 보낼 때 서버는 파일 시스템에서 요청한 문서를 검색하고 문서과 success status를 포함한 HTTP 응답을 반환한다.
만일 어떠한 이유 때문에 파일을 검색 할 수 없는 경우 error status가 반환된다.
동적 웹사이트 (Dynamic Website)
동적 웹사이트는 필요할 때마다 동적으로 응답 컨텐츠가 생성된다.
동적 웹사이트의 웹페이지는 보통 HTML 템플릿에 있는 자리 표시자에 데이터베이스에서 가져온 데이터를 넣어 생성된다. (이 방법은 많은 양의 컨텐츠를 저장하기에 정적 웹사이트를 이용하는 것보다 효과적이다.)
동적 웹사이트는 사용자 또는 저장된 환경을 기반으로 URL에 대해 다른 데이터를 반환할 수 있고, 응답을 반환하는 과정에서 다른 작업을 수행할 수 있다.
동적 웹사이트를 지원하는 코드는 서버에서 실행되어야 한다. 이러한 코드를 만드는 것을 "sever-side programming"이라 알려져 있다. (또는 "back-end scripting"이라고도 불린다.)
아래 그림은 동적 웹사이트의 간단한 구조를 보여주고 있다.
정적 웹사이트와 같이 브라우저는 HTTP 요청을 서버에 보내고, 서버는 요청을 처리하고 적절한 HTTP 응답을 반환한다. 정적 리소스의 요청은 정적 사이트에서의 방법과 같은 방법으로 처리한다. (정적 리소스, 파일은 변하지 않는 파일로 일반적으로 CSS, JS, Image 등등이 있다.)
동적 리소스를 위한 요청은 ② 서버측 코드에 대신 전달(위 그림에서 웹 애플리케이션으로 보이는 부분), ③"동적 응답"을 위해 서버는 응답을 해석해 필요한 정보를 데이터베이스에서 읽고, ④탐색한 데이터와 HTML 템플릿을 결합하고, ⑤⑥생성된 HTML을 포함한 응답을 다시 보내준다.
서버 사이드와 클라이언트 사이드의 프로그래밍은 같은가?
이전으로 돌아와서 서버 측에 관여하는 코드와 클라이언트 측에 관여하는 코드를 살펴 보자.
각각의 케이스마다 코드는 명확히 다른데, 두 사이드의 차이를 보면
1) 그들의 목적과 고민이 서로 다르다.
2) 일반적으로 같은 프로그래밍 언어를 쓰지 않는다. (JS는 예외적으로 서버와 클라이언트 사이드 둘 다 사용 가능하다.)
3) 그들은 다른 운영체제 환경에서 수행된다.
브라우저에서 실행되는 코드는 client-side code로 알려져 있다. client-side code의 주 관심사는 렌더링된 웹페이지의 모양과 행동을 개선시키는 것이다.
이것은 UI 구성요소 선택 및 스타일 지정, 레이아웃 만들기, 탐색, 양식 유효성 검사 등을 포함하고 있다. 대조적으로, server-side 웹 사이트 프로그래밍은 대부분 브라우저의 요청에 대한 응답으로 어떤 컨텐츠를 반환하는 지 선택하는 것을 포함한다. server-side code는 제출된 데이터 및 요청의 유효성 검사, 데이터 저장 및 검색을 위한 데이터베이스 사용, 필요에 따라 올바른 데이터 전송과 같은 작업을 처리한다.
클라이언트 측 코드는 HTML, CSS, 그리고 JS로 작성된다.
이것들은 웹 브라우저 안에서 실행되고 기본 운영체제와 연결되지 않거나 아주 약간 연결된다. (파일 시스템의 연결의 제한이 포함되어 있다.) 웹 개발자는 모든 사용자가 웹사이트를 보는 데 사용할 수 있는 브라우저를 조작할 수 없다.
브라우저는 클라이언트 측 코드 기능과 일관성 없는 수준의 호환성을 제공해, 클라이언트 측 프로그래밍의 어려움은 브라우저 지원의 차이를 정상적으로 처리하는 것이다.
서버측 코드는 다양한 프로그래밍 언어로 작성 가능하다.
대중적인 서버측 웹 언어를 포함한 예시로 PHP, Python, Ruby, 그리고 C#이 있다. 서버측 코드는 서버의 운영체제와 모든 접속 권한을 가지고, 개발자는 그들이 원하는 프로그래밍 언어를 사용 가능하다.
개발자는 일반적으로 web frameworks(웹 프레임워크)를 이용해 코드를 작성한다. 웹 프레임워크는 일반적인 문제를 해결하고 개발 속도를 높이며 특정 도메인에서 직면하는 다양한 유형의 작업을 단순화하기 위해 설계된 함수, 객체, 규칙 및 기타 코드 구성 요소의 모음이다.
다시 말하면 클라이언트와 서버 사이드 코드 둘 다 프레임워크를 사용하지만 도메인은 다르지 때문에 프레임워크도 다르다. 클라이언트 측 웹 프레임워크는 레이아웃 및 프레젠테이션 작업을 단순화하는 반면 서버 측 웹 프레임워크는 직접 구현해야 하는 많은 "공통" 웹 서버 기능을 제공한다.
(서버 측 공통 웹 서버 기능으로 세션 지원, 사용자와 인증을 지원, 데이터베이스와 쉬운 연결 등등이 있다.)
참고
클라이언트 측 프레임워크는 때때로 클라이언트 측 코드를 개발하는 속도를 올릴 수 있게 도와주도록 사용하지만, 우리는 모든 코드를 직접 작성할 수도 있다. 사실 우리가 작고 간단한 사이트의 UI를 만든다면 우리가 직접 작성하는 코드가 더 빠르고 효과적일 수 있다.
이와 대조적으로, 우리가 서버측 웹 애플리케이션의 컴포넌트를 프레임워크 없이 작성하는 것은 거의 생각하기 어려울 것이다. (Python에서 HTTP 서버와 같은 중요한 기능 구현을 처음부터 하는 것은 어렵지만 Django와 같은 Python 웹 프레임워크는 다른 유용한 도구와 함께 즉시 사용할 수 있는 도구를 제공한다.)
