리액트)스터디2- 개발자 도구 ( 생활코딩,제주코딩베이스캠프-칠리 )

생활코딩 - React class vs. function style coding 시작

 

 

*다음 들을 강의

1. HTML의 모든것, HTML 기초 

2. WEB2-CSS, CSS기본부터 활용까지

3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript

4. 개발자도구

 

 

개발자도구

• Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구
• Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구
• Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. 
• Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구
• Sources: JS 디버깅, 한줄한줄 실행하며 문제 추적
  • 생활코딩: https://opentutorials.org/course/580/2869
  • 참고 코딩알려주는누나 : https://www.youtube.com/watch?v=C4poqiG8ulM 
• Timelline: 웹페이지 성능 추적
• Profiles: JS, css 성능 추적 병목 확인, 메모리 상태 확인 
• Console: alert, 로그, 엘리먼트 검색
  •  -> console.log($('.이름'));   //console.log는 생략가능.
  • <태그이름 .class="이름"> ~~~<태그이름>

getfirebug.com/wiki/index.php/Command_Line_API

 

핸드폰 리모트 디버깅

https://opentutorials.org/course/580/4152

 

디버깅

https://www.youtube.com/watch?v=2f1aMNdhAEg&t=242s

 

---

로컬스토리지 명령어

• 저장하기
  •  localStorage.setItem('나이','10)
• 불러오기
  • localStorage.gtItem('나이')
• 삭제하기
  • localStorage.removeItem()
• 모두 삭제하기
  • localStorage.clear()
• 키/값 쌍의 개수
  • localStorage.length

 

 

영상 속도 조절

(function(){document.querySelector('video').playbackRate = 1.0}())

 

 

 

 

 

 

 

참고

생활코딩, 제주코딩베이스캠프-칠리