CS/Web

CGI(Common Gateway Interface)

CGI란

CGI는 공용 게이트웨이 인터페이스로 웹 서버와 외부 프로그램 간의 통신을 위한 표준 인터페이스이다.
CGI를 사용해 웹 서버가 클라이언트로부터 요청을 받고, 이러한 요청을 외부 프로그램으로 전달하여 프로그램이 요청을 처리하고 결과를 다시 웹 서버로 전달할 수 있다.
지금 말하는 외부 프로그램은 웹 서버에서 실행되는 프로그램이 될 수 있다. 예를 들어 python과 같은 스크립팅 언어로 작성된 CGI 스크립트가 웹 서버에서 실행되면, 이 스크립트는 웹 서버에서 동작하는 외부 프로그램이 된다. 즉 이 스크립트가 웹 서버와 통신하여 브라우저의 요청을 처리하고 그 결과를 브라우저에게 반환하는 것이다.
그래서 이 CGI를 사용하면 웹 서버와 외부프로그램 간의 데이터를 주고받을 수 있는 표준화된 인터페이스를 제공하고 이렇게 제공된 인터페이스에 의해 다양한 언어와 환경에서 동작하는 웹 애플리케이션을 개발할 수 있게 되었다.

등장 배경

웹이 처음 등장했을 때는 정적 페이지를 하이퍼링크로 연결하면 충분했다. 하지만 점차 동적 페이지에 대한 필요성이 커졌다. 이러한 동적 페이지는 페이지에 필요한 데이터를 저장하고, 꺼내는 등의 서버와의 통신이 늘어났고, 이러한 별도의 웹 서버 사이의 정보를 주고받는 규칙으로 정의된 것이 CGI 규격이다.


cf) 정적페이지, 동적 페이지

  • 정적 페이지
  • 간단하게는 저장된 그대로를 보여주는 웹페이로 정의내릴 수 있다.
    동적 페이지와의 차이를 비교해서 정적 페이지를 설명하면, 누구든 언제든 항상 같은 모습을 보여주는 페이지라고 할 수 있다. 예를 들어 논문을 보여주는 페이지를 열면, 언제든 누가 열든 같은 내용의 논문이 보일 것이다. 이런 페이지를 정적 페이지라고 할 수 있다.
  • 동적 페이지
  • 동적페이지는 동일한 접근을 하더라도 언제, 누구인지에 따라서 다른 내용을 표시되는 페이지를 말한다.
    예를 들어 로그인을 유저가 접속한 지역 정보에 따라 다른 날씨를 보여주거나, 로그인한 유저 정보에 따라 수강하는 강의 리스트를 보여주는 페이지 등이 정적 페이지라고 불린다.

CGI 작동 방식

  1. 클라이언트가 웹 서버에 요청을 보낸다.
  2. 웹 서버는 해당 요청을 처리하기 위해 CGI 스크립트를 실행한다.
  3. CGI 스크립트는 요청을 처리한 후 결과를 다시 웹 서버에 전송한다.
  4. 웹 서버는 이를 클라이언트에게 전달한다.

WSGI(Web Server Gateway Interface)

WSGI는 CGI 인터페이스를 기반으로 만들어진 Python 특화 웹 애플리케이션 인터페이스이다.
즉, 웹 서버와 Python 애플리케이션 간의 통신을 담당하는 인터페이스인 것이다. Python에 특화된 인터페이스이기 때문에 Python 애플리케이션과 다양한 웹 서버 간의 호환성을 제공한다.

WSGI 작동 방식

  1. 클라이언트가 웹 서버에 요청을 보낸다.
  2. 웹 서버가 클라이언트 요청을 받으면 WSGI 인터페이스를 구현한 Python 애플리케이션의 함수를 호출하여 요청을 처리한다.
  3. 이때 함수는 요청 객체(request)와 응답 객체(response)를 인자로 받고, 응답 객체를 반환한다.

