안녕하세요. Codinglee입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
계속해서 웹 프로그래밍을 위한 이론 설명 드리겠습니다.
오늘은 웹 개발을 하면 반드시 알아야하고 자주 사용하게 되는
브라우저의 개발자 도구 에 대해 알아보겠습니다.
이전 시리즈 보기
시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2. 챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3. 챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4. 챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
시리즈 5. 왕초보 웹 프로그래밍 1 – HTML CSS JAVASCRIPT
시리즈 6. 왕초보 웹 프로그래밍 2 – 인터넷, 웹브라우저
시리즈 7. 왕초보 웹 프로그래밍 3 – DNS(Domain Name System)
시리즈 8. 왕초보 웹 프로그래밍 4 – 서버, 클라이언트
오늘의 학습 순서입니다.
개발자 도구 알아보기
1. 개발자 도구 여는 방법
2. 요소(Elements)
3. 콘솔(Console)
4. 네트워크(Network)
그럼 오늘의 내용 시작해보겠습니다.
1. 개발자 도구 여는 방법
우선 개발자 도구란 웹 브라우저에 내장된 강력한 도구입니다.
이름 그대로 개발자가 주로 사용하는 도구로 웹 사이트를 분석하고 디버깅할 수 있도록 도와줍니다.
개발자 도구를 통해 내가 만든 코드가 잘 반영되고 있는 지 실시간으로 확인하고 수정할 수 있습니다.
또한, 네트워크 요청, 성능 분석, 레이아웃 문제 등을 확인하고 해결할 수 있게 도와줍니다.
브라우저에서 개발자 도구를 여는 방법에 대해 알아보겠습니다.
저는 Windows10 & Chrome Browser 기준으로 설명드리겠습니다.
Edge, Firefox, Naver Whale 등 다른 브라우저도 별 차이 없습니다.
[방법1. 브라우저에서 단축키 F12]
브라우저를 열고 키보드에서 자주 사용하지 않는 F12 펑션키를 누르면
바로 개발자 도구 창이 나오게 됩니다.
우리가 이전에 작성했던 것과 비슷한 HTML 코드가 바로 보이네요.
그리고 오른쪽에는 CSS코드가 보이고 있습니다.
[방법2. 마우스 오른쪽 버튼 클릭 – 검사]
두 번째 방법은 브라우저 아무 곳에서나 마우스 오른쪽 버튼을 클릭하고
“검사”를 선택합니다. 영어로 나오는 분들은 Inspector 선택해주시면 됩니다.
선택하시면 위와 같은 개발자 도구가 나오게 됩니다.
개발자 도구의 기본 기능에 대해 조금 더 알아보고 가겠습니다.
처음 개발자 도구를 여시면 제일 상단에 한국어 사용 가능하다고 나올거예요.
한국어가 편하시면 한국어로 Switch 해 주시면 됩니다.
저는 그냥 영어로 두고 설명드리겠습니다.
개발을 하실 때는 항상 영어를 추천드립니다.
왜냐하면 코드에 오류가 발생했거나 동작하지 않을 때 질문을 하게되는데요,
영어로 검색했을 때의 자료가 훨씬 많이 있습니다.
다음으로는 개발자 도구를 닫는 방법입니다.
위 화면에 오른쪽 상단 x 표시를 누르면 개발자 도구가 닫힙니다.
또는 F12 버튼을 한 번 더 누르면 닫히게 됩니다.
그리고 x버튼 왼쪽 점 세개를 누르면 개발자 도구의 위치를 정할 수 있습니다.
저는 주로 모니터를 두 개 이상 사용하고 있어서 제일 왼쪽에 있는
개발자 도구 별도 창으로 띄우고 사용하고 있습니다.
본인에게 맞는 개발자 도구 위치를 정해주시면 되겠습니다.
2. 요소(Elements)
이제 개발자 창을 열었으니 하나씩 자세히 살펴보겠습니다.
개발자 도구를 열면 기본 탭인 요소(Elements)탭이 열립니다.
최상단 메뉴에서 Elenemts또는 요소를 선택할 수 있습니다.(빨간네모)
그리고 크게 파란네모 부분과 초록네모부분 두 부분으로 나뉘게 됩니다.
파란색은 HTML코드, 초록색은 CSS입니다.
지금은 코드가 무슨 의미인지 모르셔도 됩니다.
저와 끝까지 함께 하신다면 무슨 의미인지 자동적으로 알게되실겁니다.
여기서 질문) 이 코드들은 어디에서 온 것일까요????
지난 시간 서버, 클라이언트를 잘 보셨으면 어디서 왔는지 아시겠죠?
정답은 네트워크 챕터에서 알려드리겠습니다.
3. 콘솔(Console)
개인적으로 웹 개발자라면 가장 친해져야 할 부분이 콘솔이라고 생각합니다.
그 이유는 모든 개발은 한 번에 완벽해질 수 없거든요.
ChatGPT를 이용해 코드를 생성하더라도, 오류는 발생할 수 밖에 없습니다.
또한, 윈도우나 많은 앱들 업데이트를 하는 것을 생각해보면,
계속 수정하고 보수를 해야만 합니다.
그래서 오류를 확인 할 수 있는 콘솔창이 가장 중요하다고 생각합니다.
구글 메인 페이지의 콘솔창을 보겠습니다.
제 컴퓨터 기준 콘솔 창 모습입니다.
컴퓨터에 따라서 메시지는 다르게 나올 수 있습니다.
와우, 전 세계에서 대표적인 기업인 google.com의 메인 페이지도 어떤 오류가 발생하네요.
물론 심각한 건 아닙니다.
앞으로 저 빨간 오류 메시지와 친해지셔야 합니다.
개발을 하시다보면 오류가 잔뜩 나오게 될 거예요.
대부분은 Visual Studio Code에서 발견되겠지만
실행 중에 발생할 수 있는 오류는 개발자 도구에서 꼭 확인하셔야 합니다.
오류가 발견되었다면 자세히 읽어보시는 것을 추천드립니다.
쉽게 해결되지 못하는 문제의 경우 구글 검색 또는 gpt에 에러 메시지를 던져주면
원인 파악과 해결책을 바로 알려줍니다.
4. 네트워크(Network)
오늘 마지막으로 알아볼 탭은 네트워크 탭입니다.
아까 질문드렸던 것 기억하시죠? 어떻게 요소 탭에 코드가 들어올 수 있는가?
지난 포스트에서 서버, 클라이언트에 대해 설명드렸습니다.
클라이언트인 브라우저는 서버에 요청(request)을 하고
서버는 클라이언트에게 응답(response)을 한다. 기억하시죠?
서버가 어떻게 응답하는지 이 네트워크 탭을 보면 알 수 있습니다.
네트워크 탭의 사진은 다음과 같습니다.
네트워크 탭의 아래 파일들이 보이시나요?
google.com에 접속한다는 말은 google서버에 파일을 요청한다는 의미이고,
google서버에서는 google.com 메인 페이지에 필요한 파일을 모두 응답합니다.
응답해서 google 창이 떴다는 것은 내 컴퓨터가 저 많은 파일을 순식간에 다운받았다는 말과 같습니다.
네트워크 탭을 가만히 둔 채로, google 페이지를 새로고침해보세요.
비워졌던 공간이 금방 많은 파일로 차는 것을 볼 수 있습니다.
파일 Type을 보시면 document, script, text/html 등 종류가 많죠?
이미지인 png파일도 보입니다.
이 파일의 내용이 아까 요소탭에서 보여진 것입니다.
그리고 Status 부분이 보이시나요?
이 부분도 지난 번에 설명드렸던 200, 404와 같은 응답 상황을 보여주는 것입니다.
200이면 정상적으로 응답받은 것입니다.
오늘은 여기까지입니다.
다음 포스트에서도 계속 이어나가겠습니다.
감사합니다. 지금까지 Codinglee였습니다.
2024.10.16.(수) 이른 아침 판교 직장에서 씀.
