✔ 개발자도구란 무엇인가?

• 브라우저에 제공하는 하나의 도구이다
• 웹 사이트를 즉각적으로 수정하고 문제의 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들 수 있도록 도와준다.
• 개발자도구를 사용할 수 있는 방법은 브라우저에서 F12(윈도우) 또는 command+option+i(맥) 키를 눌러 사용할 수 있다.

✔개발자 도구에는 어떤 기능이 있을까?

• 여러가지 패널(tab)이 존재하지만 자주 사용 하는 패널들이 따로있다. 그렇기 때문에 내가 얻고자하는 정보에 맞게 적절한 패널을 찾아 사용하면 된다.

• 자주 사용하는 패널의 종류

  1. Elements panel

  2. Console panel

  3. Network panel

  4. Application panel

✔ Elements panel

• 기능 : 웹 페이지의 구성(DOM)과 스타일속성(CSS)를 확인하여 검사 및 편집 할 수 있다.

• 장점
  - 웹 페이지 전반에 관련 된 모든 코드를 볼 수 있다.
  - DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다.

• 체크사항
  - Styles 부분의 순서의 의미는 우선순위를 말하는 것이며 상단부터(구체적) 하단까지(추상적)에 따른 순서로 간다.
  

  👉 내가 생각해본 순서는?
  Q. 박스의 위치를 조정하고 색을 입히고 싶다고 생각할 때는 어떤 순서로?
  A. (1) 박스를 배치하고자 하는 위치에 대한 속성 ➡ (2) 박스의 색과 관련된 속성 ➡ (3) 박스의 마진값 지정 이정도로 생각해 보았다.
  

  - 스타일을 지정할 때 알아야 할 특징은 inline style > id > class > tag 순서이며, CSS 속성을 지정하다가 웹에 표현이 안될 때 당황하지말고 특성을 다시 한 번 생각해보자.

• user agent stylesheet
  - 웹 브라우저(크롬, 사파리, IE 등)에 따른 기본속성값을 의미한다.
  - user agent stylesheet의 영향으로 브라우저별 속성값이 다르기 때문에 reste.css 또는 normalize.css 파일을 통해 스타일의 기본값을 초기화 시키고 작업을 시작해야함.

👉 user agent stylesheet 예시

<a href = " " > 클릭</a>

a태그는 브라우저에서 파란색이 기본 속성값으로 정해져 있어 이를 클릭하면 보라색으로 바뀌는데 이것이 브라우저의 기본속성값이 적용된 것이라고 보면된다.

✔ Console panel

• 기능
  - 원하는 자바스크립트 코드를 실행시켜볼 수 있고, 이를통해 내가 만든 사이트에서 자바스크립트 코드가 각 단계에서 어떻게 움직이는지 확인할 수 있다.(자바스크립트 코드 즉시 실행 & 디버깅)

• 장점
  - 실시간으로 실행하고 그에 따른 반응을 주기 때문에 올바른 방향성을 잡을 수 있다.

• 체크사항
  - console은 객체이고, 아무 전역 객체에서나 접근할 수 있다.(동작 방식은 브라우저마다 다르지만 표준으로 여기는 기능도 있다.)
  

  👉 그 외 코린이인 내가 알아두면 좋을 것

  ( Q1 ) 콘솔에 기록된 로그를 지울 때 사용하는 메서드는?
  ( A ) clear() console.clear()

  ( Q2 ) 콘솔에서 Warnings, Errors를 제외하고 보는 방법은?
  (A) default levels에서 보고싶은 탭만 선택해서 볼 수 있음

  ( Q3 ) 다른 패널들과 콘솔패널을 같이 보는 방법은?
  ( A ) 콘솔창에서 ESC키를 누르면 콘솔창이 생성됨

✔ Netwrok panel

• 기능
  - 웹 페이지 로드를 할 때 웹페이지를 구성하고 있는 정보(이미지, 미디어, url 등)를 통신을 통해 가져오는 과정들을 쉽게 알 수 있게 해둔 패널

• 장점
  http 네트워크 통신을 확인할 수 있다.(웹 사이트에서 통신하고 있는 모든 목록이 나옴)

