개발자 도구 (DevTools)

저번 주에 있었던 개발자 도구 세션을 까먹고 있다가 이제야 정리🧐
급성된 팀끼리 밥도 같이 먹고 각자 공부한 파트를 공유하고 
또 다른 팀으로 나눠서 쉐어하는 환경이 재미있었다.
넘나 좋은 위코드😍

> 개발자 도구 (DevTools)

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
크롬 개발자도구는 구글 크롬 브라우저에 내장된 웹 개발 툴이다.
개발자도구는 우리가 페이지를 빠르게 수정할 수 있게 해주고 문제를 급히 해결할 수 있도록 도와준다 - 우리가 레알 더 나은 웹페이지를 빠르게 제작할 수 있게 말이다.(이상 엉터리 번역)

개발자 도구 실행시키는 법

맥 기준입니다😅

• Open DevTools: cmd + option + i
• Open Elements Panel: cmd + option + c
• Open Console Panel: cmd + option + j

개발자 도구에는 여러 개의 panel(tab)이 존재하는데 한 번 살펴보자
(보자보자 어디보자 너 두고보자 보자보자 넌 다음에 보자 - 머쉬베놈)

Elements Panel

↯↯↯↯↯ Elements panel의 기능 ↯↯↯↯↯

• 웹 페이지를 구성을 볼 수 있다 (DOM)
• 구성 요소의 스타일 속성을 볼 수 있다 (CSS)
• CSS와 UI 등을 수정할 수 있음

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

Styles 부분의 순서는 무슨 의미일까🧐?

• 하나의 요소에 여러개의 css파일에서 스타일 적용이 가능하다.
• 가장 상단부터 css 파일의 우선 순위(구체적 to 추상적)에 따른 순서
• CSS Specificity: inline style > id > class > tag

User Agent Stylesheet이란?

• 브라우저의 기본 스타일 값을 의미한다. 브라우저 마다 스타일 기본 값은 다르다.
• 웹 브라우저마다 기본적으로 설정되어 있는 속성 값은 다르기 때문에 시작단계에서 기본 스타일 값을 모두 초기화 시키고 작업을 시작한다. 그러면 브라우저의 종료에 상관없이 동일한 화면 출력이 가능하다.

Console Panel

↯↯↯↯↯ Console panel의 기능 ↯↯↯↯↯

• 자바스크립트 코드를 즉시 실행할 수 있다.
• 디버깅 가능

console 객체

• console은 객체이다
• console 객체에는 log 메소드를 포함한 다양한 메소드가 존재한다.

console.log() 활용 예시

• 프론트엔드의 경우 디버깅 시 다른 도구를 사용하는 것보다 console.log를 활용하는 경우가 대부분이다.
• 백엔드에서 보내주는 respons도 아래 예시와 같이 console.log를 활용해 확인 가능함
• 그렇기 때문에 백엔드에서 상황을 명확하게 알려주는 respons 메시지와 적절한 status code를 전달하는 것이 중요하다.

Network Panel

↯↯↯↯↯ Network panel의 기능 ↯↯↯↯↯

• HTTP 네트워크 통신 상태 확인
• API 크롤링, 페이지 로딩 성능 테스트가 간으하다.
• 이미지, 영상 등의 소스를 다운 받을 수 있다(요게 완전 신기하고 꿀팁)

내부에는 All, XHR, JS, CSS, Img, Media 등이 있다.

Application Panel

↯↯↯↯↯ Application panel의 기능 ↯↯↯↯↯

• 브라우저 저장소이다.
• Local storage Session Storage, Cookie 확인 가능

Local Storage, Session Storage, Cookie의 차이점

• Storage: 브라우저의 저장소
• Local Storage: 로컬 스토리지의 데이터는 사용자가 의도해서 지우지 않는다면 계속 부라우저에 남아 있는다. 즉, 데이터의 영구성이 보장된다. (key-value 페어의 객체 형태)
• Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거가 된다. (key-value 페어의 객체 형태)
• Cookie: session 쿠키와 persistent쿠키로 나누어진다. 시간 제한 설정이 가능하다. (key-value 페어의 객체 형태, 텍스트 타입 - 문자열만 저장)

Local Storage, Session Storage, Cookie 예시

• Local Storage
  • 지속적으로 필요한 데이터를 저장하기 좋다 (자동 로그인)
  • UI 정보들 (에이어비앤비, 스카이스캐너등 검색하면 그대로 유지)
• Session Storage
  • 잠깐 동안 필요한 정보를 저장하기 좋음
  • 보안이 중요한 정보들 (은행사이트), 특정한 유저 정보, 언어 선택
• Cookie
  • 직접적이지 않은 서비스 데이터
  • 오늘만 실시하는 이벤트 팝업, 서비스 약관 동의 등

하지만 비밀번호와 같은 중요한 정보는 스토리지에 저장하면 위험하다.
스토리지들은 클라이언트 사이드이기 때문에 쉽게 해킹 당할 확률이 있다.