'개발자 도구' 라는게 있다
특히 웹 개발을 하는 경우 크롬 브라우저의 개발자 도구를 열어볼 일이 많다
개발자 도구는
아래와 같이 크롬(브라우저)에서 주소창이 있는 곳 맨 오른쪽에 ⋮ 이런걸 클릭한 후 도구 더보기 - 개발자 도구를 클릭해서 열거나
F12 혹은 Ctrl + Shift + I 를 통해 열어본다
맥의 경우 옵션 커맨드 I 이다
개발자 도구에서도
⋮ 이걸 누르면 개발자 도구 창의 위치를 바꿀 수 있다
HTML, CSS 작업을 할 땐
개발자 도구에서
이걸 누르고 화면 페이지의 어떤 요소에 마우스를 갖다 대면
그 요소에 해당하는 HTML DOM 요소를 추적할 수 있다
HTML DOM 요소를 클릭하면 Styles(스타일)에서 해당 요소의 스타일도 확인할 수 있다
Computed 탭에서도 스타일을 확인할 수 있으며
그룹을 체크해서 스타일의 그룹화된 모습도 확인할 수 있다
위 개발자 도구를 통해 웹 페이지를 구성하는 요소들을 조사하고 스타일 조정할 때 유용하다
이렇게 바꿔보면
이렇게 된다
(화면상으로)
이렇게 스타일을 수정해보면서
화면에서 어떻게 보이는지 확인 가능하다
HTML 코드를 추적하는게 아니고 HTML DOM 요소를 추적하는 것인가?
무슨 차이지 싶어서 챗지피티한테 물어보니까
그렇다고 한다
그리고 개발자 도구의 Console 탭도 많이 쓰는데 자바스크립트 REPL(Read-Eval-Print Loop) 환경을 제공하는 것이 장점이다
콘솔탭에서 작성한 변수, 객체, 함수 등은 해당 브라우저 탭이 열려 있는 동안만 유지되므로
탭을 닫으면 삭제된다
REPL이 세션 기반으로 작동하기 때문이다
그래서 console 탭에서 window를 쳐보면
이렇게 window 객체를 볼 수 있다
window 객체는 브라우저에서 제공하는 전역 객체로
웹 페이지의 전역 스코프를 나타낸다
웹 페이지 내에서 자바스크립트 코드를 통해 사용할 수 있는 가장 상위에 있는 객체로
브라우저 창 자체를 대표한다
라고 챗지피티가 알려줬다
이걸로 브라우저 창 크기 변경하거나 새탭 열거나 타이머 함수 사용, 로컬 스토리지 접근 등 다양한 기능 수행할 수 있다고 한다
프론트엔드 개발을 할 때 참 유용하겠다란 생각이 든다
그리고 Network 탭을 통해 웹 브라우저가 서버와 어떻게 소통하는지 볼 수 있다
웹 페이지를 불러 올 때 서버에 요청하는 자원(HTML, CSS, JavaScript 파일 등)이 어떠한 순서로 브라우저에 전달되는지와 각 파일의 상세 정보를 확인할 수 있다
여기서 웹 사이트가 어떻게 로드되는지 어떤 파일이 로딩 시간에 영향을 주는지 확인할 수 있는 것이다
그리고 Application 탭에서는 웹 사이트가 사용자의 브라우저에 정보를 저장하는 방법을 볼 수 있다
HTTP는 무상태 프로토콜이다
이전 상호작용을 기억하지 못하는 것이다
그래서 사용자가 다시 사이트에 방문했을 때 로그인 상태 등등을 기억하기 위해 '스토리지', '쿠키'를 사용한다
스토리지: 웹 브라우저가 데이터를 저장할 수 있는 공간으로 사이트 주소 별로 구분되며 로컬 스토리지, 세션 스토리지, IndexedDB 등이 포함된다
쿠키: 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로 사이트 재방문 시 서버로 다시 전송되어 사용자가 이전에 사이트에서 뭘 했는지 등을 알 수 있다
개인화된 사용자 경험을 제공하는 핵심 역할을 하는 것이다
참고로
로컬 스토리지와 세션 스토리지 차이도 있는데
로컬 스토리지는 브라우저를 닫아도 사라지지 않는다
세션 스토리지는 브라우저 탭이나 창을 닫으면 사라진다
즉, 브라우저 세션이 지속되는 동안만 데이터를 유지한다
그니까 개발자들은 애플리케이션의 특정 요구 사항에 따라 적절한 유형의 웹 스토리지를 선택해서 사용하면 되는 것이다
앞으로 이렇게 정리하려면 너무 방대하니까
적당히 중요하고 기억해야할 부분만 요약해서 정리해야할 듯 하다
'부트캠프 > 엘리스 트랙' 카테고리의 다른 글
| VS Code 와 Git 설치 (0) | 2024.02.29 |
|---|
