본문 바로가기

컴퓨팅

URL 이해

1.쿼리스트링에 대한 이해 

쿼리스트링은 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 또한 널리 사용되는 방법이다.

이 방법은 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법으로 다음과 같은 형식을 취한다.

결론 :  ? 는 주소와 쿼리의 구분 / 메소드함수=파라미터값&메소드함수=파라미터값...  

 

http://hostname[:port]/folder/file?변수1=값1&변수2=값2&변수3=값3


위 형식에서 "?" 뒤의 굵은 이탤릭체로 표현된 부분이 쿼리스트링 이다. URL 주소와 쿼리스트링은 "?"로 구분되며 변수와 값의 쌍(변수=값)으로 구성된다. 만약 여러 쌍의 변수와 값을 전달할 경우 각각의 쌍을 "&"로 구분해주면 된다.

다음 URL을 살펴보자.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong


위 URL은 localhost의 프로그램 "queryStr.jsp"를 실행할 때

두 개의 입력 데이터(no=200058001, name=Hong)를 가지고 실행하라는 의미이다.

 

그러면 JSP 프로그램에서는

쿼리스트링에 주어진 데이터를 request 객체의 getParameter 메소드를 이용하여 쿼리스트링을 처리하면 된다.

다음 프로그램 "queryStr.jsp"에서 주어진 쿼리스트링을 처리하는 방법에 대해 잘 살펴보자.

단, 아래 URL을 주소창에 입력하여 이어 나오는 프로그램으로 넘어갔다고 생각한다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong



위 쿼리를 넘겨받은 서버 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
    당신의 학번은 <b><%= request.getParameter("no") %></b> 입니다. <br />
    당신의 이름은 <b><%= request.getParameter("name") %></b> 입니다. <br />
</body>
</html>

 

queryStr.jsp?no=200058001&name=Hong 실행결과

프로그램 "queryStr.jsp"를 살펴보면 두 번의 request.getParameter 메소드가 사용되고 있다.

 

먼저 첫 번째, 

request.getParameter("no")

: 쿼리스트링의 첫 번째 부분인 "no=200058001"를 처리하기위한 코드로 결과값으로 "200058001"을 저장한다.

 

두번째,

request.getParameter("name")

: 쿼리스트링의 두 번째 부분인 "name=Hong"를 처리하기 위한 코드로 결과값으로

"Hong"을 저장하고 있다.

 

이 예를 통해 알 수 있듯 request.getParameter 메소드의 파라미터는 쿼리스트링을 구성하고 있는

"변수"="값"의 쌍 중 변수의 이름이 된다.

즉, URL 쿼리에 메소드 = 파라미터 값 을 넘겨주는 것이다.

 


만약 주소창에

http://localhost:8080/JSPLecture/queryStr.jsp

만을 입력하여 쿼리스트링 생략한다면

request.getParameter("no"), request.getParameter("name") 모두 값을 읽을 수 없으므로

null이 되어 다음과 같은 결과를 보인다.



그런데 쿼리스트링 중간에 공백이 있으면 어떻게 될까?

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong Gil Dong

 

답 : 공백 부분이 "%20"으로 대치되어 프로그램이 실행되고 있음을 볼 수 있다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong%20Gil%20Dong


: 예전의 브라우저가 쿼리스트링에 주어진 공백문자를 만나면 쿼리스트링의 끝으로 인식했다.

따라서 그 뒤의 문자는 처리하지 않았기 때문에 공백문자를 처리하기 위한 방법으로 "%20" 을 사용한 것이다.

그러므로 "queryStr.jsp" 실행 결과를 살펴보면 request.getParameter("name")에 의해 출력되는 값이 "Hong%20Gil%20Dong"이 아닌 "Hong Gil Dong"으로 올바르게 출력되는 것을 확인할 수 있다. 

"%20" 이외에도 URL에서 공백문자를 처리하기 위한 또 다른 방법은 "+"를 사용하는 방법이다.

"+" 역시 URL에서 사용되면 프로그램 내에서는 공백으로 처리되어 출력된다.

 

그러므로 다음 세 개의 URL은 모두 같은 결과를 출력한다.

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong Gil Dong
http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong+Gil+Dong
http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=Hong%20Gil%20Dong



그러면 "queryStr.jsp"를 실행화면에서

'+'와 공백을 출력하고 싶으면 어떻게 해야될까?

 

