[Spring] 5. 웹 개발 개론

1. Web 이란?

흔히 부르는 WWW(World Wide Web, W3) 은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보공간을 의미한다. 이렇듯, 웹이라는 것은 인터넷을 통해 정보를 교류하는 공간이라고 볼 수 있겠다. 이러한 웹은 용도에 따라 다양하게 나눌 수 있다. 우리가 인터넷에 접속하면 보게되면, 구글, 다음, 네이버, 페이스북 등과 같이 HTML로 구성된 사이트인 웹 사이트(Web Site)도 있고, 웹 서비스 구현을 위해 사용되는 API(Application Programming Interface), 크롬이나 파이어폭스, 인터넷 익스플로러와 같은 UI(User Interface) 등으로 나눠볼 수 있다.

1) 웹의 구성요소

위와 같이 웹을 구성하기 위해서는 다음의 3가지 요소가 반드시 필요하다. 각각의 요소들을 살펴보도록 하자. 자세한 내용은 뒤에서 좀 더 다룰 예정이므로 여기서는 간략하게만 알고 넘어가도록 하자.

① URI (Uniform Resource Identifier)
리소스 식별자라고 부르는 URI 는 특정 사이트나 목록과 같이 다양한 정보에 접근할 수 있는 정보를 의미한다.

② HTTP (Hypertext Transfer Protocol)
우리가 주소를 전달하게 되면, 어떻게 정보를 받을 지에 대한 규약을 정의한 프로토콜 중 하나로, 애플리케이션을 컨트롤을 하기 위한 규약이라고 보면 될 것이다.

③ HTML (Hypertext Markup Language)
Markup 이라고 표현한 만큼 특정 글자의 굵기, 색상 뿐만 아니라, 이미지나 동영상과 같은 미디어에 대해서도 원하는 데로 설정해서 보여줄 수 있는 언어라고 볼 수 있다. HTML은 XML 을 기반으로 한 범용 문서 포맷이며, 이를 사용해 크롬, 인터넷 익스플로러와 같은 UI 에서 사용자가 알아보기 쉬운 형태로 표현한다.

2. REST API

백앤드 개발을 할 때, 주로 사용하게 되는 것 중 하나로, 서비스와 연동을 하거나, 제공을 하는 식으로 많이 사용된다. 들어가기에 앞서, 먼저 REST 에 대해서 살펴보고 REST API 가 무엇인지를 알아보는 순으로 진행하도록 하겠다.

1) REST(Representational State Transfer)

자원의 상태 전달이라고 해서 네트워크의 아키텍쳐이다. 다음으로 나오는 6가지 조건을 모두 만족했을 때, “REST API를 제공한다.” 혹은 “RESTful 하다.” 라는 표현을 쓴다.

[REST API의 충족 조건]

1. 클라이언트와 서버가 서로 독립적으로 분리되어 있어야 한다.
2. 요청에 대해 클라이언트의 상태를 서버에 저장하지 않는다.
3. 캐시를 통해 클라이언트는 서버의 응답을 임시 저장(Cache) 할 수 있어야 한다.
   클라이언트는 Cache 를 통해서 응답을 재사용할 수 있어야 하며, 이를 통해 서버의 부하를 낮춘다.
4. 서버와 클라이언트 사이에 방화벽, 게이트웨이, Proxy 등 다양한 계층형태로 구성이 가능해야하면,
   이를 확장할 수 있어야 한다.
5. 인터페이스의 일관성을 지키고, 아키텍처를 단순화시켜 작은 단위로 분리하여,
   클라이언트, 서버가 독립적으로 개선될 수 있어야 한다.
6. 특정한 기능을 서버로부터 클라이언트가 전달받아 코드를 실행할 수 있어야 한다.
   해당 내용은 선택적인 항목이므로 구성에 따라 지켜도 되고, 안 지켜도 상관은 없다.
   추가적으로 5번의 내용인 인터페이스의 일관성과 관련하여, 아래의 항목들을 잘 지켰는지 확인해볼 수 있다.

[인터페이스 일관성]

1. 자원의 식별
- 웹 기반의 REST 에서 자원에 접속할 때는 반드시 URI를 사용하여 접근해아한다.
  ex. https://foo.co.kr/user/100
    - Resource: user
    - 식별자: 100

