728x90 SMALL 드림핵 공부/Web Hacking4 Background - Web(1st stage) : Browser DevTools 브라우저를 열고, F12 버튼을 누르면, 개발자 도구 창이 브라우저에서 나타남. 빨간색 : 요소 검사(inspect) 및 디바이스 툴바(Device Toolbar) 주황색 : 기능을 선택하는 패널. Elements: 페이지를 구성하는 HTML 검사 Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음 Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음 Network: 서버와 오가는 데이터를 확인할 수 있음 Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음 노란색 : 현재 페이지에서 발생한 에러 및 경고 메시지 녹색 : 개발자 도구 설정 #출처 : 드림핵 2024. 1. 23. Background - Web(1st stage) : Web Browser 웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나. 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지 전혀 알지 못함. 아래는 이용자가 주소창에 dreamhack.io를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작을 나열한 것. 웹 브라우저의 주소창에 입력된 주소를 해석 (URL 분석) dreamhack.io에 해당하는 주소 탐색 (DNS 요청) HTTP를 통해 dreamhack.io에 요청 dreamhack.io의 HTTP 응답 수신 리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript) URL은 Uniform Resource Locator의 약자로, 웹에 있.. 2024. 1. 23. Background - Web(1st stage) : HTTP/HTTPS 웹 서버에 있는 리소스를 클라이언트가 받아 보려면, 클라이언트는 웹에게 특정 리소스를 지정하여 제공해달라고 요청해야 함. 그러면 서버가 해당 요청을 이해하고, 대응되는 동작을 통해 클라이언트에게 리소스를 반환함. 여기서 클라이언트의 행위를 요청, 서버의 행위를 응답이라고 함. *프로토콜(Protocol)은 규격화된 상호작용에 적용되는 약속을 말함. 컴퓨터와 통신할 때는 비교적 엄격한 프로트콜을 사용함. 왜냐하면 컴퓨터가 해석의 융통성을 발휘하게 하는 것은 매우 어렵고, 이 과정에서 오히려 통신 오류가 발생할 가능성을 높일 수 있기 때문. 우리는 그 중 HTTP에 대해 알아볼 것임. HTTP(Hyper Text Transfer Protocol)란 서버와 클라이언트의 데이터 교환을 요청(Request)과 응.. 2024. 1. 23. Background - Web(1st stage) : Web의 기본 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스 여기서 정보를 제공하는 주체를 웹 서버(Web Server), 정보를 받는 이용자를 웹 클라이언트(Web Client)라고 함. 이용자의 요청을 받는 부분 : 프론트엔드(Front-end) 요청을 처리하는 부분 : 백엔드(Back-end) *프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스(Web Resource)으로 구성됨. 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있음. 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 관련 언어로 적혀있음. 웹에 갖춰진 정보 자산. 웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를 입력하면 .. 2024. 1. 23. 이전 1 다음 728x90 LIST