"공백" / "+" / "=" 출력?!!

URL에서 이 두 문자를 사용하면 "+"는 화면상에 공백으로 그리고 "="은 쿼리스트링의 "변수=값"의 형식에서 관계를 위해 사용되므로 올바르게 출력되지 않는다.

 

이를 위해서는 "+"과 "="을 위한 두 자리 16진수 문자코드(ASCII 호환)를 "%" 뒤에 써 주면 된다.

앞에서 공백을 위해 사용된 "%20" 역시 공백을 위한 두 자리 16진수 코드를 의미한다.

공백문자와 같이 변경이 필요한 특수 문자들은 다음과 같다.

화면출력 URL문자 또는 코드 화면출력 URL문자 또는 코드
공백 + , %20 % %25
& %26 + %2B
= %3D ? %3F



그러므로 수식 "2 + 3 = 100"을 출력하기 위해서는

<!-- "2+%2B+3+%3D+100" 또는 "2%20%2B%203%20%3D%20100" -->

http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=2+%2B+3+%3D+100
http://localhost:8080/JSPLecture/queryStr.jsp?no=200058001&name=2%20%2B%203%20%3D%20100


위와 같은 쿼리를 넘겨줘야 한다.URL을 프로그램 "queryStr.jsp"에 전달하면 같은 결과를 얻을 수 있다.

출처 :  ysoh.tistory.com/entry/Query-String

 

쿼리스트링(Query String)

쿼리스트링은 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 또한 널리 사용되는 방법이다. 이 방법은 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법으로 다음과 같은 형식

ysoh.tistory.com


2. 도메인의 이해

URL의 단일 페이지를 올바르게 분석하려면 URL의 정확한 이해가 필요합니다.
이번 아티클에서는 URL의 큰 구성중 도메인과 파일디렉토리 및 파일명에 대해서 먼저 알아보고, 다음 아티클에서 나머지 항목들을 설명하고자 합니다.

이미지1. URL의 구성 요소

URL
 > 프로토콜
 > 도메인* (URL 분석하기-1)
       >> 호스트
       >> 도메인명
       >> 상위도메인 
 > 파일 디렉토리 경로와 파일명* (URL 분석하기-1)
 > 파라미터/Query String
 > 플래그먼트/해시태그/앵커

 

도메인

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content 에서,
도메인은 'music.naver.com'이며,
도메인은 상위도메인, 도메인이름, 호스트명으로 이루어져있습니다.

도메인은 네트워크상의 컴퓨터 주소를 의미합니다. 

도메인 전체에는 국가나 기관의 정보, 그리고 도메인이름과 도메인에 속한 호스트 정보가 기입됩니다. 

각 정보는 점(.)으로 구분할 수 있으며, 뒤에서부터 순차적으로 확인할 수 있습니다.
music.naver.com/listen/top100.nhn에서, 도메인은 'music.naver.com'이며, 도메인은 상위도메인, 도메인이름, 호스트명으로 이루어져있습니다.

 

상위 도메인명

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content
'music.naver.com' 도메인에서,
상위도메인명은 'com'으로 볼 수 있습니다.

 

국가 구분의 예: 
  캐나다의 구글 사이트: www.google.ca의 'ca'
  한국의 구글 사이트: www.google.co.kr의 'kr'
  | 위키- 국가 코드 최상위 도메인 : https://goo.gl/gewi2Q
기관 구분의 예:
  영리 목적의 기업인 네이버: www.naver.com의 'com'
  비영리 목적인 삼성재단: www.samsungfoundation.org의 'org'
  | 위키- 일반 최상위 도메인: https://goo.gl/py6N6A

도메인명

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content
'music.naver.com' 도메인에서,
도메인명은 'naver'로 볼 수 있습니다.

인터넷상의 컴퓨터 주소는 숫자로 이루어진 IP 주소로 표현되며,

이 숫자로 이루어진 주소를 알기 쉬운 영문으로 표현한 것이 도메인명입니다

 

호스트명

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content
'music.naver.com' 도메인에서,
호스트명은 'music'으로 볼 수 있습니다.

호스트의 사전적 의미는, 인터넷에 연결된 지역(컴퓨터)의 이름이며 

좀 더 쉽게는 도메인에 속한 컴퓨터 이름, 도메인의 하위 개념으로 이해할 수 있습니다. 

예를 들어 news.naver.com 라는 url에서 도메인이름은 'naver.com'이 되며, 

