웹(web) 개발

✅ 1. 웹 브라우저 원리 : 서버/클라이언트/웹의 동작 개념

1) “뉴스” 부분에 마우스 오른쪽 클릭을 눌러 검사 탭을 열어준다.

2) 오른쪽에 뜨는 것은 개발자 도구, 개발자 도구에서 “뉴스” 라고 쓰여있는 부분을 더블클릭하고 “웹개발”이라고 바꿔쓰고 엔터

3) “뉴스”가 웹개발로 바뀐것을 볼 수 있다.

✅ 2. 웹의 동작 개념 : 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 것

1) 브라우저는 그려주는 역할

• 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 “받아서” 브라우저에서 볼 수 있도록 “그려주는” 역할을 수행한다!
• 즉, 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일만 수행한다.

2) 요청은 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것, 평소에 웹을 쓰는 동안에 몇 번이고 요청을 보낸다. (바로 “주소 창에 주소를 입력하고 엔터를 입력하는 것”)

• 예) https://naver.com/
  • “naver.com”이라는 이름의 서버에 있는 “/”라는 주소 창구에 요청을 보낸 것!
  • 네이버에서 그 응답으로 네이버 홈페이지의 메인화면을 HTML 파일로 보여준다.

우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일을 돌려주고 브라우저는 받은 것을 화면에 그려준다.

개발자 도구에서 보인 HTML 파일의 코드도 결국 데이터 이렇게 데이터만 받아서 갈아끼우는 식으로 작동하게 한다. 실제로 많은 웹서비스에서는 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아끼워 준다.

데이터만 내려오는 것을 JSON 형식이라고 한다.