작성중

일반적으로 동적인 웹 사이트 개발 시 상태관리(State Management)가 필요 합니다. 이번 포스팅에서는  상태관리가 무엇인지와 우리가 일반적으로 많이 사용하는 쿠키(Cookie)와 세션(Session)에 대해 자세히 알아 보도록 하겠습니다.

 

#1. 웹 서버 동작 원리

웹 사이트 상태관리의 필요성을 알기 위해 웹 서버와 클라이언트(웹 브라우저)가 어떠한 방식으로 동작 하는지를 먼저 알아 보겠습니다.

image-Fig1. 정적 웹 서버 동작 원리-

 

Fig1을 보면 아주 간단한 원리로 동작 하는 것을 알 수 있는데요. 클라이언트가 HTTP 프로토콜을 사용하여 웹 서버로 요청(Request)을 하게 되면 웹 서버는 해당 하는 HTML을 웹 브라우저로 전송 해 주고 웹 브라우저는 응답(Response) 받은 HTML을 파싱하여 사용자에게 보여주게 됩니다. 여기서 ‘요청’이란 우리가 웹 브라우저의 주소 표시줄에 http://crynut84.tistory.com이라고 입력 하는 행위나 웹 사이트의 링크를 마우스로 클릭하는 행위 등을 말합니다.

 

웹 사이트는 다시 정적인 웹 사이트와 동적인 웹사이트로 나눌 수 있습니다. 정적인 웹 사이트는 웹 서버에서 .HTML 파일을 완성된 .HTML 파일을 가지고 있다가 클라이언트의 요청이 있을 시 해당하는 .HTML 파일을 돌려 주는 형태입니다. 당연히 HTML 페이지의 내용들은 이미 결정 되어있어 있으므로 클라이언트의 상태, 방문정보, 시각등의 내용에 관계없이 항상 동일한 HTML 페이지를 보여줍니다. 요즘은 이런 웹사이트는 거의 없을 듯 합니다.

 

동적인 웹 사이트는 사용자의 액션에 따라 웹 사이트가 다르게 동작 하는 것을 말합니다. 예를들어 요즘 웹 사이트는 거의 로그인이라는 인증 과정을 거치게 되고, 로그인을 하면 ‘전호진님 환영합니다’라고 환영 인사도 해줍니다. 또한 게시판은 검색어에 따라 다른 결과를 보여주게 되고, 사용자 입맛에 맛게 정렬도 할 수 있습니다. 이와같이 요즘 일반적으로 볼 수 있는 사용자와 웹사이트가 서로 상호작용을 하는 웹 사이트를 동적인 웹사이트라고 합니다.

 

동적인 웹사이트를 만드는 기술은 ASP.NET, JSP, ASP, PHP, CGI등 여러 가지가 있습니다. 마이크로소프트의 동적인 웹사이트를 만드는 기술인 ASP.NET의 동작 원리(Fig2)를 보면 정적 웹사이트와 조금 다른 것을 알 수 있는데요.

image-Fig2. 동적 웹 서버 동작 원리-

 

클라이언트가 요청하게 되면 웹 서버는 요청에 대한 적절한  HTML을 새롭게 생성 합니다. 요청에 대한 일련의 처리(로직 수행)를 수행하게 되고 처리 결과를 다시 클라이언트에 돌려 주게 되는데 동적인 웹 사이트라고 해도 클라이언트가 받는 최종 응답은 정적인 HTML 페이지입니다. 예를들어 게시판에 여러 게시글이 있는데 사용자가 ASP.NET을 검색어로 입력하고 검색 버튼을 누르게 되면 이 요청을 웹서버가 받아서 게시글 중 ASP.NET이 들어간 결과만 찾아서 형식에 맞는 HTML을 구성하게 되고 클라이언트에 응답하주게 되는 것입니다. 이렇게 동적인 처리를 위해 ASP.NET과 같은 웹 기술이 필요하게 되고, 모든 처리는 웹 서버에서 수행되며, 클라이언트의 입장에서는 정적인 웹 사이트와 동일하게 웹 서버에 요청을 하고 응답받은 결과를 파싱하여 보여 주게 됩니다.

 

#2. 상태 관리(State Management)

웹 사이트를 사용하는 사용자는 HTTP GET방식이나 HTTP POST방식을 사용하여 웹 서버로 페이지를 요청하게 되고, 웹 브라우저는 웹 서버에서 응답받은 HTML을 파싱하여 렌더링하게 됩니다. 이러한 일련의 주기를 ‘라운드트립(Round Trip)’ 이라고 합니다.그런데 HTTP 프로토콜은 상태를 저장 할 수 없는 프로토콜입니다. 이 말은 클라이언트의 요청이 왔을대 웹 서버는 해당 요청에 대한 응답인 HTML을 보내주고 연결을 끊어버린다는 것입니다. 그렇기 때문에 라운드트립 시 페이지에 있는 컨트롤의 사용자 입력정보나 페이지의 정보들이 모두 손실 되게 됩니다.  예전에 사용하던 정적인 웹사이트(일방적으로 보기만 하는 웹사이트)에서는 문제가 되지 않지만 동적인 웹사이트에서는 사용자의 요청이나 컨트롤의 입력정보를 유지할 필요가 있기 때문에 ASP.NET은 상태 관리를 할 수 있는 여러가지 기능을 제공합니다.

 

