👩‍💻개발자 도구?

‣내가 만든 결과물을 테스트하고, 확인해볼수있는 도구
‣chrome
‣개발자 도구에 있는 다양한 패널의 종류와 기능을 파악한다.

📌Elements

‣현업 기획자, 디자이너, Frontend 들이 가장 많이 보는 곳
‣진짜 변경이 가능한 건 아니지만, 바로바로 변경 될 수 있는 걸 보여줘서 현업에서 많이 사용한다.
‣HTML, CSS 구조를 알 수 있음

📌console

‣JS를 직접 사용할 수 있는 패널
‣변수를 사용하거나, 함수를 사용할 수 있다.
‣기능들이 잘 동작하고 있는지 확인할 수 있다.
‣Fronrend 개발자가 가장 많이 사용하는 tab

📌Network

‣Fronrend, Backend 개발자가 함께 봐야하는 데이터 tab
‣통신에 관련된 정보들을 볼 수 있는 패널
‣Frontend 에서 Backend 서버에 정보를 요청하는 곳, Backend 와의 통신을 통해 어떤 자료들이 오가는지 알 수 있음

📌Application

‣데이터를 관리를 하거나, 브라우저가 가지고 있는 브라우저의 저장소
‣클라이언트가 가지고 있어야 할 데이터들을 저장하는 곳
‣브라우저가 알아야 할 내용들을 저장한다
‣보안이 취약하여, 보안상 민감하지 않은 정보를 담아야 한다.
‣console에서 JS를 이용하여 정보를 가져올 수 있다.

💻local storage
‣브라우저를 닫아도 내용이 사라지지 않음
‣용량이 가장 크다.

💻session storage
‣브라우저를 닫으면 내용도 없어짐

💻cookies
‣시간을 정할 수 있음
‣용량이 제일 작음