호스트명은 naver.com라는 도메인에 속한 'news'가 됩니다. 

호스트명은 m.news.naver.com에 붙은 'm.news'와 같이 2개 이상 사용할 수도 있으며, m.news.naver.com은 new.naver.com 하위에 속한 추가 호스트주소를 갖고 있는 다른 url로 해석할 수 있습니다. 

 

 

파일 디렉토리 경로와 파일명

이미지3. URL의 파일경로와 파일명(file path, file name)

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content 의 해당 페이지는,
'music.naver.com' 라는 도메인에 해당하는 웹 서버의
listen라는 폴더에 저장되어 있는 top100.nhn 파일로 제공됩니다.

파일 도메인에 해당하는 웹 서버를 기준으로, 제공하고자 하는 페이지가 속한 폴더명과 파일명이 나타난 경로를 나타냅니다.

 

 

3. 쿼리에 대한 이해 

URL의 단일 페이지를 올바르게 분석하기 위해 URL의 구성과 각 항목의 특징을 알아보고 있습니다. 
도메인과 파일디렉토리 및 파일명을 알아본 이전 아티클에 이어서, 프로토콜과 파라미터, 플래그먼트를 알아보도록 하겠습니다.

이미지1. URL의 구성 요소

URL
 > 프로토콜* (URL 분석하기-2) 
 > 도메인
       >> 호스트
       >> 도
메인명
       >> 상위도메인 
 > 파일 디렉토리 경로와 파일명
 > 파라미터/Query String* (URL 분석하기-2) 
 > 플래그먼트/해시태그/앵커* (URL 분석하기-2) 

 

프로토콜 (Protocol)

이미지2. URL의 프로토콜(protocol)

 

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content 에서,
프로토콜은 'http' 입니다.

컴퓨터 간 정보를 주고 받을 때 통신 방법에 대한 규칙을 표기하는 것입니다.
보통 일반적인 url에서 많이 쓰이는 대표적인 프로토콜은, http와 https 이며 자세한 설명은 다음과 같습니다. 

Http

이미지3. HTTP 프로토콜의 요청과 응답

웹 상에서 정보, 주로 html 문서를 주고 받을 수 있는 프로토콜이며, 일반적인 웹 사이트에서 가장 많이 쓰입니다.  해당 프로토콜을 통해 클라이언트(user의 컴퓨터)와 서버(서비를 제공하는 컴퓨터) 사이에 이루어지는 요청과 응답을 주고 받을 수 있습니다. 


Https

이미지3. HTTPS 프로토콜의 요청과 응답

http의 보안이 강화된 버전으로, 통신에서 주고 받는 요청과 응답 데이터를 일반 텍스트가 아닌 ssl이나 tcl을 통해 암호화 한 세션 데이터로 주고 받습니다. 보안이 필요한 서비스(예로, 로그인이 된 메일 서비스나 은행, 카드 서비스 등)에서 주로 쓰이는 것을 확인할 수 있습니다.


 

파라미터 (Parameter, Query String)

이미지4. URL의 파라미터(prarameter / 쿼리스트링 query string)

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content url은,
'~top100.nhn 페이지를 보여줄때, domain과 duration라는 파라미터의 값을 각각 OVERSEA, 1h로 설정하여 제공한다'
라고 해석할 수 있습니다.

(해당 url로, top 100 페이지의 해외:domain=OVERSEA, 1주간:duration=1h 옵션 콘텐츠를 확인할 수 있습니다)

가변적인 콘텐츠를 처리하기 위한 정보

파라미터는 쿼리 스트링이라고도 하며, 정보에 따라서 페이지의 콘텐츠가 가변적일 수 있을 때 많이 사용 합니다.

검색 결과 페이지로 예를 들면, 페이지는 하나이지만 검색어에 따라 다른 콘텐츠나 레이아웃으로 구성 됩니다. 

페이지 url에서 검색어와 같은 정보를 구분할 수 있도록 url 뒤에 파라미터라는 매개 변수를 추가하여 검색어 정보를 url에 함께 전달합니다. 

 

파라미터는 url 의 파일명 뒤 물음표 이후에 나열이 되며, 이름과 값으로 구성된 세트가 1개 이상 존재할 수 있습니다. 이 세트는 엔드(&) 기호로 구분됩니다.

 

URL을 구분하기 위한 정보

