개발자 도구에 대해서

 

Chrom 개발자 도구란?

HTML, CSS JavaScript와 같은 언어들은 서버로부터 컴파일이 되어져서 실행이되는게 아니라 브라우저에서 실행이되는 언어이다.

브라우저가 해석을 잘하고 있는지 확인하기 위해 크롬 개발자도구와 같은 툴을 사용한다.

크롬 개발자 도구의 단축키는 ctrl + shfit + I 이다.

크롬 개발자 도구에서 element탭, style탭, network탭, Application탭 총 4가지를 많이 사용한다.

 

로컬스토리지, 세션스토리지, 쿠키 차이점

웹 개발을 하다보면 자동 로그인이나, 자동 로그아웃등 세션이나 쿠키같은 임시 저장 기능을 사용해야 할 경우가 많다.

쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재하고, 소멸시간을 지정 할 수 있다.

세션스토리지, 로컬스토리지는 오직 클라이언트 쪽에서만 작동이 되며 용량의 제한이 없다. 소멸시간 또한 없으며 사용자가 직접 지우거나 특정 조건이 만족 된다면 소멸 된다. 이 둘의 차이는 소멸시점에 있다.

바로 영구적이냐 영구적이지 않냐의 차이 이다.

즉, 쿠키는 시간이 정해진 데이터이고, 로컬스토리지는 영구적인 데이터이고, 세션스토리지는 일회성 데이터라고 생각하면 된다. 

로컬스토리지는 사용자가 지우지 않는이상 영구적으로 남아있지만 세션스토리지는 웹브라우져를 닫는순간 사라지게 됩니다.

사용법은 setItem(), getItem()으로 값을 넣어주고, 불러올 수 있다. 세션스토리지 사용법도 localStorage에서 sessionStorage 바꿔주면 사용법은 같다.

지울때는, removeItem()을 쓰고, 그 안에 정보를 다 지우고 싶다면 clear()를 쓰면 된다.

localStorage.setItem('name', 'taek2'); // 'key'와'value'값 넣음
localStorage.getItem('name') // taek2

 

css부분에서 순서가 의미하는 것

C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이며, 우선 순위가 정해져 있다.

id > class > tag 순이다.

우선 순위가 정해져 있기 때문에, 위에서 class로 지정한 설정 값이 id로 지정한 값으로 설정값이 바뀔 수 있다.

개발자 도구에서 style에서 css 속성에 밑줄이 그어져있다면, 그 속성은 우선 순위를 빼앗긴 것이라 생각하면 된다.

 

User agent sheet이란

브라우저에서 부여한 각 태그 별 defult값 의미한다.

간혹 동일한 css를 적용해도 브라우저마다 각각 다르게 적용되는 것을 볼 수 있다.

이유는 각 브라우저마다 크롬, 사파리, 익스플로등 부여한 default값이 다르기 때문에, reset.css 파일을 만들어 자신이 원하는 값으로 초기화 시킨 후 사용하면 모든 브라우저가 동일한 css로 적용된다. 

 

hover했을때 css적용법

개발자 도구에서  style탭에서 :hov를 눌러서 hover 항목을 체크하고 예를 들어 button:hover에 해당하는 속성에 버튼 색깔을 변경한다던가, 테투리를 변경할 수 있다.  할 수 있다.

 

css 속성값 100% 지정되어 있는 요소들 찾기

개발자 도구에서 

만약, background-color라는 속성을 검색하면 알 수 있다.

 

자바스크립트파일을 만들어서 브라우저에 띄우고

3초에 한번씩 페이지 강제 리로드 되게 하세요.

자바스크립트에서 시간 카운트를 조정해서 실행 시킬수 있는 함수가 존재한다. 그것은 바로 setInterval()이라는 함수이다.

setInterval(() => {
	window.location.reload();
}, 3000);

실행하면, 3초 뒤에 새로고침이 실행된다.

 

현재시간을 콘솔에 나타나게 하세요.

자바스크립트에서는 Date()라는 현재 시각을 보여줄 수 있는 내장 함수가 존재하는데, 반환값 타입은 String 타입이다.

하지만 new Date()를 하면 그 반환값은 Object(객체)가 된다. 그 객체 안에는  getHours(), getMinutes(), getSeconds()등프로퍼티가 생성되어 활용하면 시간을 구할 수 있다.

 

리프레시를 해도 콘솔이 지워지지 않고 남게 하시오.

개발자 도구에서 설정->preserve log 체크박스에 체크하면 된다.

 

console.log err warn dir차이

console.err -> 에러를 표시함.

console.warn -> 경고를 표시함.

console.dir -> 객체 타입으로 모든 정보를 얻을 수 있다.

 

콘솔에서 warn은 빼고 콘솔 보는법

Default levels에서 Warnings 항목을 선택해서 뺄 수 있다.

모든 탭에서 콘솔 창 같이 보는법

esc 버튼을 누르면 개발자 도구에서 큰솔창을 on/off가 가능하다.