2. 메세지를 통한 리소스 조작
- Web 에서 데이터를 전달할 때, 어떤 타입의 데이터인지를 알려주기 위해 HTTP Header 부분에
  Content-Type 을 통해서 데이터의 타입을 지정해줄 수 있다. 또한 리소스 조작을 할 경우에도,
  데이터 전체를 전달하는 것이 아니라, 메세지로 전달한다.

3. 자기 서술적 메세지
- 요청하는 데이터가 어떻게 처리되어져야 하는지 충분한 데이터를 포함할 수 있어야 한다.

4. 애플리케이션 상태에 대한 엔진으로써 하이퍼미디어
- REST API 를 개발할 때, 단순히 Client 요청에 대한 데이터만 응답해주는 것이 아니라,
  관련된 리소스에 대한 Link 정보까지 같이 포함되어져야 한다.

3. URI 설계 패턴

앞서 우리가 REST API를 표현하는 방법 중 “URI 를 활용해서 주소처럼 나타낸다.” 라고 언급했다. 그렇다면, URI란 무엇일까? 도입부에서 간단하게 설명했기에, 다시 설명하자면, 인터넷에서 특정 자원을 나타내는 주소값으로, 해당 값은 유일해야한다.
URI 와 연관되서 많이 햇갈리는 것이 URL(Uniform Resource Locator) 이다. URI 가 특정자원을 나타내는 주소 값이였다면, URL 은 인터넷 상의 자원, 특정 파일이 어디에 있는지 식별하는 주소라고 볼 수 있다. 때문에 URL은 URI의 하위 개념이라고 할 수 있다.

그렇다면 URI를 설계하려면 어떤식으로 하면 될 지 알아보도록하자. 지금부터 언급하는 내용은 어디까지나 원칙이므로, 못지킨다고 하여, 잘못된 주소고, 요청이다라고 판단할 필요는 없다. 관련된 내용은 RFC-3986 이라는 문서에 정리되어 있으니 궁금한 사람은 검색해서 찾아보기 바란다.

[URI 설계원칙]

1. 슬래시 구분자(/) 는 계층관계를 나타내는 데 사용된다.
   ex. https://website.co.kr/classes/java/curriculums/web-master

2. URI 마지막에는 슬래시 구분자를 포함하지 않는다.

3. 하이픈(-) 은 URI의 가동성을 높이는 용도로 사용한다.

4. 언더스코어(_) 는 사용하지 않는다.

6. URI 경로에는 소문자로 작성한다.

7. 파일 확장자는 URI에 포함하지 않는다.

8. 프로그래밍 언어에 의존적인 확장자를 사용하지 않는다.

9. 구현에 의존적인 경로를 사용하지 않는다.

10. 세션 ID를 포함하지 않는다.
    ex. https://website.co.kr/classes/java/curriculums/web-master?session-id=abcd (x)

11. 프로그래밍 언어의 Method 명을 사용하지 않는다.

12. 명사의 경우 복수형을 사용하는 것이 좋다. 컬렉션에 대한 표현은 반드시 복수로 작성한다.

13. 컨트롤러 이름으로 동사나 동사구를 사용한다.
    ex. https://website.co.kr/classes/java/curriculums/web-master/re-order

14. 경로 중 변하는 부분은 유일한 값으로 대체한다.
    ex. https://website.co.kr/lessons/{lesson-id}/user/{user-id}

15. CRUD 기능을 나타내는 것은 URI에 사용하지 않는다.
    ex. https://website.co.kr/classes/java/curriculums/web-master/lessons/2/user/100/READ (x)
    https://website.co.kr/classes/java/curriculums/web-master/lessons/2/user/100/100 (o)

16. URI Query Parameter 디자인
- URI 쿼리 부분으로 컬렉션 결과에 대해 필터링을 할 수 있다.
  ex. https://website.co.kr/classes/java/curriculums/web-master?lessons=2

- URI 쿼리는 컬렉션의 결과를 페이지로 구분하여 나타내는데 사용한다.
  ex. https://website.co.kr/classes/java/curriculums/web-master?lessons=2&page=0

