보다 더 생생한 기록

HTTP, SSR/CSR 본문

블록체인

HTTP, SSR/CSR

viviviviviid 2022. 8. 8. 01:37

mdn 공식문서는 무조건 읽어봐야한다.

HTTP?


하이퍼텍스트 전송 프로토콜(HTTP) 은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다른 목적으로도 사용될 수 있습니다. <출처 : mozilla.com>

 

통신규약이라고 보면된다. 요청과 응답은 서로 쌍의 형태이다. 하나가 가면 하나가 오는게 한 쌍이다.

 

HTTP 메소드

우선 CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 를 묶어서 일컫는 말이다. (→ 이걸 HTTP 메소드에 대응 시켜보자)

 

HTTP 메소드 CURD
GET : 데이터를 읽어온다. Read 
POST : 게시하다. 새로운 데이터를 생성해달라 요청 Create
PATCH : 업데이트 (↓ 멱등성의 차이) Update
PUT :  업데이트 ( ↑ 멱등성의 차이) Update
DELETE : 데이터 제거 Delete

 

HTTP의 구조

위의 HTTP의 구조 중 첫번째 줄을 보자.


POST는 생성하는 것을 요청하는 것이고, ' / ' 은 Target URL Path이다. 예를들어 google.com/search면 target paht는 /search이고, 이때 위와 같이 ' / ' 이라고 한다면 google.com이 된다. 그리고 HTTP/1.1은 HTTP의 어느버전을 사용할것인지를 명시해주는 내용이다. POST 우측을 보면 403으로 거절당했고, 밑의 body를 보면 그에 대한 이유가 나와있다. 성공했다면 body에 요청에 대한 응답을 출력한다.

 

여기에 대한 규약과 응답같은 경우는 이전 개발자들이 정해 놓았으며, 이를 API라고 부른다. 

API 예제 (출처 : 코드스테이츠)

POST / => 메인화면 
GET /users => 수강생 목록

그러니 'POST /' 라고 요청하면 => 메인화면을 출력해줄 것이고
'GET /users' 라고 요청하면 => 수강생 목록을 줄 것이다.

 

 

GET은 Read에 대응하고, 원하는 데이터를 요청해야하므로, query(=q)를 이용하여 특정시킨다. 

GET /search?q=minseok

query = minseok이므로 minseok이라는 데이터를 요청하는 것.

 

Flow

브라우저에 google.com을 검색하면 어떻게 브라우저 화면에 띄워지는지 설명하라.

 

1. google.com 을 dns가 ip주소로 바꿔주고 

2. 웹서버 주소에대해 알게 되고

3. 그 컴퓨터에서 특정포트로 접속함 (ex. localhose:3000)

4. 컴퓨터가 응답해주고

5. 브라우저는 응답받은 데이터를 렌더링

화면에 대한 Flow 예시

1. 검색을 위해 글을 쓴다
2. fetch를 이용하여 서버에 비동기적 요청을 보낸다.
3. 서버에서 요청을 보고 원하는 내용을 찾아 보내면 (사진에서는 search?q=hellyeah 라는 요청)
4. 비동기적으로 받은 데이터를 사진의 자동완성 DOM 상에서 띄워준다. 

 

SSR vs CSR

SSR(Server Side Rendering : 서버쪽에서 렌더링) → 화면에 그리는 시간동안 깜빡이는것 처럼보임

(브라우저쪽에서)서버 URI로 GET요청

→(서버쪽에서) 웹페이지 파일을 브라우저로 전송

→(브라우저쪽에서) 화면에 그리기

 

CSR(Client Side Rendering: 클라이언트쪽에서 렌더링) → ex) React

 

(브라우저쪽에서)서버 URI로 GET요청

→ (서버쪽에서) 정적 단일페이지(틀)과 js 파일 전송

→ (브라우저쪽에서) 정적 단일 페이지를 기반으로 동적으로 js 구동이 필요한 경우, 서버에 데이터를 요청해 렌더링

 

<CSR>

</head>
<body>
    <script src="this.js"></script>	// 여기서 js 파일 전송, 그리고 서버에서 js에서 지시한 대로 실행
</body>
</html>


결론 : 둘다 장단점이 존재

 

'블록체인' 카테고리의 다른 글

[코드리뷰] Project 1 - Opensea.io 클론코딩  (1) 2022.10.27
웹 개발  (0) 2022.08.31
React - React로 사고하기  (0) 2022.08.03
React - (심화)  (0) 2022.08.01
React - (1)  (0) 2022.07.31
'블록체인' Related Articles more