개발자도구?

개발자들이 웹 개발을 할 때 사용할 수 있도록 다양한 서포팅 도구들이 개발자 도구에 담겨있습니다. 크롬, 파이어폭스, 사파리 등 다양한 브라우저가 있는데, 각 브라우저마다 본인들의 개발자도구를 가지고 있습니다.
그 중에서도 가장 많이 쓰이고있는 크롬 개발자 도구를 열심히 뜯고 씹고 맛보고 즐겨봅시다.

패널의 종류

우리는 모두 언젠가 키를 잘못 누르거나 하는 경우로 저 창을 본 적이 있었을 것이다.
(물론 나는 없었다. 컴퓨터랑 안 친했었다.)
특히, 퍼블리싱 웹개발하는 하는 사람이라면 개발자도구는 뗄레야 뗄 수 없는 사이이다. 구글과 스택오버플로우, 개발자도구.

개발자도구 창을 확인해보면

맨 왼쪽부터 Elements, Console, Source, Network 등의 패널들이 존재한다.
오늘 다룰 부분들은 그 중에서도 가장 많이 사용되는 Elements, Console, Network, Application 패널들이다.

Elements

간단히 말해 어떤 스타일로 DOM이 빌드되어있는가를 확인할 수 있는 공간이다.
html, css를 확인할 수 있고, 수정해봄으로써 에디터에서->해당부분을 수정하고->다시 브라우저를 열어->확인하고->재수정하는 과정을 줄일 수 있다.

Console

콘솔 창은 주로 자바스크립트를 작성한 후 디버깅을 할 때 많이 사용된다.
자바스크립트의 console 객체를 통해 구현된 메소드들이 해당 위치에 구현된다.
그 외에도 에러가 발생하는 등의 경우가 생겼을 경우에도 콘솔 창에서 알림을 주기도 한다.
작성한 자바스크립트의 확인 외에도 직접 콘솔창에서 스크립트를 구현하는 방법도 가능하다.
단, 페이지가 리프레쉬 될 경우 작성했던 코드들이 휘발되는 특징이 있다.
해당 특징을 방지하기 위해선 상단 우측 톱니바퀴 모양을 클릭 => Preserve log를 체크해주어야한다.

Network

웹이 받아오는 모든 정보들이 기록되는 위치이다.
가장 많이 확인하는 탭은 xhr로 api 요청을 통해 받은 데이터들에 관해 확인해볼 수 있는 탭이다.

위 사진은 구글 크롬 가장 첫 페이지에서 불러온 개발자도구이다.
xhr을 확인해보면 한 개의 api를 주고 받았는데, POST방식이 사용되었고 결과는 200으로 성공적으로 api를 불러왔다는 것을 알 수 있다.
해당 api를 선택해 Preivew를 통해 불러오는 데이터를 미리 확인해볼 수 있다.

그 다음으로 가장 많이 쓰이는 탭은 Img 나 Media인데,
서버에서 불러온 사진이나 영상 등을 확인해볼 수 있는 위치이다.
클론 코딩을 하는 경우, 받아오는 리소스 등을 확인, 받아볼 수도 있다.

Application

브라우저의 저장소에 담긴 데이터들을 확인하는 용도로 쓰인다.
Cookie, Local Storage, Session Storage가 가장 많이 쓰인다.

Cookie
쿠키의 경우 만료일이 정해져있고, 그 뒤로는 사라질 데이터들을 저장하는 공간이다.
말이 너무 어렵다 "만료일이 정해져있는 데이터를 보관" 하는 곳이다.
가장 대표적인 예로는 "하루동안 창 열지 않기"가 있다.
쿠키에 만료일을 다음일까지 지정하고 -> 스크립트로 쿠키에 담겨있는 데이터를 확인해 창을 띄울지 말지를 정하는 방식이다.
용량이 4KB이고 쿠키 값은 자바스크립트에서 document.cookie로 확인 가능하다.
리턴되는 쿠키값들은 모두 하나의 문자열로 나타나기 때문에 split 등을 이용해 각 정보를 구분해야한다.

Local Storage / Session Storage
Local Storage와 Session Storage는 모두 Key-Value Pair로 데이터가 저장, 보관된다.
Local Storage와 Session Storage의 가장 큰 차이점은 "휘발성"이다.
Local Storage의 경우 사용자/개발자가 직접 삭제하지 않는 이상 정보들이 계속해서 저장되어있다.
Session Storage의 경우에는 말처럼 한 세션이 끝나면(탭이 닫힐 경우) 저장되어 있던 정보들이 모두 휘발된다.

Local Storage에는 주로, 로그인 유지하기 등을 클릭했을 때 서버에서 받아오는 토큰 값을 저장하는 등에 이용되고, Session Storage의 경우 글을 작성하다가 뒤로 가기를 눌렀다가 다시 돌아오는 경우 사용될 수 있다.