- API 크롤링, 페이지 로딩 성능 테스트를 할 수 있다.
- 이미지, 영상 등의 소스를 볼 수 있다.
- 호출된 응답들과 프리뷰를 통해 무슨 항목인지 알 수 있다.

• 체크사항
  - XHR : 브라우저와 서버가 HTTP 통신할 때, 요청(request)이 어떻게 구성되어 서버로 전달 되는지, 서버로부터 요청에 따른 응답(response)결과를 확인할 때 사용. (실제 프론트엔트에서 백엔드로 API를 호출했을 때 나오는 url이 있다.)

👉 그 외 코린이인 내가 알아두면 좋을 것

( 1 ) Filmstrip - 페이지가 로드된 타임라인을 확인할 수 있음

( 2 ) Name - 리소스 이름, url 을 나타내는 것이다.

( 3 ) Status - http 상태를 나타낸다. (나중에 http 내용 작성하면서 알아봄)

( 4 ) Type - 웹 사이트를 이루는 파일들의 형식을 물어보는 것(자바사크립트, 도큐먼트 등)

( 5 ) Initiator - 리소스마다 시작점이 어디인지를 찾을 수 있다.

( 6 ) Waterfall - 타임라인들의 세부정보 (대기정보 -> 요청과 반응 시간 등)

✔ Application panel

• 기능
  - 브라우저의 저장소 기능으로 Local storage, Session Storage, Cookie 등이 있다.

• Cookie & Storage(브라우저의 저장소)의 차이
  

1. Cookie

- 데이터의 유효시간이 있어 일정 시간이 지나면 데이터가 자동으로 삭제된다.
- 프론트와 백엔드 통신과 관련이 있으며, 용량이 작으며, 문자열로만 저장된다.
- 쿠키는 요청마다 사용자를 따라다니면서 얻고싶은 정보를 수집한다.
- "HttpOnly"는 보안을 위해 자바스크립트로 접근을 못하게 해둔것이다.

2. Local Storage

- 사용자가 지우지 않는 이상 계속 브라우저 자체에 데이터가 남아 있고, 영구적으로 저장이 된다.(객체의 형태로 데이터 저장)
- 키 값을 삭제하거나 생성할 수도 있다.
- 브라우저 자체에 저장이 되어 있기 때문에 인터넷 연결 유무와 상관없이 확인이 가능하다.

3. Session Storage

- 윈도우나 브라우저가 종료되면 사라지는 임시데이터로 이 또한 Local Storage 와 같이 객체의 형태로 저장된다.
- 브라우저 자체에 저장이 되어 있기 때문에 인터넷 연결 유무와 상관없이 확인이 가능하다.

• 체크사항
  - 쿠키는 서버와 브라우저가 쿠키를 통해 데이터를 교환하고, 스토리지는 브라우저 자체에서 저장되어 있는 것이다.
  - 이렇기 때문에, 사용자들이 데이터를 다운 받는 시간이 줄어들고 편의성을 느낄 수 있다. (브라우저에 저장할 것들만 저장하고, 서버와 통신하는 것들은 쿠키에 저장해서)

• 간단회고

  개발자도구에 대한 강의를 듣고 몇가지 과제를 진행했다.
  개발자도구 패널들을 내가 잘 알아두면 프로젝트를 진행하거나,현업에서 업무를 할 때 매우 도움이 될 것 같은 기분이 들었다.
  이는 실제로 인스타그램 클론코딩을 하며 개발자도구를 활용했고, html과 css적 부분에서 굉장히 많은 도움을 얻었다.
  이러한 이유 때문에 벨로그를 작성해 개념을 정리하고자 했으며, 작성 전 다시 한 번 강의를 되돌려 보았다.
  처음 들을 때는 다가오지 않았던 내용들이 클론코딩을 하며 겪었던 경험들과 함께 이해가 되기 시작했다.
  하지만 아직도 네트워크패널이나 어플리케이션 패널에 관련해서는 CS지식이 부족해서인지 이해가 어렵다.
  강의를 보고 다시 정리한 내용이지만 내가 아직 이해하지 못 한 개념들이 있어 완벽히 내용을 소화하진 못했다고 생각한다. 시간이 날 때마다 CS관련 지식도 잘 쌓아야겠다. 오늘은 여기까지!🖐