한국어
메뉴

웹 기술 기초

HTTP 요청과 응답, 메서드와 상태 코드, 헤더와 캐시 제어, HTTP/2와 HTTP/3, Cookie와 세션, JWT, OAuth와 OpenID Connect, REST API와 URL·JSON, WebSocket과 Webhook, DOM과 CSS, 이벤트 루프, 동일 출처 정책과 CORS, Service Worker, CDN과 압축, Core Web Vitals, 웹 서버와 리버스 프록시, SSR·CSR·SSG를 객관식 문제로 학습합니다.

10문제 연습하기이 분야에서 무작위 10문제 · 약 5분 이 분야 연습하기이 분야의 모든 문제를 무작위 순서로 풀어요 취약 문제최근에 틀린 문제만 다시 풀어요

웹 기술 기초: 핵심 정리

브라우저에서 URL을 열면 HTTP 요청이 서버에 도달하고, 돌아온 HTML이나 CSS, JavaScript를 바탕으로 브라우저가 화면을 조립합니다. 로그인 상태를 유지하는 Cookie, 다른 서비스와 연계하는 API, 표시를 빠르게 하는 캐시나 CDN 등, 웹의 구조는 많은 기술의 조합으로 이루어져 있습니다.

여기서는 HTTP 요청과 응답의 형태, 메서드의 안전성과 멱등성, 상태 코드, 헤더에 의한 캐시 제어, HTTP/1.1·HTTP/2·HTTP/3의 차이를 학습합니다. 이어서 Cookie와 세션, JWT에 의한 상태 관리, OAuth 2.0과 OpenID Connect, REST API와 URL의 구조·퍼센트 인코딩·JSON, WebSocket과 Webhook을 다룹니다. 브라우저 쪽에서는 DOM, CSS의 박스 모델과 명시도, 첫 표시까지의 처리 흐름, JavaScript의 이벤트 루프, 동일 출처 정책과 CORS, Service Worker, 반응형 디자인을, 배포 쪽에서는 브라우저와 CDN의 캐시, 압축과 전송 시간 계산, Core Web Vitals, 이미지 형식, 웹 서버와 애플리케이션 서버, 리버스 프록시, SSR·CSR·SSG를 다룹니다. IT 자격시험의 네트워크나 웹 시스템 분야 학습에도 도움이 됩니다. TCP/IP나 DNS, TLS의 구조는 '네트워크 기초', XSS나 CSRF, SQL 인젝션 등의 공격과 대책은 '정보 보안 기초', 부하 분산이나 이중화 설계는 '시스템 구성과 신뢰성 설계' 분야에서 다룹니다.

