Element panel (엘레멘트 패널)

엘레멘트 패널의 기능,

1.웹페이지의 구성 (DOM) (document object model)
2.구성요소의 스타일 속성(CSS)
3.CSS 수정, UI 수정

기본적인 것 = 브라우져가 구동이 될려면 코드가 필요합니다. 출력된 값을 보고 우리가 어떤 코드들을 수정해보고 테스트 해보고 싶을 떄 코드들을 매번 수정하는 번거로움을 덜기 위해 콘솔에서 코드를 수정하고 테스트 해볼수 있다.
실제로 저장된 코드는 수정되지 않는다.

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

• 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
• 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
• cf) CSS Specificity - 전 TIL 에서 다룬적이 있다.
  inline style > id > class > tag
  위 처럼 순서가 있는데 color가 겹친다거나 그러면 아랫순서는 무시가 된다.

내 질문: 우선 순위 때문에 무시된 코드들은 이렇게 빗금이 쳐져있는데 왜 안지우고 놔두나요? 저거 지워야 더 간결하고 깨끗한 코드가 되지않나요?

멘토님 답: 지금 페이지에선 무시 됬지만 다른 페이지에선 윗순서 코드가 변경되서 아까 무시됬던 코드가 work 할 수 도있다.

user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미. ( Default ) 브라우저 마다 스타일 기본값이 다름.

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

화가가 그림을 그릴 때도 흰 도화지에다가 그림을 그려야 더 자유롭고 풍채로운 그림이 나오듯 규격이 있으면 예술을 하는데에 방해가 된다. frontend = art

콘솔 (Console)

콘솔의 뜻을 먼저 이해하고 가는게 중요하다고 생각하는데 일반적인 의미로는 컴퓨터 -> 본체
게임기 -> 게임조종 옵션 과 모니터
음향기기 -> 여러 음원들을 섞는 믹서
오디오 시스템 -> 엠프
비행기, 기차-> 계기판, 입력장치들,
조작하기 위한 조작부라고 생각하면 편합니다.

브라우져에서 콘솔이라고 하면 키보드로 input하고 모니터로 output이 되는식으로 소통을 하는것인데

브라우져의 콘솔에서는 JS 기반 명령으로 운영

아래 사진을 보면 브라우져가 구동이 될려면 코드가 필요합니다. 출력된 값을 보고 우리가 어떤 코드들을 수정해보고 테스트 해보고 싶을 떄 코드들을 매번 수정하는 번거로움을 덜기 위해 콘솔에서 코드를 수정하고 테스트 해볼수 있다.
실제로 저장된 코드는 수정되지 않는다.

Console은 객체!!!
console객체에는 log 메소드를 포함한 다양한 메소드가 존재합니다.

백엔드에서 보내주는 response 는 console.log를 활용해 확인 가능합니다.
그렇기 때문에 백엔드에서는 상황을 명확하게 알려주는 response 메세지와 적절한 status code를 전달하는 것이 중요합니다!

일단 브라우져에서 콘솔을 열고 F12를 누르거나 mac은 Cmd + Opt + J 하면 열린다!

화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?

• Console의 설정창을 들어가 맨 처음 탭인 Perferences - console -Preserve log upon navigation을 찾아서 체크하면 된다.
• 

콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?

• clear() 또는 console.clear()

콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?

• console 탭 우상단 Default levels를 클릭해 Warnings와 Errors를 해제한다.

그럼 지금부터 아까 배운 3개 복습

여기서 clear () 를 하면!!!

안됩니다! 위쪽에서 clear 안되게 옵션으로 막아놨으니까요!
위 사진 처럼 Preserve log 의 체크박스를 풀어주면! 이제까지의 로고가 없어졌습니다.

다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

이렇게 Element Panel 에서 HTML & CSS 를 수정하고 테스트 하는데 JS 도 같이 수정하고 테스트 하고 싶다면?

작업하다가 esc를 누르면?

하단에서 콘솔로 JS도 같이 작업할수 있습니다.

Network panel

네트워크 패널의 기능
1.http 네트워크 통신 확인
2.api 크롤링, 페이지 로딩 성능 테스트
3.이미지, 영상 동의 소스 (mock data 활용)

Application panel

어플리케이션 패널의 기능
1.브라우저 저장소
2.local storage, Session Storage, Cookie

Local Storage, Session Storage, Cookie 차이점

• Storage : 브라우저의 저장소
• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Cookie : 만료 기한이 있는 저장소. 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분).

Local Storage, Session Storage, Cookie 활용 예시

• Local Storage

• 지속적으로 필요한 데이터(data persistant)(ex. 자동 로그인 여부)

• UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

• Session Storage :

• 잠깐 동안 필요한 정보

• ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택 (특히 10~30분 지나면, 로그인 기간이 만료되었습니다.)

• Cookie

• 서비스 직접적이지 않은 데이터

• 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등. (앞으로 24시간 동안 이 팝업 열지않기 이런 체크박스)ㄷ

❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.

출처. 위코드