웹 작동 방식(프론트 엔드 개발자용)
3271 단어 webdevbeginnerscodenewbie
소크라테스가 말했듯이
we don't know what we don't know . 우리는 Google에 대해 알지 못하며, 우리가 알아야 할 중요한 사항에 노출되지 않습니다!다음은 웹 개발 관점에서 인터넷이 어떻게 작동하는지 설명하려는 시도입니다.
시작하자.
인터넷의 모든 것은 클라이언트 또는 서버입니다. 클라이언트가 요청하고 서버가 응답합니다. 간단히 말해, 귀하의 컴퓨터는 귀하의 브라우저를 사용하여 서버에서 일부 리소스를 요청하고 서버가 응답합니다. 그리고 서버는 인터넷에 연결된 또 다른 기계입니다. 그것이 전반적으로 일어나는 일입니다.
따라서 여기에서 클라이언트는 Chrome, Firefox, Edge와 같은 모든 브라우저를 사용하는 휴대폰이나 노트북 등 무엇이든 될 수 있습니다.
그리고 서버는 액세스하려는 웹사이트, 웹 서비스 또는 앱입니다.
조금 더 깊이 들어가 봅시다.
인터넷의 모든 컴퓨터에는 IP 주소가 있습니다. 인터넷에 연결된 모든 것에 액세스하는 데 사용할 수 있는 IP 주소. 사실 노트북에도 IP 주소가 있습니다. 그러나 서버는 일부 리소스를 제공할 수 있는 특별한 종류의 기계입니다. 따라서 클라이언트로서 브라우저에 웹사이트(예: www.google.com)를 입력할 때마다 도메인 이름 서버(DNS) 조회로 이동됩니다. DNS는 도메인 이름(예: google.com)을 IP 주소에 매핑하는 테이블과 같습니다.
www.google.com을(를) 방문하면 Google 서버에 요청을 보내는 것입니다.
그 대가로 Google 서버에서 응답을 제공합니다. 응답은 일반적으로 Content-Type으로 구성됩니다. 이 속성은 브라우저가 서버가 응답한 콘텐츠 유형을 평가하는 데 도움이 됩니다. 이제 google.com을 방문하면 브라우저가 콘텐츠 유형(
text/html)으로 인식하는 HTML 웹페이지로 응답할 수 있으며 이제 처리할 작업이 표시됩니다. 응답을 HTML 파일로 구문 분석합니다.응답으로 다음 HTML을 받았다고 가정합니다.
<html>
<head>
<link href="/styles/main.css" />
</head>
<body>
:
:
<script src="/javascript/app.js" />
</body>
</html>
여기에서 브라우저가
<link> 태그를 발견하면 '아, 이 웹 페이지에 이 자산이 필요합니다. 이것을 서버에 요청하자.' 이때 브라우저는 main.css 파일을 요청하고 서버는 Content-Type이 text/css 인 파일을 전송합니다. <script> 태그도 마찬가지입니다.예를 보자:
이것은
content-type : image/gif라고 말합니다. 따라서 브라우저는 이 특정 자산이 이미지라는 것을 알고 그에 따라 웹 페이지에 표시됩니다.모든 웹 페이지에서 요소를 검사하고 네트워크 탭으로 이동하여 반환된 자산을 클릭할 수 있습니다. 해당 요청 및 응답이 표시됩니다!
주의할 수 있는 다른 요청 및 응답은 다음과 같습니다.
method : HTTP 메소드를 사용하면 클라이언트가 자산 또는 자원에 대해 수행할 작업을 지정할 수 있습니다.
cookies : 쿠키는 유용한 정보를 기억하거나 검색 활동을 기록하기 위해 로컬 시스템에 저장되는 작은 데이터 조각입니다.
status code : 클라이언트의 요청에 대한 응답으로 서버에서 발행한 코드입니다.
자! 이제 당신은 당신이 모르는 것을 알고 있습니다. 결국 저는 웹이 어떻게 작동하는지 아는 것이 단기적으로는 웹사이트를 작성하는 데 도움이 되지 않지만 뒤에서 무슨 일이 일어나고 있는지 알기 때문에 장기적으로 도움이 된다고 말하고 싶습니다.
내가 뭐 놓친 거 없니? 나는 피드백을 좋아할 것입니다.
종료합니다!
Reference
이 문제에 관하여(웹 작동 방식(프론트 엔드 개발자용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anonyda/how-the-web-works-for-front-end-devs-2g6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