한 페이지의 가변적인 콘텐츠를 구분 하긴 위한 정보 외에도, 한 페이지 url를 상황에 따라 구분하기 위한 용도의 추가 정보로 파라미터를 사용할 수도 있습니다. 

한 페이지로 이동하는 url을 여러 매체를 통해 홍보를 하고, 추후에 url에 유입된 사용자가 홍보를 통해 들어온 사용자인지, 홍보를 통해 들어온 사용자라면 어떤 매체를 통해 들어왔는지 확인해야 하는 상황을 예시로 들어보겠습니다. url의 유입 경로를 통해 이전 페이지의 주소는 알 수 있겠지만, 홍보를 통해 들어온 url이라는 정보는 100% 정확하지 않습니다. 

네이버 검색 결과의 광고 서비스로 예를 들자면, 이전 페이지가 같은 검색 결과 페이지일지라도 홍보를 진행한 상단의 파워링크 영역에서 유입 된 사용자와 하단의 일반 검색 결과에서 유입 된 사용자를 단순히 이전 url만으로는 구분할 수 없습니다. 따라서 이와 같은 구분이 필요한 상황에서 url을 배포할 때 정보를 구분할 수 있는 파라미터값을 각각 추가하고(ex: 파워링크 영역의 링크에는 '...?t=pl'와 같은 파라미터를 추가) 나중에 url에 접근되는 사용자의 파라미터 값을 분석한다면 홍보자가 의도한 바에 맞춰 세밀한 기준으로 사용자를 구분할 수 있을 것입니다. 

파일 디렉토리 및 파일명 역할을 하기 위한 정보

파라미터는 동일한 페이지의 일부 정보를 구분하기 위한 용도 외에도, 파일디렉토리 및 파일이름과 유사한 역할로도 쓰이는 경우가 있을 수 있습니다.

예시) 미디어오늘 
미디어오늘의 메인 사이트: http://www.mediatoday.co.kr/?mod=main&act=index 
미디어오늘의 회사소개 사이트: http://www.mediatoday.co.kr/?mod=company&act=introduce

 

플래그먼트(Fragment, Hashtag, Anchor)

이미지5. URL의 플래그먼트 (Fragment, 해시태그 Hashtag, 앵커 Ancher)

http://music.naver.com/listen/top100.nhn?domain=OVERSEA&duration=1h#content 는,
해당 페이지에서 content 영역을 지시하는 페이지입니다.

(해당 url로 content 영역으로 스크롤된 페이지를 바로 확인할 수 있습니다)

플래그먼트로 페이지의 특정 요소를 지시할 수 있습니다. 콘텐츠를 이루는 요소 html 태그는 id라는 고유한 속성값을 가질 수 있습니다. url 뒤에 해시태그를 붙인 요소의 id를 붙여서 확인하면, 해당 url 페이지에서 해시태그로 지시한 id 요소를 스크롤 이동 없이 확인할 수 있습니다. 이러한 기능은, 여러 콘텐츠가 나열 된 페이지의 특정 위치 정보를 사용자에게 함께 전달하고자 할 때 유용하게 쓰일 수 있습니다. 

예시1) https://www.w3.org/TR/WCAG20/#operable 
          WCAG2.0이라는 긴 가이드 문서 중, operable 항목을 지시하고 싶을 때 사용된 경우입니다. 
예시2) http://www.kinoz.com/#portfolio 
          한 개의 긴 페이지에 여러 메뉴의 콘텐츠가 구성된 사이트에서, portfolio 메뉴에 해당하는 영역으로 이동시키고자 할 때 사용된 경우입니다. 

이 밖에도, 플래그먼트 또한 해시 라우터로써 파일 디렉토리 및 파일이름과 유사한 역할로 쓰이는 경우가 있을 수 있습니다. 

 

출처 : m.blog.naver.com/beusable/220864664334

 

URL 분석하기 -2

URL의 단일 페이지를 올바르게 분석하기 위해 URL의 구성과 각 항목의 특징을 알아보고 있습니다. 도...

blog.naver.com

 

'컴퓨팅' 카테고리의 다른 글

pandas_데이터 탐색을 위해 사용할 수 있는 함수들  (0) 2021.01.15
HTML 입문  (0) 2020.12.24
BeautifulSoup 정의 / find vs select  (0) 2020.12.23
Python_jupyter 줄바꿈  (0) 2020.12.23
HTML 과 XML의 차이  (0) 2020.12.23