이러한 작동 방식은 Python 애플리케이션이 웹 서버와 직접적으로 상호작용할 수 있도록 지원한다.
그러기에 요청을 할때마다 외부 프로그램을 호출해야 하는 CGI 보다 훨씬 빠른 성능을 제공한다.

또한, 이러한 방식에 의해 Python 애플리케이션은 웹 서버와 독립적으로 개발된다.
그러기에 다양한 웹 서버에서 동작할 수 있고 이는 Python 애플리케이션의 호환성과 이식성 향상할 수 있었다.

추가적으로 Python 웹 프레임워크(Django, Flask, Pyramid 등)에서 WSGI 인터페이스를 지원한다.

ASGI(Asynchronous Server Gateway Interface)

ASGI는 WSGI와 비슷한 목적을 가지고 있지만, 비동기 요청-응답 처리를 지원하는 인터페이스이다. ASGI는 비동기 웹 애플리케이션의 개발을 가능하게 하기에 WebSocket과 같은 실시간 통신 기술도 지원한다.

기존의 WSGI는 동기적인 방식으로 동작하기 때문에, 대용량 데이터를 처리하거나 간단한 웹 애플리케이션을 구축하기에는 좋으나 실시간 채팅 애플리케이션이나 비디오 스트리밍 서비스와 같이 높은 동시성을 요구하는 애플리케이션의 경우네는 비동기 코드를 처리하도록 설계되어 있는 ASGI가 더 적합하다.

'CS > Web' 카테고리의 다른 글

HTML과 HTML5의 차이점  (0) 2023.02.07
쿠키와 세션  (0) 2023.01.19
Get 방식과 Post방식  (0) 2022.05.02

HTML이란?

Hyper Text Markup Language의 약자이다.
웹 페이지 제작을 위한 표준 마크업 언어(markup language)로 HTML 요소를 사용해 섹션, 링크 등을 만들어 구조화할 수 있다.

또한 HTML은 동적 기능(dynamic functionality)을 할 수 없어 프로그래밍 언어로 간주되지 않는다.

1991년 HTML 1.0이 나오고 현재는 2014년에 출시된 HTML 5를 표준으로 사용하고 있다.

HTML과 HTML5의 차이점

멀티미디어 기능

HTML4까지 웹 브라우저에 멀티미디어 파일(3D, 오디오, 영상 등)을 재생하려면 브라우저가 아닌 별도의 플러그인(plug-in)이 필요했지만, HTML5에서는 웹 브라우저에서 직접 재생할 수 있다.

Web Storage

HTML5부터 해당 도메인과 관련된 데이터를 서버가 아닌 클라이언트의 웹 브라우저에 저장할 수 있도록 하는 기능이다.
기존의 쿠키와 세션의 한계를 해소한다.

쿠키의 단점
  • 4KB의 데이터 저장 제한
  • HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
  • 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

웹 소켓 기능

웹 소켓은 실시간 양방향 데이터 전송을 위한 기술이다.
HTML5에 새로 추가된 기능으로 처음 웹 소켓 연결이 이루어지면 계속 연결된 상태로 있으며, 따로 업데이트가 있는지 요청을 보낼 필요가 없다.
그래서 업데이트할 내용이 생겼다면 서버에서 바로 클라이언트에게 알린다.
웹 소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 구현했다. 이러한 방식은 단방향 통신이었기에 주기적으로 서버에 새로운 업데이트 사항이 있는지 확인하는 요청을 보내야 했다.

위치(Geolocation) 기능

HTML5부터 Geolocation API를 제공하기에 지도 서비스를 이용할 때 내 위치를 정확하게 알 수 있다.
컴퓨터에는 GPS 모듈이 없지만, Geolocation API를 사용해 주위에 있는 공유기, 전화 기지국, 각종 네트워크 장비들로부터 획득한 위치 정보 데이터를 계산해 현재 위치를 계산한다.
Geolocation API 관련 링크

DOCTYPE 선언

