학습 공간 개념 · 판단 · 실험

Frontend Performance Lab

네트워크

주소를 요청하고 응답 받기

브라우저와 서버는 요청과 응답으로 정보를 주고받습니다.

이럴 때 필요해요

화면 로딩이 코드 계산만으로 끝나지 않는 이유를 이해합니다.

어떻게 동작하나요?

브라우저가 공연 주소를 열면 서버에 필요한 문서나 데이터를 요청합니다. 서버가 보낸 결과가 응답입니다. 요청을 보낸 순간 응답이 바로 준비되는 것은 아닙니다.

주소에는 어떤 서버에 어떤 경로를 요청할지가 들어갑니다. 아래 URL 예제는 주소를 나누어 읽기만 하며 실제 네트워크 요청은 보내지 않습니다.

서버가 응답했어도 그 내용이 요청한 성공 데이터라는 뜻은 아닙니다. HTTP 상태와 응답 내용을 확인하는 방법, 연결 실패와 응답 실패의 차이는 다음 원리 노트에서 배웁니다.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.js
const url = new URL("https://example.org/concerts?date=sat");
console.log(url.hostname); // example.org
console.log(url.pathname); // /concerts
console.log(url.searchParams.get("date")); // sat
javascript · 읽기 전용4줄

주소의 서버·경로·조건을 분리해 읽습니다. 네트워크를 호출하지 않습니다.

자주 헷갈리는 포인트

  • 주소를 읽는 코드와 서버에 요청을 보내는 코드를 구분합니다.
  • 응답을 받았다는 사실만으로 업무 처리가 성공했다고 판단하지 않습니다.

내 말로 설명해 보기

이 코드가 실제 공연 목록을 다운로드할까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

설명에 들어갈 핵심

  • 브라우저와 서버는 요청과 응답으로 정보를 주고받습니다.
  • 주소의 서버·경로·조건을 분리해 읽습니다. 네트워크를 호출하지 않습니다.

예시 답변

아닙니다. URL 객체로 문자열 주소를 해석할 뿐입니다. 실제 요청에는 fetch 같은 별도 동작이 필요합니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

함께 읽으면 좋은 개념

공식 참고 자료

← 네트워크