17. API의 경우 서브 도메인으로 일관성 있게 사용해야 한다.
    ex. https://api-website.co.kr/ ...

18. 클라이언트 개발자 포탈 서브 도메인은 일관성 있게 만든다.
    ex. https://dev-website.co.kr/ ...

4. HTTP Protocol

마지막으로 통신방법인 HTTP 에 대해서 알아보자. HTTP(Hypertext Transfer Protocol) 은 RFC 2616에 규정된 Web에서 데이터를 주고 받을 때 사용되는 프로토콜을 의미한다. 이름을 통해 알 수 있듯이. 하이퍼텍스트 전송용 프로토콜로 정의했지만, 실제로는 HTML, JSON, XML, 이미지 등 컴퓨터에서 다룰 수 있는 다양한 형식의 미디어들에 대해서 전송할 수 있다.
특히 HTTP의 경우 TCP를 기반으로 한 REST의 특징으로 모두 구현한 Web 기반의 프로토콜이기 때문에, 아래 그림과 같이 Request - Response 방식으로 클라이언트-서버가 통신을 하게 된다.

위의 그림을 보면 클라이언트가 요청(Request) 를 보내고 서버가 이를 처리하여 응답(Response) 해주기 까지는 대기하는 상태이다. 만약, 수많은 요청을 주고받는 상황이라면, 클라이언트가 최악의 경우, 무한정 대기를 할 수도 있기 때문에 Read Timeout, Connection Timeout 에 대한 것도 구현해줄 필요가 있다.

다음으로 HTTP 요청을 처리하는 8가지의 메소드들에 대해서 알아보도록 하자. 각각의 의미와 특징은 아래 표와 같으며, 해당 내용은 REST를 구현하기 위한 인터페이스이므로 잘 알아둘 필요가 있다.

메소드	의미	CRUD	멱등성	안정성	Path Variable	Query	Parameter	Data Body
GET	리소스 취득	R	o	o	o	o	x
POST	리소스 생성,추가	C	x	x	o	△	o
PUT	리소스 갱신,생성	C, U	o	x	o	△	o
DELETE	리소스 삭제	D	o	x	o	o	x
HEAD	헤더 데이터 취득	-	o	o	-	-	-
OPTIONS	지원하는메소드 취득	-	o	-	-	-	-
TRACE	요청 메세지 반환	-	o	-	-	-	-
CONNECT	프록시 동작의 터널 접속으로 변경	-	x	-	-	-	-

위의 메소드들을 사용해서 서버로 요청을 보냈을 때, 서버가 처리를 한 후, 클라이언트에 응답을 보내면서 HTTP Status Code 를 같이 전달하게 된다. 내용은 아래의 표와 같으며, 각 응답 상태에 대한 코드에 따라 처리가 필요한 경우도 있으므로, 잘 알고 있도록 하자.

응답 상태 코드	의미	설명
1XX	처리중	처리가 계속 되고 있는 상태이며, 클라이언트는 요청을 꼐속하거나 서버의 지시에 따라 재요청한 상태를 의미함
2XX	성공	요청에 대한 응답 성공
3XX	리다이렉트	다른 리소스로 리다이렉트 함을 의미, 해당 코드를 받았을 때는 Response 의 새로운 주소로 다시 요청함
4XX	클라이언트 에러	클라이언트의 요청에 에러가 있는 상태이며, 재전송해도 에러가 해결되지 않음
5XX	서버 에러	서버 처리 중 에러가 발생한 것으로 재전송시 에러가 해결됬을 수도 있음

위의 응답코드와 관련해서 주로 보게되거나 사용되는 코드들에 대한 정보는 다음과 같다.

응답 상태 코드	설명
200	응답 성공
201	응답 성공, 리소스 생성 성공
301	리다이렉트, 리소스가 다른 장소로 변경됨
303	리다이렉트, 클라이언트에서 자동으로 새로운 리소스로 요청 처리됨
400	요청 오류, 파라미터 에러
401	권한 없음(인증 실패)
404	리소스 없음(페이지를 찾을 수 없음)
500	서버 내부 에러(서버 동작 처리 에러)
503	서비스 정지(점검, … 등)