HTML에서 DOCTYPE 선언으로 문서의 버전을 지정하는데 HTML5 이전에는 DTD(Document Type Definition)을 사용해 복잡한 DOCTYPE 선언을 작성해야 했다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

이게 DTD를 사용한 HTML 4.01의 DOCTYPE 선언의 예이다.
HTML5부터는

<!DOCTYPE html>

이렇게 간단한 방법으로도 DOCTYPE을 선언할 수 있다.

태그

HTML5에서 여러 태그들이 추가 되었다.
'<header>', '<footer>', '<nav>', '<article>', '<section>', '<video>', '<audio>' 등이 있다.  
이렇게 추가된 태그들 중 <article>, <section>, <header>, <footer> 등과 같이 의미론적인 요소를 포함한 태그들은 검색 엔진 최적화(SEO)를 향상하고, 웹 접근성을 높인다.  

 

 

'CS > Web' 카테고리의 다른 글

CGI, ASGI, WSGI  (0) 2023.04.12
쿠키와 세션  (0) 2023.01.19
Get 방식과 Post방식  (0) 2022.05.02

쿠키(Cookie)

  • 쿠키는 클라이언트에 대한 정보를 클라이언트의 하드디스크에
    작은 파일 형태로 저장한 text 파일로
    서버에서 사용자에게 편리한 기능을 제공하기 위해 많이 사용되고,
    쿠키는 웹 브라우저에 의해 관리된다.
  • 쿠키는 텍스트 형태로 저장되기 때문에 변조나 복사 등이 가능하여 보안성이 없다.
  • 저장되는 위치는 시스템(운영체제)이나 브라우저에 따라 다르며
    형식도 꾸준히 바뀌어 가고 있다.
  • 쿠키는 웹 브라우저가 거쳐간 웹 사이트 및 개인의 정보가 기록되기 때문에
    개인의 사생활을 침해할 소지가 있으며,
    이로 인한 보안 문제를 유발하기 때문에 일반적으로 웹 브라우저 자체에
    쿠키 거부 기능이 포함되어 있다.
    하지만, 쿠키 거부 기능을 설정하게 되면 웹 브라우저와의 연결을
    지속시키지 못하기 때문에 문제가 발생하게 된다.

쿠키의 동작 방식

쿠키의 동작 방식은 웹 서버와 웹 브라우저 간의 상호 협력으로 이루어진다.
웹 서버가 웹 브라우저의 요청에 응답할 때
HTTP 프로토콜에 있는 HTTP 헤더에 쿠키 정보를 포함시켜 클라이언트 쪽으로 보낸다.
그리고, 웹 브라우저가 웹 서버에 존재하는 페이지를 요구할 때
그 전에 자신이 방문했을 때 해당 페이지에 대한 웹 서버가 웹 브라우저 쪽으로
심어놓았던 쿠키를 웹 서버로 다시 건내주어서
이전 상태를 웹 서버가 알 수 있도록 한다.

세션(Session)

쿠키의 경우 브라우저에 상태를 유지하기 위한 정보를 저장하지만
(즉, 로컬 PC의 하드디스크에 저장)
세션은 웹 서버의 웹 컨테이너에 상태를 유지하기 위한 정보를 저장하는 것으로
『javax.servlet.http』 패키지의 『HttpSession』인터페이스를 통해
세션을 사용하게 된다.
또한 세션은 서버와 관련된 정보를 노출하지 않기 때문에
쿠키를 사용하는 것 보다 『HttpSession』 인터페이스의 세션을 통한 상태 관리가
보다 안정적(보안성 향샹)이라 할 수 있다.

한 번 생성된 세션은 종료하기 전까지 지속적으로 유지된다.
(중간에 사라지지 않음)
단, 은행 인터넷 뱅킹 이용 시 로그인이 풀리는 것과 같은 이유는
임의로 설정을 해 두엇기 때문이다.
이와 같은 성격으로 웹 어플리케이션을 실행하는 동안
지속적으로 사용하는 데이터의 저장 장소로 세션이 적합(적당)하다.

 

 

