개발자 도구를 알아보자

사파리, 크롬, 파이어폭스 등 다양한 개발자 도구들이 있다.
그 중 대표적인 크롬의 개발자 도구를 살펴보도록 하자.
크롬에서 사용 가능한 목록은 다음과 같다.

• elements panel
• console panel
• network panel
• application panel

Element Panel

먼저 5개의 선행 질문에 답을 해보자

1. Elements 패널의 기능은?
2. 이 페이지의 section 으로 이루어져있나요?
3. Instagram 피드의 가로 길이는?
4. Styles 부분의 순서가 의미하는 것은?
5. user agent stylesheet 란?

정의

• 페이지와 스타일 검사 및 편집이 가능하다
• 셀렉트 엘리먼트 버튼을 통해 특정 html을 조작 가능하다

엘리먼츠 구성 요소들을 확인할 수 있다

엘리먼츠 탭내에 있는 요소들을 직접적 조작할 수도 있다.

css, style 속성 확인이 가능하다.

즉 보여지는 화면의 레이아웃과 디자인, 요소들을 확인할 수 있다.
프론트 개발자라면 친숙해져야 창 중에 하나다.

총 5개로 이뤄져있다.

가로길이를 확인하기 위해선 개발자 선택 도구를 활용하자!

styles부분의 순서가 의미하는 것은?

하나의 요소에 여러개의 css 스타일이 적용 가능하다.
가장 상단부터 css 파일의 우선 순위다.
CSS Specificity 우선순위
(구체적일 수록 상단에 들어간다!)

• inline style > id > class > tag

h1{
	color: red;
}

.class {
	color: blue;
}

#id {
	color: yellow;
}

<h1 style="color : green">hello<h1>

해당 경우 가장 element패널에서 가장 상단에 위치한 css는 인라인이다.

나중에 css 파일을 뜯어보면, 밑줄이 쳐져있는 경우가 있는데,
이는 우선순위에 밀려서 적용이 안될 경우에 생기는 현상이다.

user agent style sheet

크롬이나 창에 이미 적용된 속성들을 뜻한다

• 브라우저마다 정의된 기본 스타일

브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능

콘솔 패널

콘솔창에서 esc를 누르면 바로 이동가능하다
커맨드 k로 클리어 명령어 적용 가능하다.

프로젝트를 진행하거나, 웹페이지를 만들 경우 콘솔 창을 주로 사용하게 될 것

주 사용 목적

로그를 찍어내는 것과
웹브라우저에서 자바스크립트를 실행할 수 있다.

화면을 새로고침해도 콘솔로그를 남기기 위해서는 어떤게 좋을까?
preserve log를 찍어두면 된다.

콘솔에서 원인 또는 에러를 제외하고 볼 수 있는 방법?

네트워크

네트워크 == 통신
내가 보고 있는 통신들을 나타낸다.
사용자가 어떻게 사용하는지 프론트가 볼 수도 있고 협업시도 볼 수 있다.
웹페이지 안에 있는 리소스나 글씨를 서버를 통해 가져올 수 있다.
응답이 잘되고 호출이 잘 됐는지 확인할 수 있게 해준다.

여담이지만 400번대 에러는 프론트
500번대 에러는 백엔드 쪽에 문제가 생겼다는 뜻이다

fetch/XHR

• api를 여기서 확인할 수 있다.
  

• 네트워크 내부 media에서 웹페이지에 로드되는 이미지를 따올 수 있게 된다.

위에 보이는 초록 불은 api를 잘 따온다는 뜻이기도하다.

프론트와 백엔드의 소통창구라고 생각하면 좋다.

어플리케이션 패널

클라이언트딴에 정보에 저장해 서버에 데이터를 보내주는 경우
예를 들어, 오늘 하루 띄우지 않기, 로그인 구현 등

브라우저에 있는 하나의 저장소다.

• 로컬 스토리지
• 세션 스토리지

보안에 취약한 편이기에, 민감한 정보는 이곳에 담지 않는다.
콘솔에서도 접근 가능하다.
이때, 토큰으로 적용해주면, 개인정보를 보호할 수 있다.

어떤 기준으로 로컬, 세션, 쿠키에 넣을까?
정확한 기준은 없다.
조직마다 다른 기준을 두고 있기에,
상황에 맞춰 유연하게 적용하면 된다.