TIL#16 개발자 도구

luneah·2021년 11월 19일
0

Developer

목록 보기
1/16
post-thumbnail

개발자 도구

  • 브라우저에서 제공하는 하나의 도구(tool)
    • Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구 등.
  • 웹 사이트를 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들 수 있도록 도와준다.
  • 개발자 도구에는 여러 개의 Panel(=tab)이 존재한다.
    • Element, console, Sources, Network, Application, Security, Lighthouse

Elements panel

HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널로 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트할 수 있다. 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인할 수 있다.

  • 웹 페이지의 구성 (DOM)
  • 구성 요소의 스타일 속성 (CSS)
  • CSS 수정, UI 수정

user agent stylesheet

브라우저에서 제공하는 기본 스타일을 초기화하는 CSS 파일. (누군가가 작업해 둔 오픈소스) 브라우저마다 기본 설정 속성값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 nomalize.css 파일로 기본 스타일 값을 모두 초기화 시키고 작업을 시작해야 한다.

→ 브라우저의 종류에 상관없이 동일한 화면 출력 가능하다.

✔️ Reset.css : 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것. 초기화 혹은 일반적으로 바꿔주도록 누군가 만들어 놓은 좋은 소스 중에 하나.

✔️ Normalize.css : reset.css와 조금 다른데, 약간의 디자인적인 요소가 가미되어 있다. 요새 reset.css보다 normalize.css를 더 사용한다.

<!doctype html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Reset.css & Normalize.css</title>
      <link rel="stylesheet" href="css/reset.css">      <!--reset.css-->
      <link rel="stylesheet" href="css/normalize.css">  <!--normalize.css-->
      <link rel="stylesheet" href="css/style.css">
  </head>
  ...

Console panel

  • 자바스크립트 코드를 즉시 실행하고 디버깅한다.
  • console 은 객체이다. console 객체에는 log 메소드를 포함한 다양한 메소드가 존재한다. (console.clear();)
  • 백엔드에서 보내주는 response(ex: 에러 메시지, status 코드)도 console.log 를 활용하는 경우가 대부분이다.
    • 백엔드 개발자에게 response 메세지와 적절한 status code를 전달하는 것이 아주 중요하다.

Console 패널의 기능

우리가 어떤 코드들을 수정해보고 테스트 해보고 싶을 때 코드들을 매번 수정하는 번거로움을 덜기 위해 콘솔 패널에서 코드를 수정하고 테스트 해 볼 수 있다.

  • console.clear(); : 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드

    • "Preserve log"를 누른 상태로 console.clear(); 를 하면 기록이 지워지지 않는다. → 아예 실행조차 되지 않는다.
  • 화면을 새로고침해도 console 내용이 지워지지 않고 남게 하는 방법
    → 콘솔창에서 preserve log를 설정하면 된다.

  • 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법
    → 개발자 도구 console의 설정과 filter 사이에 있는 Log level에서 Warnings 와 error 체크하거나 체크를 해제한다. (브라우저 자체 error만 삭제해 주며, 사용자가 입력한 콘솔 기록의 error는 삭제하지 않는다.)

  • 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법
    → Element 패널에서 esc 키를 누르면 콘솔창이 뜬다.

Network panel

Network 패널은 웹페이지를 로드하기 시작했을 때 부터 웹페이지 안에 포함되어있는 이미지, 리소스 등을 Network(서버)를 통해서 각각의 이미지, 리소스를 가져오는데 얼마나 많은 시간이 걸리는지, 어떤 순서로 리소스를 가져오는지, 어떤 요청과 응답이 오고가는지 등, 웹페이지와 서버 사이에서의 데이터의 흐름을 분석하고, 문제 발생 시 해결책을 찾을 수 있는 곳.

Network 패널의 탭 종류와 기능

  • Filmstrip : 이미지 최상단에 위치한 그래프. 타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시되는 곳.

  • Name : 리소스의 이름과 URL

  • Status : 작동 여부를 숫자로 표시하여 오류를 확인 할 수 있는 곳
    ex. 200 : 정상작동 / 304 : Not modified 등

  • Type : 파일의 형식 (.html / .js 등의 형식)을 볼 수 있는 곳.

    타입 형식 중 XHR = API이며, API 란 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것이다.

  • Initiator : 시작지점을 의미

  • Size : 각 리소스들의 파일 사이즈

  • Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답하는 것까지의 걸린 시간

  • Waterfall : 타임라인의 세부 정보를 알려주는 곳. (이미지 참고)

- Queued at <N> ms : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
- Started at <N> ms :  개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
- Queueing : 구문 분석한 시점에서 큐에 넣는데 그게 적재되어 있는 시간
- Stalled : 큐에서 request를 보내는데 그게 정지되어 있는 시간
- Proxy negotiation : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
- Request sent : request를 보내는데 걸리는 시간.
- Waiting (TTFB) : response의 첫번째바이트가 도달하는데까지 기다린 시간 (TTFB : Time To First Byte)
- Content Download : content가 다운로드가 되는데 까지 기다린 시간. 시작 시점은 response 시작 시점, 종료 시점은 response 종료시점이라 생각해도 무방
- Explanation : 이 모든 걸 종료하는데 걸리는 시간
  • DOMContentLoaded : 이미지 최 하단에 위치한 값으로, Waterfall에서 파란색 선으로 표시가 됨. DOM Tree 구조를 그리는데 걸리는 시간을 나타냄.

  • Load : DOMContentLoaded 옆에 위치한 값으로 Waterfall에서 빨간색 선으로 표시가 됨. DOM Tree 구조를 포함, 이미지까지 화면에 로드되는 시간.

사용자가 느끼기에 이 서비스가 빠르냐 안 빠르냐를 판단하는 기준 중에서 가장 기본이 되는게 바로 저 두 지점이기 때문에 프론트엔드 개발자에게는 중요한 지표이다.

Application panel

Local Storage VS Session Storage

로컬 스토리지는 HTML5에 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다. 웹 스토리지는 로컬 스토리지와 세션 스토리지를 둘 다를 말한다.

로컬 스토리지와 세션 스토리지의 차이점은 영구성이다. 로컬 스토리지의 데이터는 사용자가 직접 지우지 않는 이상 브라우저에 계속해서 남아있다. 반면, 세션 스토리지의 데이터는 윈도우나 브라우저의 탭을 벗어나면 데이터가 사라진다.

자동 로그인같이 지속적으로 필요한 데이터는 로컬 스토리지에 저장을 하고 잠깐 동안 필요한 정보는 세션 스토리지에 저장하면 좋다.

로컬 스토리지와 세션 스토리지가 나오기 이전에 사용했던 저장소는 쿠키이다.
쿠키는 만료 기한이 있는 키-값 저장소다.

쿠키는 최대 4kb의 용량을 가질 수 있다. 이는 로컬스토리지와 세션 스토리지에 비하면 굉장히 작은 용량이다. 그리고 문자열만 저장할 수 있다는 제한이 있다.

쿠키는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. 많은 보안 웹사이트들은 로그인을 한 후 쿠키를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지 않아도 된다.

profile
하늘이의 개발 일기

0개의 댓글