[T.I.L]개발자 도구

웹 개발자라면 개발자 도구와 친해져야합니다!🥰 오늘의 글 주제는 '크롬 개발자 도구' 입니다.

1. 개발자 도구 열기

mac : cmd+option+i

2. Elements panel

HTML 파일과 Styles를 볼 수 있는 탭입니다.

Styles

• 개발자 도구를 사용하면 좋은 점 중 하나는 즉각적으로 스타일의 변화를 볼 수 있다는 점입니다.

실습 1)

• '14기'라고 적혀있는 태그를 선택해 element.style 에 color: red라고 작성했습니다.
• 다른 15기, 16기 글씨와 다르게 빨간색으로 변한 것을 바로 볼 수 있습니다.
  

⭐️ Elements Tab > Styles 부분의 순서가 의미하는 것은? ⭐️
= 우선 순위에 따라 속성이 적용됩니다. ex) inline > id > class > tag
= element.style 에 작성할 경우 inline 으로 적용됩니다. (가장 우선순위가 높습니다.)

⭐️ user agent sheet란? ⭐️
= 브라우저의 css default 속성 값입니다.

• 각 브라우저 마다 정해둔 스타일이 다릅니다.
• 그러므로 어느 브라우저에서 봐도 작업한 파일이 동일하게 나오도록 하는 설정을 따로 해야 합니다.
• 초기화를 시키기 위해서 reset.css ,normalize.css 가 파일이 필요합니다.

실습 2) filter 사용하기

• css 속성 중 100% 지정되어 있는 속성을 갖는 요소 찾아봅시다.
  
  - filter 창에 100을 입력하고 html 태그들을 선택하면서 보면 100%으로 적힌 부분을 볼 수 있습니다.
  

3. Console panel

Console 의 다양한 메서드들

• console 객체에는 log 메서드 뿐만이 아니라 다양한 메서드들이 존재합니다.
• console.log()
• console.warn() : 경고 메시지 출력 / 노란색 세모 느낌표 표시
• console.error() : 에러메시지 출력 / 빨간 동그라미 X 표시

  참고로 console.log()를 자주 사용합니다.

실습1 ) 새로고침 해도 콘솔 내용이 지워지지 않게 설정하기

• console Tab - Settings - ✔️Preserve log 체크를 눌러주세요.
  

실습 2) 콘솔에서 warn 내용만 제외하고 보는 방법

• 위에 사진에서 warn를 보이지 않게 설정할 수 있습니다.
• Custom levels에서 Warnings을 체크 해제해 주세요.
  

실습 3) 다른 패널(ex. Elements panel)에서 콘솔 패널 같이 보는 방법

• esc 누르세요.
• 하단에 Console Tab을 볼 수 있습니다.
  

4. Sources panel

1. Application의 폴더 및 파일 구성
2. JS,CSS 파일 편집
3. Debugging
   -연두색 부분,소스코드 줄을 누르면 breakpoint가 생기고 그 부분이 실행되면 코드 실행이 중지 된다.)

🐝 난독화? 압축화? 생각해보기 🐝
이렇게 개발자 도구를 열면 코드(HTML,CSS,JS)를 다 볼 수 있습니다. 그렇기 때문에 배포 하기 전에 난독화,압축화 과정을 통해 private하게 만듭니다.

• 난독화 ,압축화 : 클래스명을 알수 없는 문자로 변환(ex) 의미 없는 숫자와문자의조합)하거나 코드의 공백을 없애 읽기힘들게 하는 과정

5. Network panel

새로고침을 하거나 새로 탭을 켰을 때 움직이는것을 확인할 수 있다. 특정 시간대의 보낸 데이터들이 무엇인지 어떤 상태인지 확인할 수 있다.

실습 ) API 찾기

• Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
  -새로고침을 한 뒤 '_categories' 부분을 찾아보자
  헤더를 눌러서 url 을 복사해서 볼 수 있고 더블클릭을 해서도 볼 수 있다.

실습 ) Media tab 활용하여 동영상 url 가져오기

탭에 보면 Media 탭이 있다. 홈페이지에 동영상이 있다면 이 탭에서 파일을 클릭 해서 볼 수 있다.

API ? Endpoint ?

API : 기본 주소 ex) (api.kurly.com/v2)
Endpoint : 기능 단위별 접점 ex) 카테고리가 api 였다면 카테고리 속 야채,냉장식품 등등 더 구체적인path 을 Endpoint

6. Application panel

Local Storage , Session Storage, Cookies 비교하기

• 공통 : key,value 형식으로 저장된다.
• Local Storage : 저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관이 가능합니다. ex) 자동로그인, UI정보(ex) 에어비엔비 )
• Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
  ex) 잠깐 필요한정보 - > 은행 로그인 시스템,비회원 장바구니
• cookies : 만료 기한이 있는 키-값 저장소/ 시간 제한이 설정되어 있는 데이터 저장소. / 저장할 수 있는 양이 작다. (4kb)
  ex) 광고팝업(오늘만 보기, 7일 동안 보지 않기)

실습 1) 로컬스토리지에 저장하고, 값 부르기

1. 추가하기 => setItem(key, value);
   ex) localStorage.setItem(‘myCat’,’Tom’);
2. 접근하기 => getItem(key);
   ex) var cat = localStorage.getItem(‘myCat’);