[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 11

JavaScript

브라우저 개발자 도구

F12 키 또는 Ctrl + Shift + i를 누르면 확인할 수 있으며, 여러 탭으로 나뉨.

• Elements: 로드된 파일의 소스
• Console: 자바스크립트를 실행시킬 수 있음.
• Sources: 현재 브라우저에 로딩된 모든 소스코드를 확인 가능
• Network: 네트워크 통신이 일어났을 때 네트워크 통신 로그 확인 가능
• Performance: 웹의 성능을 확인
• Memory: 메모리 누수 등을 확인 가능
• Application: 브라우저의 저장 기능을 확인
• 이외에 Securiy, Lighthouse, Recorder, Performance insights 등의 기능이 있음

브라우저 디버깅

이슈(or bug, error): 개발 중에 발생하는 예기치 않은 상황

디버깅: 이러한 이슈를 분석 및 해결해 나가는 과정

 

디버깅을 웹에서 수행하는 방법은 2가지

1. 코드 내에 log 함수 심어 놓기
2. 개발자 도구의 소스 탭 활용하기

console.log

• 입력한 값을 콘솔에 한 줄 한 줄 출력
• 코드의 여러 위치에서 콘솔을 출력할 경우 로그를 확인할 때, 혼란이 있을 수 있음

가독성을 위한 출력 방법의 예)

const TEMP = 'temp'
console.log("TEMP >>> ", TEMP)

 

consol.dir

• 주입된 값의 모든 속성을 확인

consol.table

• 표 형식의 데이터를 테이블로 표현
• 색인과 값을 테이블 형태로 표현하기 때문에 컬렉션 데이터를 확인하는 용도로 적합

JavaScript 언어의 특징 

컴파일러 언어

• 사람이 코드를 작성
• 기계어로 변환
• 기계어에서 실행

인터프리터 언어

• 사람이 코드를 작성
• 기계에서 실행
• 변환하며 진행

JavaScript는 인터프리터 언어에 속하며 컴파일 단계가 없음, 컴파일러 언어에 비해 실행 속도가 느림.

최근에는 속도가 개선됨.

 

동적 타입 언어

let i = 1;   typeof: number
i = 'abc';   typeof: string

변수에 들어가는 값에 따라 런타임 과정에서 타입이 추론

 

일급 객체

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

• 함수는 일급 객체의 특징을 가짐
• 함수는 객체와 동일하게 사용 가능
• 험수는 값과 동일하게 취급 - 변수 할당문, 객체 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 반환문

프로토타입 기반의 상속

• 언어가 갖고 있는 프로토타입 체이닝 구조를 통해 상속 가능

여러 프로그래밍 패러다임 지원

• 명령형 프로그래밍
• 함수형 프로그래밍
• 객체지향 프로그래밍

+ 디버깅 부분 추가

개인적으로 사용하는 방법 중

let temp = 'temp';
document.location.hash = ">>" + temp;

이렇게 작성해서 페이지를 작동시켜 보면 url 부분에 직접 출력되어 콘솔창을 확인하지 않아도 값 확인이 가능하다.

간단한 값 확인이나 이벤트 확인의 목적이라면 꽤 편하게 사용 가능하다.