브라우저의 개발자 도구에 대해 알아보겠습니다. 이 글은 javascript.info를 토대로 작성됐습니다.

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.

• 개발자 도구는 브라우저에 제공하는 하나의 도구(tool)입니다.
  (Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)
• 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줍니다.

1. Elements panel

Elements panel의 기능

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

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

Styles 부분의 순서가 의미하는 것은?

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

user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
• Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능

2. Console panel

Console 패널의 기능

• 자바스크립트 코드 즉시 실행
• 디버깅

console 객체

• console은 객체!
• console 객체에는 log 메소드를 포함한 다양한 메소드가 존재합니다.
• 참고) console | MDN

console.log() 실제 활용 예시

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

3. Network panel

Network 패널의 기능

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능 테스트
• 이미지, 영상 등의 소스 (mock data 활용)

내부 살펴보기

• All, XHR, JS, CSS, Img, Media ...
  • XHR(Xml(Extensible Markup Language) Http Request) - 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다. (HTTP 세션 시간에 관련 내용 자세하게 다룰 예정)

4. Application panel

Application 패널의 기능

• 브라우저 저장소
• Local storage, Session Storage, Cookie

Local Storage, Session Storage, Cookie 차이점

• Storage : 브라우저의 저장소
• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

Local Storage 에 특정 데이터를 저장하고 가져오는 방법

• 데이터 저장
  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")
• 데이터 호출
  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie
• 기타 메소드
  • 외에도 removeItem, clear 등등의 공통 메소드 존재

Application 패널 발표!

• Application 패널의 기능은?
  - 브라우저에서 데이터를 저장하는 장소. 특히 로그인에 관련 유저 정보에 대한 정보가 많다. (사용자가 누군지, 어떤 물건을 사고 파는지 등)
  - Local Storage, Session Storage, Cookie 차이점은?
  - 공통 사항 : 스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. 그 전에는 쿠키라는 저장소를 사용했었다. key - value 페어 객체 형태로 데이터가 저장된다.
  - 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
  - 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다.
  - 로컬 스토리지 : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다.
  - 세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다.
  - 쿠키 : 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저이 로그인 정보를 저장하는 등
  - Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
  - 로컬 : 저장하려는 데이터의 성격이 브라우저를 사용하면서 지속적으로 사용해야 하는 종류라면 로컬 데이터 / 자동 로그인 정보
  - local storage란?
  - localStorage의 주요 기능은 다음과 같습니다.
  - 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
  - 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.
  - 오리진(domain/port/protocol)만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있습니다. localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.
  - localStorage의 키와 값은 반드시 문자열이어야 합니다. 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환됩니다. 객체를 쓰려면 JSON이라는 형식을 써야한다.
  - 세션 : 일회성 로그인 / 잠깐 동안 필요한 정보
  - sessionstorage란?
  - sessionStorage 객체는 localStorage에 비해 자주 사용되진 않습니다. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문입니다.
  - sessionStorage는 현재 떠 있는 탭 내에서만 유지됩니다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문입니다.
  페이지를 새로 고침할 때도 살아있는건 마찬가지. 하지만 탭을 닫고 새로 열 때는 사라집니다.
  이렇게 sessionStorage는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있습니다.
  - 쿠키 : 휘발성과 보안
  - 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?
  - 쿠키와 다르게 웹 스토리지 객체는 ^^네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다^^. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
  - 웹 스토리지란?
  - 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
  - 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다.
  - 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?
  쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
  - 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.
  - 쿠키란?
  - 쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다.
  - 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다.
  - 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다.
  - 1. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다.
  - 2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냅니다.
  - 3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별합니다.
  - local storage란?
  - localStorage의 주요 기능은 다음과 같습니다.
  - 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
  - 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.
  - 오리진(domain/port/protocol)만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있습니다. localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.
  - localStorage의 키와 값은 반드시 문자열이어야 합니다. 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환됩니다. 객체를 쓰려면 JSON이라는 형식을 써야한다.
  - sessionstorage란?
  - sessionStorage 객체는 localStorage에 비해 자주 사용되진 않습니다. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문입니다.
  - sessionStorage는 현재 떠 있는 탭 내에서만 유지됩니다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문입니다.
  페이지를 새로 고침할 때도 살아있는건 마찬가지. 하지만 탭을 닫고 새로 열 때는 사라집니다.
  이렇게 sessionStorage는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있습니다.

질문과 느낀점

1. 오리진이란?
   baseurl이라고 생각하면 된다. 도메인 뒤에 붙는 세부적인 것들은
2. 스토리지와 토큰에서 어떻게 보안을 유지하는지? 토큰?
3. 해당 서버에서만 의미를 가지는 데이터. 너무 민감한 정보는 웹 스토리지를 쓰지 않는 것이 원칙.
4. 데이터들이 브라우저의 어떤 공간에 저장되는가?
5. 자동로그인은 어떤 메커니즘으로 되는거?
6. 공부할 거 참 많구나..!