'Coin Site Project'

[TIL/Coin Site Project] 2024/01/01

reference: https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0

2024년 1월 1일2min read

reference:

1. https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC#http_%EB%A9%94%EC%84%9C%EB%93%9C_-_delete

2. https://www.youtube.com/playlist?list=PLuHgQVnccGMBd-v_DjNm61EBaDpYZSV1Z

✅ HTTP request methods란?

네 단계를 거쳐야, ``HTTP request methods``에 관해 명확하게 이해할 수 있다.

1. Web? 🟣

Web은 거미줄```이다. 전 세계의 컴퓨터 네트워크가 거미줄처럼 연결된, 대형 정보 저장소를 WWW(World Wide Web)라고 칭한다. 개별 정보(=Web 상의 문서)를 구슬이라고 볼 수 있다. 그런데, 구슬도 꿰어야 보배 아닌가? ```'구슬을 꿰고 있는 실', 달리 말하면 '거미줄'이 무엇이냐```는 질문이 남게 된다.


**2. HyperText? 🟣**

Hyper는 접두사로서 '초과'를 뜻한다. HyperText는 Text를 넘어서버린 '(초)텍스트'이다. Text 본연의 기능을 초과했다는 것이고, 초과는 곳 링크(link)를 의미한다.

셀 수 없이 많은 문서를 관리하는 유용한 방식 중 하나는 바로 '연결'이다. 링크를 포함하는 텍스트를 통해, 다른 웹 페이지로 즉시 이동할 수 있게 되었다. ```거미줄의 기능을 수행하는 것은 HyperText라는 점```을 깨달았다. 그렇다면 ```'이동'이 의미하는 바가 무엇인지 고찰해야``` 할 차례가 되었다.

**3. HyperText Transfer Protocol? 🟣**

![](https://velog.velcdn.com/images/minkwan/post/1c3f9aa0-4528-4608-8961-eed2a1376016/image.png)

문서를 헤집는 우리는 그저 다른 문서로의 이동을 원할 뿐이다. 하지만 이러한 이동은, 내부적으로는 클라이언트와 서버가 주고받는 요청(request)과 응답(response)이다.

웹에 클라이언트와 서버가 얼마나 많을까? 그 많은 요청과 응답이 주먹구구식으로 이루어졌다면, 지금과 같은 웹의 발전은 기대하기 어려웠을지 모르겠다. "우리 최소한 이런 상황에서는 이렇게 행동하자" 하는 규약의 필요성의 대두는 필연적이었을지 모르겠다.

따라서 HyperText Transfer Protocol, 즉 HTTP는 하이퍼텍스트로 문서 간 이동할 때, 기본적으로 지키기로 약속한 요청과 응답에 대한 규약이다.

4. 그리하여, HTTP request methods? 🟣

1. WWW라는 대형 문서 저장소는 거미줄처럼 연결되어 있음 2. 거미줄의 역할을 수행하는 요소는 HyperText임 3. web에서의 이동은, 요청과 응답을 의미함 4. HTTP는 이러한 이동에 대한 규정임 5. 따라서, ``HTTP request methods는 규약에 맞는 요청에 사용되는 method임``

✅ HTTP request methods - GET

GET은 서버에 있는 ``리소스를 조회`하겠다고 요청할 때 사용하는 method이다. `CRUD의 관점에서 보면 R(Read)``에 해당한다.

1. 정적 데이터 조회 과정 🟣

이미지 또는 정적 텍스트와 같은, 정적 데이터를 GET 메서드를 통해 요청하는 방식은 위와 같다.

처음부터 다 이해하려 들지 않는게 학습에 유리하다. GET method를 통해 서버에 요청하면, 서버에서는 요청에 맞는 리소스가 있는지 조회한 뒤, 클라이언트에게 적절한 Response를 반환한다.

2. 동적 데이터 조회 과정 🟣

"정적이구나", "동적이구나" 하고 넘어가기에는 찜찜하다. 참신한 비유를 고민해봤다.

어머니가 오뚜기 칼국수 소면 700g 제품을 사오라고 나(=서버)에게 요청했다고 가정하자. 정적 데이터를 요청한 대로 응답 값을 돌려주면 된다.

그런데 어머니가 마트에 가서 너가 본 시점에서 가장 저렴한 배추를 사오라고 요청했다고 가정하자. 요청(= 쿼리 파라미터 url)만 보면 정적인 것 같지만, 나는 직접 마트에서 가장 저렴한 배추를 찾는 ``동적인 역할`을 수행해야 한다. `조회하고자 하는 대상의 성질에 관한 논의``인 것이다.

'동적'이라는 단어는 움직인다는 것인데, 일반적으로 웹 요청의 움직임에는 ``정렬, 필터, 검색 등의 case``가 있겠다.

3. HTML Form 데이터 조회 과정 🟣

동적 데이터 조회 과정의 일환이다.

내가 만든 웹 문서에 HTML Form 태그가 있는데, 해당 form에서 유저의 이름과 나이를 검색하는 기능이 있다고 보자. form 태그에 지정한 method에 따라 input 태그에 들어있는 값들이 쿼리 스트링으로 서버에 전송된다.

✅ POST로 넘어가기 전에...