'CS > Web' 카테고리의 다른 글

CGI, ASGI, WSGI  (0) 2023.04.12
HTML과 HTML5의 차이점  (0) 2023.02.07
Get 방식과 Post방식  (0) 2022.05.02

 

GET 방식

ex)https://n.news.naver.com/article/005/0001518197?cds=news_media_pc

https://n.news.naver.com/article/005/0001518197 ? → 요청 페이지

cds=news_media_pc → 전송 데이터

  • 주소 + 데이터(모두 노출)
  • 기본 전송 방식이고 사용이 쉽다.
  • 전송할 데이터를 문자열 형태(Query String)로 URL 뒤에 인수로 붙여서 전송을 수행하는 방법(방식)
  • URL 뒤에 인수로 붙어있는 내용을 누구나 볼 수 있고 이로 인해 보안성이 취약하다.
  • <form> 태그에서의 GET 방식은 서버로 데이터를 전송하는 과정에서 서버 처리가 지연될 경우 중복해서 요청이 이루어진다는 문제가 발생할 수 있다는 단점을 가지고 있다.
  • 형식 및 구조 『URL주소?속성=데이터&속성=데이터&....』 『URL주소?name=value&tel=value2&...』
  • 여러 개의 데이터를 전송할 때 ‘&(앰퍼샌드)’로 구분해서 전송한다.
  • GET 방식은 서버에서 데이터를 가지고 와서 보여준다거나 하는 용도로 주로 사용한다. 서버의 값이나 상태를 바꾸는 용도로는 사용하지 않는다. 즉, 단순 페이지 요청에 많이 사용된다는 것이다.
  • 서블릿에서는 doGet()을 이용해 데이터를 처리한다.
  • GET 방식의 장점
  • 여러가지 형태를 통해 간편한 데이터 전송이 가능하다. POST 방식처럼 form 태그를 사용하여 전송도 하고, 링크에 직접 걸어 사용해도 되고, 주소창에 직접 입력해도 된다. ex) <a href="http://url?키=값&키=값"> <form action="http://url?키=값&키=값"> window.open(href="http://url?키=값&키=값"); window.location.href="http://url?키=값&키=값"; window.location.replace("http://url?키=값&키=값");

 

POST 방식

ex) http://localhost:8090/WebApp06/Test001.jsp

  • 주소만 노출 / 데이터는 숨김
  • <form> 태그에서 method 속성을 "post"로 설정해서 요청
  • 파일의 형태로 전송되기 때문에 URL 상에서는 내용이 나타나지 않는다. 이로 인해 GET 방식에 비해 보안성이 높다고 할 수 있다.
  • POST 방식은 HTTP Body 안에 숨겨져서 전송된다.
  • GET 방식처럼 URL 뒷부분에 추가해서 보내는 것이 아니라 HTTP Body 안에 넣어서 보내기 때문에 GET 방식에서 발생할 수 있는 보안성 문제를 어느정도 해결할 수 있다.
  • GET 방식에 비해 대용량의 데이터를 전송할 때 사용한다.(전송 데이터 용량은 무제한이다.)
  • 전송 시 서블릿에서는 또 다시 가져오는 작업을 해야 하므로 처리 속도가 GET방식보다 느리다.
  • 서블릿에서는 doPost()를 이용해 데이터를 처리한다.
  • <form> 태그를 이용해서 submit 하는 일반적인 형태가 POST 방식이다.
  • POST 방식은 서버의 값이나 상태를 바꾸기 위해 주로 사용한다. 글쓰기를 하게 되면 글의 내용이 데이터베이스에 저장되고 수정을 하게되면 데이터베이스에 수정된 값이 적용될 수 있도록 처리하는 구성이다.

 

'CS > Web' 카테고리의 다른 글

CGI, ASGI, WSGI  (0) 2023.04.12
HTML과 HTML5의 차이점  (0) 2023.02.07
쿠키와 세션  (0) 2023.01.19