상태관리의 정보를 저장하는 장소에 따라 두가지로 분류 할 수 있는데, 웹 서버에 저장하는 경우와, 클라이언트에 저장하는 경우가 있습니다.

▶ 상태 정보를 클라이언트에 저장하는 방식

  • 뷰 상태(View State)
  • 컨트롤 상태(Control State)
  • 숨겨진 필드(Hidden Field)
  • 쿠키(Cookie)
  • 쿼리 문자열(Query String)

상태 정보를 웹 서버에 저장하는 방식

  • 응용 프로그램 상태(Application State)
  • 세션(Session)
  • 프로필 속성(Profile Property)
  • 데이터베이스(Database)

두가지 방식은 장단점이 존재 하는데요. 일반적으로 데이터가 작고, 중요하지 않은(보안 등의 이유)정보는 클라이언트 측에서 관리하고, 나머지는 웹 서버에서 관리 하는 것이 좋습니다. 여러가지 상태관리 기능 중 Cookie와 Session에 관해 자세히 알아보겠습니다.

 

#3. 쿠키(Cookie)

-Fig3. 맛있는 쿠키-

 

쿠키는 요청 및 응답하는 과정에 포함되는 텍스트 정보이고 쉽게 구현하여 사용 할 수 있는 방법중에 하나입니다. 일반적인 브라우저에서 최대 4KB의 텍스트 정보를 담을 수 있으며 하나의 사이트는 20개만 허용되며, 모든 사이트를 통틀어서 300개로 제한 됩니다. 만약 이 범위를 넘어 더 많이 저장 하려고 할 경우에는 가장 오래된 쿠키부터 삭제되므로 사용의 주의해야하고, 4KB로 비교적 작은 크기만을 저장하기 때문에 적은 양의 데이터나 ID, 최근 읽은 글, 최근 본 상품과 같은 식별자를 저장할 때 사용하는 것이 적합합니다.

 

1. 쿠키의 동작 방식

쿠키는 서버에서 생성하여 클라이언트의 브라우저에서 관리하기 때문에 요청시 쿠키를 생성하고 브라우저를 닫을때 쿠키를 파괴합니다. 응답을 통해 얻어온 쿠키는 만료시간 여부에 따라 클라이언트의 PC에 파일로 저장하게 됩니다.

 

image

-Fig4. 웹 사이트를 처음 요청 할 경우 쿠키 생성 -

 

쿠키의 생성 주기를 살펴보면처음으로 페이지를 요청 할 경우 웹 서버에서는 쿠키를 생성하게 되고, 페이지를 돌려 줄때 HTTP 헤더에 쿠키를 포함하여 돌려 주게 됩니다. 이렇게 넘겨 받은 쿠키는 클라이언트에서 관리 하고 있다가, 다음번 요청때 쿠키를 함께 전송하게 되고, 서버에서는 쿠키 정보를 읽어 이전 상태 정보를 알 수 있게 됩니다. 이때 웹 서버는 Fig5에서 처럼 정보를 변경 할 필요가 있을때 쿠키를 업데이트하여 다시 변경된 쿠키와 함께 응답하게 됩니다.

image -Fig5. 쿠키를 가지고 있을 경우 쿠키 활용-

2. ASP.NET에서 쿠키 사용

쿠키는 서버로 부터 응답받은 사항이기 때문에 HttpResponse 객체를 통해 클라이언트로 전송 됩니다. 쿠키에 정보를 저장하는 방법은 두가지가 있습니다. Page클래스의 Response 객체를 사용하는 것과 HttpCookie 클래스를 사용하는 방법입니다.

//Response 사용 
Response.Cookies["쿠키명1"].Value = "쿠키 예제;
Response.Cookies["쿠키명1"].Expires = DateTime.Now.AddMinutes(30); 

//HttpCookie 클래스 사용 HttpCookie cookie = new HttpCookie("쿠키명2");
cookie.Value = "쿠키 예제";
cookie.Expires = DateTime.Now.AddSeconds(30); 
Response.Cookies.Add(cookie);

-Code1. 쿠키 저장-

쿠키명1과 쿠키명2라는 이름을 사용하는 쿠키를 생성 하였고 각각 Value 속성을 통해 상태유지에 필요한 값을 넣어 주었습니다. Expires 속성은 만료 기간인데, 이 속성을 설정하면 쿠키가 클라이언트의 컴퓨터의 파일의 형태로 저장됩니다.  만료기간을 설정하지 않은 쿠키는 브라우저의 메모리에서 관리됩니다. Code1에서 쿠키명1은 30분후에 쿠키를 지우며, 쿠키명2는 30초 후에 쿠키를 지우도록 설정 하였습니다. 만료시간이 지난 쿠키는 클라이언트가 쿠키를 생성한 웹 사이트에 다시 요청을 보낼때 삭제됩니다.

Posted by 맨날맑음
,