[Web] FE - 웹 기초(서버/클라이언트/웹의 동작 개념)

웹 기초

서버/클라이언트/웹의 동작 개념

1. 네이버 웹페이지 해킹해보기

네이버 메인 페이지의 메뉴에서 메일에 마우스를 두고 우 클릭하여 검사를 눌러보면

"메일"이라는 것을 볼 수 있다.

더블 클릭하여 원하는 단어로 바꿀 수 있는데...

네이버 페이지에서 "메일"이 "Mail"로 바뀐 것을 볼 수 있다....!

오 흥미로워...

F5를 누르게 되면 새로고침이 되면서 다시 돌아오는 것을 확인할 수 잇다.

 

 

2. 웹의 동작 개념(HTML을 받는 경우)

우리가 보는 웹페이지는 모두 서버에서 미리 준비해뒀던 것을 "받아서", "그려주는"것이다.

즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일  뿐이다.

 

그래서 우리가 받은 HTML을 아무렇게나 수정 가능하고("메일"을 "Mail"로 바꿔본 과정), 새로고침을 누그면 브라우저가 요청을 새로 보내서 서버가 보내준 원래 버전의 HTML을 새로 띄워준다. 

 

근데, 1)은 어디에 요청을 보내는 것인가????

서버가 만들어 놓은 "API"라는 창구에 정해진대로 요청을 보내는 것이다. 

 

즉, https://naver.com/

=> 이것은 "naver.com"라는 이름의 서버에 있는 "/" 창구에 요청을 보낸 것

3. 웹의 동작 개념(데이터만 받는 경우)

항상 HTML만 내려주냐? 또 그렇지는 않다고 한다.

데이터만 내려줄 때가 훠얼씬 많다고 한다.

 

예를 들어, 

공연 티켓을 예매하고 있는 상황에서 좌석이 차고 없어질 때마다 페이지가 새로고침 되면 안 될거다.

이에 경우 데이터만 받아서 끼우게 된다.

 

데이터만 내려올 경우에는 JSON형식으로 내려온다고 함!

사실 서버 컴퓨터에서 API, Flask 서버(app.py 파일) 구조로 그림 그려져있는게 이해가 안 간다....

이해하고 다시 기록해두기

---

서버가 뭔지 정확하게 알아야한다.

Client: 요청을 하는 입장

Server: 전달해주는 입장

=> 클라이언트도 될 수 있고 서버도 될 수 있기에 상대적인 개념에서 보면 된다. 

(보통 서버가 코드를 클라이언트에게 전달)

더 참고할) https://bo5mi.tistory.com/66