프론트엔드가 개발하는데에 있어서 도움이될만한 기능들
💝 개발자 도구는 각각의 해당 브라우저 회사에서 만드는 것..(크롬,사파리,파이어폭스 등)
💝 개발자들이 크롬을 많이 쓰는 이유:당연히 편리하기 때문에!
(맥 기준: 커맨드+옵션+i)
가장 많이 쓰는 탭:엘리먼트,콘솔,네트워크,어플리케이션
Elements 패널
💝 페이지와 스타일 검사 및 편집
💝 스타일 수정
html코드를 분석하고 수정할 수 있는 도구 패널이다. dom과 css를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다.
궁금증 1.*도 있고.. 순서가 왜 나뉘어 있을까?
- Styles창을 사용하면 가능한 가장 많은 방법으로 css를 로컬에서 변경할 수 있다. style창에서는 선택한 요소에 css규칙중 우선순위가 가장 높은 순서대로 나타난다.
궁금증 2.user agent stylesheet는 뭘까?
- user agent stylesheet는 명확하게 레이블이 지정되어 있고 보통 웹 페이지의 css에 의해서 재정비된다.
- cascading(폭포가 되어 떨어지다=Css 우선순위)규칙으로 재정의된 규칙은 취소선 텍스트가 표시된다.
- 회색으로 처리된 항목은 정의되지 않았지만 그 대신 런타임에 계산된 규칙이다.
cascading 및 상속이 어떤식으로 작용하는지 이해하는 것이 스타일 디버깅에 굉장히 중요하다. cascade는 css선언에 가중치를 부여하는 방식과 관련되어 있다.
inline style의 css는 element.style{}에 나타난다.
user agent style
user agent style은 브라우저에 기본적으로 내장된 css이다. 가끔 우리가 적용한 css 스타일이 원하는대로 적용되지 않을때 user agent style이 적용되었을 가능성이 높다.
이럴경우 보통 html head태그에 선언하지 않았을 가능성이 높다.
그 문제가 아니라면 user agent style이 발생하지 않게 reset.css를 적용하는것도 또 다른 방법이다.
🌟 Tip + _+ ) 🌟
Element 패널에 가서 요소를 클릭해서 style에 100%가 지정된 요소를 찾는 것은 정말로 힘들다.
하지만 style창의 filter에 100%를 입력하면 개발자 도구가 속성값이 100%인 값을 직접 찾아주기 때문에
보다 빠르게 찾을 수 있다.
Console 패널
로그를 확인하고 스크립트 명령어를 입력하는 패널
💝 궁금한 코드가 있으면 vscode새로 켜서 하지말고 콘솔창에서 테스트해봐라!
엔터칠땐 shift+enter -> 그냥 치면 자바스크립트가 실행됨
바로 확인하고 내용 정리하는 습관 들이기!
🌟 Tip + _+ ) 🌟
화면을 새로고침해도 콘솔이 지워지지 않는 방법이 있을까?
console 패널에서 톱니바퀴 모양이 있는 console setting을 클릭하면
세팅 박스가 나오는데 여기서 preserve log를 체크해주면 된다.
Sources
폴더구조, 물리적 파일구조를 볼 수 있다.
가장 많이하는건 자바스크립트 디버깅 작업
클래스네임을 명명하는 방법이나 css,js를 어떻게 쓰는지를 확인할 수 있다.
-> 요즘은 다 난독화, 압축화되어서 확인이 어렵다.
그러나 어떠한 툴을 쓰면 원복할 수 있어서 내용을 알 수 있다. 때문에 프론트엔드엔 중요정보를 넣어선 절대 안된다!
디버거를 걸어서 한줄한줄 넘어갈 수 있다.
Network
첫 페이지를 로딩하는 모든 요청을 보여준다.
가장 중요한 api는 XHR
프론트에서 백한테 api를 호출했을때 나오는 url이다.
제대로 호출해서 응답이 왔는지 다 확인 할 수 있음.
프로젝트 할 때 프론트랑 백중 어디서 문제가 생긴건지 모르겠다 ->
헤더랑 프리뷰확인후에 여쭤본다.
Application
로컬 스토리지는 html5에 추가된 저장소이다. 간단한 키,값을 저장할 수 있다.
웹 스토리지 = 로컬스토리지,세션스토리지 둘 다를 말한다.
로컬 스토리지와 세션 스토리지의 차이점: 영구성. 로컬 스토리지의 데이터는 사용자가 직접 지우지 않는 이상 브라우저에 계속해서 남아있다. 반면, 세션 스토리지의 데이터는 윈도우와 브라우저의 탭을 벗어나면 데이터가 살아짐.
자동 로그인같이 지속적으로 필요한 데이터는 로컬스토리지에 저장을 하고 잠깐 동안 필요한 정보는 세션 스토리지에 저장하면 좋다.
❌ ❌ ❌ 비밀번호같이 중요한 정보는 로컬 스토리지같은 곳에 저장하면 안된다!!
- local storage
우리가 필요한 데이터를 저장하고 있을 것(key에)
유저 정보같은거 많이들 저장함
- session storage
- cookies
로컬 스토리지와 세션 스토리지가 나오기 이전에 사용했던 저장소는 쿠키이다. 쿠키는 만료 기한이 있는 키-값 저장소. 쿠키는 최대 4kb의 용량을 가질 수있다. 이는 로컬스토리지와 세션스토리지에 비하면 굉장히 작은 용량.그리고 문자열만 저장할 수 있다는 제한이 있다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. 많은 보안 웹사이트들은 로그인을 한 후 쿠키를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지 않아도 된다.
💝 나머지는 특정한 비즈니스가 아니면 확인할 일이 별로 없긴 하지만.. 퍼포먼스와 메모리 합쳐서 많이 씀(어떤 사이트에서 퍼포먼스 확인하고 제대로 돌아가는지 확인해야할때)
