>wecode 05 개발자 도구

0. 9시 50분 위워크 도착

1. 개발자 도구 학습 (오전 세션)

바게트 1팀 - 예병수, 이왕록, 송나은

1. 10:30 - 11:30 사전 학습 - 기본적인 개발자도구 활용법에 대해 개별학습
   -> 개발자도구 Network에 대하여
2. 13:00 - 14:00 팀 별 주제 학습
3. 14:00 ~ 15:00 주제 별 학습공유
4. 14:00 - 15:00 멘토 정리 - 팀 별 학습 후, 멘토 설명 및 정리하는 시간

개발자 도구

웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다.

• 실행하는 방법: 우클릭 -> 검사 / ctrl+shift+i

1) Elements panel

웹 페이지의 구성을 보여주는 것

• 마우스 호버를 통해 선택한 요소의 DOM을 볼 수 있다.
• header부분의 stylesheet를 삭제하여 row한 HTML 구조를 볼 수 있다.
• Styles 부분의 순서가 의미하는 것은?
  -> style CSS에서 꾸며준 것들을 볼 수 있다. 실행 우선순위 순서로 보여진다.
• user agent stylesheet 란?
  -> Reset CSS 기본적으로 적용이 되는 스타일을 리셋시켜서 작성한 코드대로 구현되도록 하는 것.

2) Console panel

브라우저에서 간단한 스크립트 코드를 test를 할 수 있다.
-> console.log() 확인하고 싶은 출력값을 써 디버깅(= 요청이 제대로 이루어지는지 확인)할 때 사용한다.

• 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
  설정에서 preserve log upon navigation
• 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
  -> clear() / Ctrl+l
• 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
  -> Default levels에서 Warnings/Errors 선택
• 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
  -> esc를 누른다.

3) Network panel

실제로 업로드/다운로드 되고 있는지 확인해야 할 경우, 개발자 도구가 열려있는 동안의 네트워크 요청을 기록한다.
-> 네트워크 문제 또는 최적화 기회를 탐지하기 위해 사용한다.

• Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
  -> resource의 유형, 요청을 발생시킨 소스코드, 크기, 로드시간과 같은 속성을 확인할 수 있다.
  -> 속성값은 필터를 이용하여 필요한 속성값만 따로모아 확인할 수 있다.
• status code 200대 통신OK 400대 통신ERR, 백엔드 서버 문제 500번대
• Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
  -> HTML에 직접 입력하지 않고, 백엔드 서버에서 카테고리 정보를 받아와서 자바스크립트로 나타낸다.
  -> XHR 필터에 카테고리 Network에서 API 주소를 얻을 수 있다.
• Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
  -> 네트워크 로그는 요청 순서내로 나열되기 때문에 자동차 영상을 보는 순간 새로 받은 요청을 media 필터에서 확인할 수 있다.

4) Application panel

작은 정보를 저장하는 수단. 보안에 취약하기 때문에 개인정보는 저장하지 않는 것이 좋다.

• Local Storage
  최대 10MB 브라우저에 저장. 삭제를 하지 않으면 계속 저장된다. ex) 자동로그인. 지속적으로 저장이 필요한 정보
• Session Storage
  최대 10MB 브라우저에 저장. 탭을 종료하는 순간 사라진다. ex) 은행로그인. 보안이 필요한 정보
• Cookie
  쿠키를 불러올 때 전부다 불러와서 효율적이지 않는다. 4KB 서버에 저장. 유효기간을 정해줄 수 있다. ex) 7일동안 창을 띄우지 않음. 서비스 약관 동의.
• Local Storage 에 특정 데이터를 저장하고 가져오는 방법
  -> localStorage.setItem

2. JavaScript Q&A by 멘토 장현님 (오후 세션)

[JavaScript Q&A](https://velog.io/@songbetter/Repl.it-JavaScript-QA

RunJS
JS 코드 바로바로 확인할 수 있는 프로그램

Object
배열과 객체에서 자유로워져야 한다. -> 접근하는 방법!!

• 객체는 const로 선언해도 객체 안의 key와 value값은 바꿀 수 있다.
• 동일한 내용을 가지고 있는 객체 2개를 비교하면 False
• obj. vs obj[""]

let / var / const

• 호이스팅과 scope 관련해서 정리하기!
• let보다는 const를 사용하는 습관을 들이자!