개발자 도구에 대하여

AeRi Lee·2020년 2월 4일

개발자도구

개발자 도구에 대하여

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

회사에서 원하는 것 마다 다른데..
ex. 은행에서는 페이지를 나가면 로그아웃(보안때문에) 예스24는 로그아웃을 하지 않아도 계속 로그인 정보가 들어있고 로그인 되어있는 것

local storage는 개인 유저의 local storage에 정보를 저장되게 하면 내가 지우지 않는 이상 계속 유지되고 자동로그인을 사용할 수 있다.

session storage는 1회성이다. 1회성 로그인을 생각하면 된다. 도메인마다 세션이 저장이 되서 그 탭을 끄면 데이터가 사라진다.

로컬스토리지와 세션스토리지를 웹 스토리지라고 부른다.

로컬, 세션은 클라이언트랑 하는거니까 어떤 정보를 어느 저장소에 저장해야 하나 잘 살펴야 한다.

쿠키는 서버랑 연관되어있다. 들어가자마자 팝업창이 뜨는 페이지에서 사용자가 '오늘 하루동안 뜨지 않기' 또는 '일주일 동안 뜨지 않기'를 눌렀을 때 cookie에 저장된다. 마감기한을 저장할 수 있달까?

application에 local storage칸도 있고 console 창에서 접근할 수도 있다.
getItem이나 localStorage.setItem 으로 세팅하거나 불러올 수 있다.
지우고 싶을 떄는 removeItem!
clear는 그 안에 있는 정보들을 다 clear하겠다는 의미
언제까지 저장할 수 있는가. 그런 것도 설정할 수 있다.

2.마켓컬리 카테고리 정보 가져오는 api를 찾고, Api 주소, 엔드포인트
응답이 어떻게 왔는지 파일로 제출하기
Method는 무엇인지
Content-type은 무엇인지

맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법

우선, 사파리 열고 원하는 사이트 들어가서 사파리 환경 프로그램 보급탭 메뉴막대에서 개발자용 메뉴 보기 체크 하고나서 봐야 한다.

Mac OS X에서 iOS에서 Safari를 동일한 방식으로 디버깅 할 수 있다. 이렇게하려면 Safari 웹 브라우저 디버그 캡처를 실제로 실행하고 분석하기 위해 Mac 컴퓨터가 필요하다.
1. iPhone 또는 iPad를 Mac에 연결

설정 -> Safari -> 고급 -> 웹 속성 에서 사용으로 설정

Safari에서 iPhone 또는 iPad의 웹 사이트로 이동. 그대로 페이지를 열어 두자
Mac에서 Safari를 연다. iPhone 또는 iPad가 여전히 컴퓨터에 연결되어 있는 동안 개발 메뉴로 이동하여 iPhone 또는 iPad 를 찾은 다음, 디버깅 할 웹 사이트 페이지를 선택

요소, 네트워크, 리소스, 타임 라인, 디버거, 스토리지 및 콘솔 (elements, network, resources, timelines, debuggers, storage, console) 매개 변수를 포함한 디버그 정보를 사용하여 iPhone 또는 iPad Safari 웹 페이지를 전체 개발자 모드로 사용할 수 있다.
Mac에서 웹 페이지 새로 고침을 제어 할 수도 있다!

ie와 사파리의 application tab과 같은것
사파리에서 반응형 보는 법

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

우선순위대로 되어있다.
id >>>class >>>tag
우선순위가 정해져 있는 만큼 id 에 준 설정 값떄문에 class에 줬던 설정값이 무산될 수도 있다. 이 때 개발자 도구의 Style칸에서 보면 밑줄로 그어져 있는 것이 설정값 우선순위를 빼앗긴 값이다.

reset.css
Normalize.css

를 이용할 수 있다.
찾아볼 것.

user agent sheet이란

브라우저에서 부여한 default값. 즉 기본값이다.

hover했을때 css적용법

개발자 도구에서 :hov를 눌러서 hover를 누르고 background 컬러를 변경한다던가 할 수 있다.

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

개발자 도구에서 맥일 경우 커맨드F

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

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

setInterval(location.reload(), 3000);
var clockTarget = document.getElementById("clock");
function clock() {
var date = new Date();
// 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다.
var hours = date.getHours();
// 시간을 받아오고
var minutes = date.getMinutes();
// 분도 받아옵니다.
var seconds = date.getSeconds();
// 초까지 받아온후
clockTarget.innerText = ${hours < 10 ? 0 ${hours}` : hours}:$ {
minutes < 10 ? 0${minutes} : minutes
}: ${seconds < 10 ? `0$ {seconds} : seconds};
// 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다.
}
function init() {
clock();
// 최초에 함수를 한번 실행시켜주고
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초
}
init();
let i = 1;
/
3초에 한번씩 페이지 강제 리로드 되게 하세요
현재시간을 콘솔에 나타나게 하세요.
그리고 리프레시를 해도 콘솔이 지워지지 않고 남게 하시오
console.log err warn dir차이
콘솔에서 warn은 빼고 콘솔보는법
모든탭에서 콘솔창같이 보는법
/