LeeWang_31
이왕31
LeeWang_31
전체 방문자
오늘
어제
  • 분류 전체보기 (234)
    • 프로젝트 (2)
      • 사이드 프로젝트 (2)
      • Codestates_pre_project (0)
    • 프론트엔드 (169)
      • Html (19)
      • CSS (18)
      • JavaScript (29)
      • Codestates (76)
      • 코딩노트 (27)
    • 백엔드 (10)
      • node (10)
    • 구르는 돌 🌑 (16)
      • Codestates (11)
      • 생각 (4)
      • 공부 흔적 (1)
    • 정보 (18)
      • 오류노트 (2)
      • 인텔리제이 정보 (9)
      • 깃 정보 (3)
      • 기타 정보 (4)
      • 안드로이드스튜디오 정보 (0)
    • CS (7)
      • 이론공부 (7)
    • App (6)
      • Android (3)
      • Kotlin (3)
    • 컴퓨터 수학 (5)
      • 암호론 (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 웹팩
  • linuix 코드스테이츠
  • ubuntu
  • figjam
  • 코드스테이츠
  • 사용자 친화 웹
  • 생활코딩
  • DP
  • 코딩애플
  • css
  • React
  • 파이어베이스연동
  • 자바스크립트
  • JavaScript
  • html
  • UI/UX
  • 1292
  • linux
  • 알고리즘
  • 사용자친화웹
  • 백준
  • 코플릿
  • 2693
  • 안드로이드스튜디오파이어베이스
  • TODOlist
  • 안드로이드스튜디오범블비
  • 사이드프로젝트
  • 번들링
  • codestate
  • 2609

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
LeeWang_31

이왕31

[HTTP/네트워크] 브라우저의 작동원리
프론트엔드/Codestates

[HTTP/네트워크] 브라우저의 작동원리

2022. 10. 5. 17:34

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🦙URL과 URI


URL은 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.

URL은 scheme, hosts, url-path로 구분할 수 있다.

 

scheme은 통신 방식(프로토콜)을 결정한다.일반적인 웹 브라우저에서는 https를 사용한다.

host는 웹 서버의 이름이나 도메인, ip를 사용하며 주소를 나타낸다.

url-path는 웹 서버 에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타낸다

 

URI는 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함한다.

query는웹서버에 보내지는 추가적인 질문이다. (ex. search)

fragment는 일종의 북마크 기능을 수행하며 URL에 #과 특정 id를 전달하면 해당 요소가 있는 곳을 스크롤이 이동할 수 있다.

 

http://www.google.com:80/search?q=JavaScript

 

🦙IP와 포트


IP는 인터넷상에서 사용하는 주소체계이다.

인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다.

이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 한다.

IPv4로 할당가능한 PC의 양이 늘면서  IPv6(IP version 6)가 나왔다

.

 

PORT

는 로컬 PC의 IP 주소인 127.0.0.1 뒤에 :3000과 같은 숫자가 표현된다.

이 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)를 의미한다.

리액트를 실행했을 때에는 로컬 PC의 IP 주소로 접근하여, 3000번의 통로를 통해 실행 중인 리액트를 확인할 수 있다.

 

🦙도메인과 DNS


도메인은 IP주소를 대신해서 사용하는 주소이다.

 

네트워크 상에 존재하는 모든 PC는 IP주소가 있다.

하지만 모든 IP주소가 도메인 이름을 가지고 있지 않는다.

IP주소는 도메인 이름을 일정 기간 대여를 해야 한다.

 

브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는 해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요하다.

네트워크에는 이것을 위한 서버가 별도로 있는데 이를 DNS(Domain Name System)이라고 한다.

DNS는 호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다.

 

🦙크롬 에러 읽기


 

Error Message Description
"Aw, Snap!" ("앗, 이런!") Chrome 브라우저에서 페이지를 로드하는 데 문제가 발생했습니다.
ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않습니다.
ERR_INTERNET_DISCONNECTED 사용 중인 기기가 인터넷에 연결되지 않았습니다.
ERR_CONNECTION_TIMED_OUT
ERR_TIMED_OUT
페이지에 연결하는 데 시간이 너무 오래 걸립니다. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생할 수 있습니다.
ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소가 어딘가에 발생했습니다.
ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제되었거나, 새로운 네트워크에 연결되었습니다.
ERR_CONNECTION_REFUSED 웹페이지에서 Chrome 브라우저의 연결을 허용하지 않았습니다.
ERR_CACHE_MISS 웹페이지로부터 이전에 입력한 정보를 다시 한번 제출하도록 요청받았습니다.
ERR_EMPTY_RESPONSE 웹페이지에서 데이터를 전혀 전송하지 않았으며, 데이터를 전송할 서버가 다운되었을 수 있습니다.
ERR_SSL_PROTOCOL_ERROR 페이지에서 전송된 데이터를 Chrome 브라우저가 해석하지 못했습니다.
ERR_BAD_SSL_CLIENT_AUTH_CERT 클라이언트 인증서(은행 또는 회사 내부 웹사이트 등)에 오류가 발생하여 웹페이지에 로그인할 수 없습니다.

 

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[HTTP/네트워크] 브라우저의 작동원리 (보이는 곳)  (0) 2022.10.06
[HTTP/네트워크] HTTP  (0) 2022.10.06
[HTTP/네트워크] 웹 애플리케이션 아키텍처  (0) 2022.10.05
[React] Props & React State  (0) 2022.10.04
[React] React SPA/ React Router  (0) 2022.10.04
    '프론트엔드/Codestates' 카테고리의 다른 글
    • [HTTP/네트워크] 브라우저의 작동원리 (보이는 곳)
    • [HTTP/네트워크] HTTP
    • [HTTP/네트워크] 웹 애플리케이션 아키텍처
    • [React] Props & React State
    LeeWang_31
    LeeWang_31
    이왕 할 거면 기분 좋게

    티스토리툴바