개발자 도구 관련!

1

• 로컬스토리지, 세션스토리지, 쿠키 차이점
• 각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?
• 스토리지 접근해서 값 가져오는 법
• 세팅하는 법

2

• Api 주소, 엔드포인트
• 응답이 어떻게 왔는지 파일로 제출하기
• Method는 무엇인지
• Content-type은 무엇인지

3

• ie 에서 브라우저버전 낮춰서 보는 법
• 맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법
• ie와 사파리의 application tab과 같은것
• 사파리에서 반응형 보는 법

4

• css부분에서 순서가 의미하는 것
• user agent sheet이란
• hover했을때 css적용법
• css 속성값 100% 지정되어 있는 요소 들 찾기
• header에 있는 로고 요소 복사해서 footer에 추가 해보기

5

• 3초에 한번씩 페이지 강제 리로드 되게 하세요
• 현재시간을 콘솔에 나타나게 하세요.
• 그리고 리프레시를 해도 콘솔이 지워지지 않고 남게 하시오 : 개발자 도구에서 설정->preserve log
• console.log err warn dir차이 : console 의 메소드들입니다. log 는 말그대로 로그를 남기고, err 는 에러를 표시해주고, warn 은 경고를 표시해주고, dir 은 복잡한 자료형을 표시해줍니다.
• 콘솔에서 warn은 빼고 콘솔보는법 : console 탭의 filter 옆에서 설정 가능
• 모든탭에서 콘솔창같이 보는법 : esc !

탭

• elements - html, css ( 구성 디테일이나 코드 형태 )

• console - javascript 동작창

• source - 웹문서 구동 기본요소

• network - 웹문서의 통신상태 확인 ( 통신값, 성공여부 등 )

• application - 웹문서의 응용기능과 관련된 부분
  -> 캐시나 쿠키, 구성요소들에 대한 전반적인 내용 확인 가능

performance - 시간대별 동작요소에 대한 피드백

memory - ??????

security - 웹문서의 보안상태 표시
웹문서가 구동되는 구간, 통신하는 구간, 출력되는 구간의 보안적인 문제 등

audit - ?????

쿠키, 스토리지와 application 탭

• 로컬스토리지, 세션스토리지, 쿠키 차이점
• 각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?
• 스토리지 접근해서 값 가져오는 법
• 세팅하는 법

api 와 network 탭

• Api 주소, 엔드포인트
• 응답이 어떻게 왔는지 파일로 제출하기
• Method는 무엇인지
• Content-type은 무엇인지

그외 개발자도구들

• ie 에서 브라우저버전 낮춰서 보는 법
• 맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법
• ie와 사파리의 application tab과 같은것
• 사파리에서 반응형 보는 법

개발자도구

• css부분에서 순서가 의미하는 것
• user agent sheet이란
• hover했을때 css적용법
• css 속성값 100% 지정되어 있는 요소들 찾기
• header에 있는 로고 요소 복사해서 footer에 추가 해보기