sign in join

HTML & JavaScript 기술강좌

HTML과 웹 기반의 JavaScript 기술에 대한 다양한 주제를 살펴보고 논의합니다. 먼저 웹 개발을 시작한지 얼마 안 된 초보자나 갑자기 웹 환경에서 작업하게 된 다른 언어의 전문가가 브라우저를 이용해서 클라이언트 측 디버깅을 처음 시작할 때 도움이 될 수 있도록 'IE11을 이용한 JavaScript 디버깅'이라는 주제로 시리즈를 시작합니다.

비록 강좌의 형태를 띠고 있지만, 다른 분을 가르친다기보다는 부족하나마 습득한 지식을 정리 및 공개해서 함께 논의할 수 있는 기반을 마련하고자 합니다. 기술적인 오류나 다른 관점에서의 지적은 언제라도 겸허히 받아들이도록 하겠습니다.

IE11을 이용한 JavaScript 디버깅 01, F12 개발자 도구 콘솔 창
2019-01-01 08:00 2019-01-01 08:00 29,785
본문에서는 IE11을 이용한 JavaScript 디버깅 방법 중, F12 개발자 도구의 콘솔 창의 사용 방법을 살펴봅니다. 콘솔 창은 클라이언트 측 디버깅을 위해 필요한 가장 필수적이고 기초적인 기능입니다.
IE11을 이용한 JavaScript 디버깅 02, console 개체
2019-01-08 08:00 2019-01-08 08:00 8,780
본문에서는 IE11을 이용한 JavaScript 디버깅 방법 중, F12 개발자 도구의 콘솔 창에 프로그래밍적인 방식으로 개발자가 원하는 디버깅 메시지를 출력할 수 있는 console 개체에 관해서 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 03, F12 개발자 도구 DOM 탐색기 창 Part 1
2019-01-15 08:00 2019-01-15 08:00 7,079
본문에서는 F12 개발자 도구의 DOM 탐색기 창에서 웹 페이지의 DOM 트리 구조를 살펴보거나 분석하고 손쉽게 조작할 수 있는 DOM 트리 뷰와 스타일 규칙을 자유롭게 편집하여 테스트해 볼 수 있는 스타일 탭의 기본적인 편집 기능을 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 04, F12 개발자 도구 DOM 탐색기 창 Part 2
2019-01-22 08:00 2019-01-22 08:00 6,411
본문에서는 지난번 글에 이어 F12 개발자 도구 DOM 탐색기 창의 스타일 탭이 제공해주는 고급 기능을 마저 살펴보고, 계산됨, 레이아웃, 이벤트, 그리고 변경 내용 탭의 기능들을 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 05, F12 개발자 도구 디버거 창 Part 1
2019-01-29 08:00 2019-02-23 00:56 17,288
본문에서는 F12 개발자 도구의 디버거 창에서 코드를 중단할 수 있는 대표적인 다섯 가지 방법, 즉 debugger 키워드, 중단점, 중단 버튼, 새 작업자에서 중단 버튼, 예외 동작 변경 옵션에 대해서 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 06, F12 개발자 도구 디버거 창 Part 2
2019-02-12 08:00 2019-02-12 08:00 6,374
본문에서는 디버거에서 중단한 코드를 탐색하기 위한 세 가지 주요 기능인 프로시저 단위 실행, 한 단계씩 코드 실행, 그리고 프로시저 나가기 기능과 그 밖에 커서까지 실행 및 다음 문 설정 같은 기능들을 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 07, F12 개발자 도구 디버거 창 Part 3
2019-02-19 08:00 2019-02-19 08:00 10,035
본문에서는 조사식 탭이나 콘솔 창 등을 이용해서 중단된 코드의 문맥을 감안하여 개체 및 변수의 상태를 살펴보고 필요한 경우 그 값을 변경해서 테스트해보는 방법을 알아봅니다.
IE11을 이용한 JavaScript 디버깅 08, F12 개발자 도구 디버거 창 Part 4
2019-02-26 08:00 2019-02-26 08:00 8,779
본문에서는 조건부 중단점, 이벤트 중단점, 추적점, 이벤트 추적점 등과 같은 중단점 탭의 고급 기능과 호출 스택 탭의 기본적인 활용 방법을 조금 더 자세하게 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 09, F12 개발자 도구 디버거 창 Part 5
2019-03-05 08:00 2019-03-05 08:00 7,833
본문에서는 F12 개발자 도구의 디버거 창이 제공하는 작업 시 편의성을 높여줄 수 있는, 내 코드만 디버그와 예쁜 인쇄, 그리고 소스 맵 연결 같은 나머지 도구들을 살펴봅니다.
IE11을 이용한 JavaScript 디버깅 10, F12 개발자 도구 네트워크 창 Part 1
2019-03-19 08:00 2019-09-25 21:38 17,003
본문에서는 F12 개발자 도구의 네트워크 창을 이용해서 브라우저와 서버 간에 전송되는 통신을 모니터링 하는 기본적인 방법과, 전송 내역 목록을 이해하기 위한 몇 가지 정보를 살펴봅니다.
IE11 및 Chromium Edge에서 메모리 힙 스냅샷 찍기
2020-02-25 08:00 2020-02-25 08:00 8,567
본문에서는 IE11 및 Chromium Edge의 F12 개발자 도구를 활용하여 메모리 힙 스냅샷을 찍는 기초적인 방법과 여러가지 관점에서 스냅샷을 살펴볼 수 있는 다양한 보기들, 그리고 사용되는 용어들에 관해서 알아봅니다.
IE11 및 Chromium Edge에서 메모리 힙 스냅샷 비교하기
2020-03-10 08:00 2020-03-10 08:00 5,836
본문에서는 IE11 및 Chromium Edge의 F12 개발자 도구를 활용하여 비교 보기 모드 또는 Comparison 보기에서 메모리 힙 스냅샷 간의 비교/분석을 수행하는 방법을 알아보고 직접 간단한 예제도 살펴봅니다.
Chromium Edge의 메모리 힙 스냅샷 분석을 위한 V8 엔진의 이해 1.
2020-03-24 08:00 2020-03-24 08:00 7,165
본문에서는 Chromium 계열의 브라우저가 메모리 힙 스냅샷을 통해서 제공하는 정보를 보다 잘 이해하기 위해서 V8 엔진의 동작 방식을 간단하게 살펴봅니다. V8 엔진의 실행 파이프라인 및 인라이닝, 히든 클래스, 인라인 캐싱 같은 최적화 기법에 대해서 알아보고 명령줄 스위치를 활용하여 V8 엔진의 관련 추적 로그를 기록하여 검토해봅니다.
Chromium Edge의 메모리 힙 스냅샷 분석을 위한 V8 엔진의 이해 2.
2020-04-07 08:00 2020-04-07 08:00 6,070
본문에서는 개체의 히든 클래스를 동일하게 유지하기 위해 웹 클라이언트 개발자가 알고 있어야 할 사항들을 메모리 힙 스냅샷의 관점에서 조금 더 구체적인 사례 위주로 살펴본 다음, 한 단계 더 깊숙하게 들어가서 V8 엔진이 내부적으로 JavaScript 개체의 속성을 어떠한 범주로 분류하여 관리하는지 검토해봅니다.
Visual Studio Community로 V8 엔진 다운로드 및 빌드하고 간단히 살펴보기
2020-04-21 08:00 2020-04-21 08:00 9,671
본문에서는 Windows 환경에서 V8 엔진의 소스를 다운로드 받고 Visual Studio Community 2019를 사용하여 빌드하는 방법을 살펴보고, 그 결과물 중 하나로 얻어지는 V8 엔진의 디버그 쉘인 D8을 이용해서 JavaScript 코드를 분석하는 방법을 간략하게 알아봅니다.
IE11 및 Chromium Edge에서 가상의 메모리 누수 상황 재현 및 해결하기
2020-05-05 08:00 2020-05-05 08:00 10,941
본문에서는 실제 업무 환경에서 발생할 수 있는 가상의 메모리 누수 상황을 재현하여 지금까지 본 시리즈를 통해서 살펴본 모든 내용을 바탕으로 문제의 원인을 파악하고 그에 대한 해결 방안을 검토해봅니다.
확인 취소 닫기