웹 기술 기초 전체 문제 (40)
  1. HTTP/1.1 요청의 첫 줄(요청 라인)에 나열되는 요소의 조합으로 올바른 것은?
  2. HTTP 메서드 중 '안전'(서버상의 리소스 상태를 바꾸는 것을 의도하지 않음)하지는 않지만 '멱등'(같은 요청을 몇 번 보내도 한 번 보냈을 때와 같은 상태가 됨)한 것은?
  3. HTTP의 상태 코드와 그 의미의 조합으로 올바른 것은?
  4. 회원제 웹사이트에서 로그인한 일반 회원이 관리자에게만 허용된 페이지를 요청했다. 서버는 이용자가 누구인지 확인했지만, 이 페이지에 대한 접근은 허가하지 않는다. 이때 돌려줄 상태 코드로 가장 적절한 것은?
  5. 웹 API가 응답 본문으로 JSON 형식의 데이터를 돌려준다. 본문의 형식을 나타내기 위해 응답에 붙이는 헤더로 일반적으로 사용되는 것은?
  6. 브라우저가 이전에 받은 이미지를, 그때의 응답에 붙어 있던 ETag 값을 If-None-Match 헤더에 넣어 다시 요청했다. 서버의 이미지가 바뀌지 않았을 때 서버의 응답으로 올바른 것은?
  7. HTTP/2와 HTTP/3에 대한 설명으로 올바른 것은?
  8. RTT가 40 ms인 웹 서버에서 HTML 하나와 거기서 참조하는 이미지 4개를 하나씩 차례로 가져온다. TCP 연결 설정에 1왕복, 각 요청과 응답에 1왕복이 걸린다고 하고, 데이터 전송 시간, 서버의 처리 시간, TLS, 연결 종료는 고려하지 않는다. 객체마다 새로운 TCP 연결을 여는 경우와 하나의 TCP 연결을 재사용하는 지속 연결의 경우에 걸리는 시간의 차이는?
  9. HTTP는 무상태(stateless) 프로토콜이다. 이것과, 웹사이트에서 로그인한 상태를 유지하는 일반적인 방법에 대한 설명으로 올바른 것은?
  10. 위의 헤더로 설정된 Cookie에 대한 설명으로 올바른 것은?
  11. 브라우저의 localStorage와 Cookie의 차이로 올바른 것은?
  12. 로드 밸런서 뒤에 애플리케이션 서버 3대를 두고, 요청을 차례로 각 서버에 분배하고 있다(라운드 로빈). 로그인한 이용자의 세션 정보는 로그인을 처리한 서버의 메모리에만 저장하고 있다. 일어나기 쉬운 문제와 대책의 조합으로 적절한 것은?
  13. 서명을 붙인 일반적인 JWT(JSON Web Token)에 대한 설명으로 올바른 것은?
  14. 사진 인화 서비스 앱이 이용자의 허락을 받아, 다른 회사의 사진 보관 서비스에 있는 이용자의 사진을 읽어 온다. OAuth 2.0에서 이용자에게 허락을 구하는 화면을 보여 주고, 이용자가 허락하면 앱에 액세스 토큰을 발급하는 역할은?
  15. OAuth 2.0과 OpenID Connect의 관계에 대한 설명으로 올바른 것은?
  16. REST의 사고방식에 따른 웹 API 설계로 적절한 것은?
  17. 브라우저에서 https://www.example.com:8443/docs/guide.html?lang=ja#install을 열었다. 이 URL 중 서버로 보내는 요청에는 포함되지 않고, 페이지를 읽어 들인 후 브라우저 안에서만 사용되는 부분은?
  18. URL의 쿼리에 일본어 문자 'あ'를 넣기 위해, 이 문자를 UTF-8로 나타낸 바이트열(E3 81 82)을 퍼센트 인코딩으로 나타낸다. 결과로 올바른 것은?
  19. 채팅 앱에서 새 메시지를 서버에서 브라우저로 즉시 전달하고 싶다. WebSocket에 대한 설명으로 올바른 것은?
  20. 온라인 결제 서비스에서 결제가 완료된 것을 가맹점 서버가 즉시 알고 싶어 한다. 결제 서비스가 미리 등록된 가맹점의 URL로 HTTP POST로 통지를 보내는 방식(Webhook)에 대한 설명으로 올바른 것은?
  21. 브라우저에서 사용되는 DOM(Document Object Model)에 대한 설명으로 올바른 것은?
  22. 위의 CSS를 지정한 요소에서, 좌우 보더의 바깥쪽 끝에서 끝까지의 폭은?
  23. 다른 스타일 지정은 없는 것으로 한다. 위의 HTML에서 'Hello'라는 문자의 색은?
  24. 브라우저가 첫 화면을 표시하기까지의 처리(중요 렌더링 경로)에서는 <head> 안에 속성 없이 쓴 <script src="app.js">가 있으면 HTML 파싱이 거기서 멈춘다. 이 요소에 defer 속성을 붙였을 때의 동작으로 올바른 것은?
  25. 위의 JavaScript를 브라우저에서 실행했을 때 콘솔에 표시되는 문자의 순서로 올바른 것은?
  26. 브라우저의 동일 출처 정책에서 https://www.example.com/app/index.html과 같은 출처로 간주되는 URL은?
  27. https://app.example.com 페이지의 JavaScript가 fetch를 사용하여 https://api.example.net/orders로 Content-Type: application/json 본문을 붙인 POST 요청을 보내려 한다. 이때 CORS의 동작으로 올바른 것은?
  28. Service Worker에 대한 설명으로 올바른 것은?
  29. 스마트폰에도 대응하는 반응형 디자인 페이지에서 <head>에 <meta name="viewport" content="width=device-width, initial-scale=1">을 쓰는 주된 목적은?
  30. 이용자마다 내용이 다른 마이페이지의 응답에 Cache-Control: private, max-age=60을 붙였다. 이 지정의 효과로 올바른 것은?
  31. 웹 서버가 응답을 gzip이나 Brotli로 압축하여 보낼 때, 압축에 의한 전송량 절감이 일반적으로 가장 작은 것은?
  32. 1.5 MB의 텍스트 데이터를 gzip으로 3분의 1 크기로 압축하여 보낸다. 대역폭이 10 Mbps, RTT가 100 ms이고, 데이터를 보내기 시작하기 전에 TCP 연결, TLS 핸드셰이크, HTTP 요청에 합쳐서 3왕복이 걸린다고 한다. 1 MB = 10^6바이트로 하고, 압축과 압축 해제 시간, 헤더, TCP의 혼잡 제어에 의한 대기는 무시한다. 데이터를 다 받을 때까지의 시간에 가장 가까운 것은?
  33. 초당 2,000건의 요청을 받는 CDN에서 캐시 히트율이 90%에서 98%로 올라갔다. 히트했을 때의 응답 시간은 20 ms, 히트하지 않았을 때는 오리진 서버에서 가져와 돌려주므로 200 ms가 걸리며, 히트하지 않은 요청만 오리진 서버에 도달한다고 한다. 98%가 된 후 오리진 서버에 도달하는 요청 수와 평균 응답 시간의 조합은?
  34. 웹 페이지의 사용 경험을 나타내는 지표인 Core Web Vitals 중 CLS(Cumulative Layout Shift)가 나타내는 것은?
  35. 웹 페이지에서 사용하는 이미지 형식과 그 일반적인 사용법의 조합으로 적절한 것은?
  36. 3,000바이트의 이미지 데이터를 Base64로 인코딩하여 HTML 안에 삽입한다. 줄 바꿈을 넣지 않을 때, 인코딩한 후의 문자 수는?
  37. 웹 시스템을 웹 서버, 애플리케이션 서버, 데이터베이스 서버의 3계층으로 구성한다. 애플리케이션 서버가 주로 담당하는 처리로 적절한 것은?
  38. 리버스 프록시에 대한 설명으로 올바른 것은?
  39. CGI에서는 웹 서버가 요청을 받을 때마다 프로그램을 새로운 프로세스로 기동하고, 처리가 끝나면 프로세스는 종료된다. FastCGI나 애플리케이션 서버 방식이 CGI에 비해 많은 요청을 효율적으로 처리할 수 있는 주된 이유는?
  40. 웹사이트의 페이지를 만드는 방식 중, 빌드 단계에서 모든 페이지의 HTML 파일을 미리 생성해 두고, 요청에는 그 파일을 그대로 돌려주는 방식은?

컴퓨터 시스템의 다른 분야