브라우저와 디버깅
이슈 : 개발 중에 발생 예기치 않은 상황 (=버그, 에러)
이슈가 발생되면 개발자는 분석해서 해결해야 하는데, 이때 분석하는 과정을 "디버깅"
디버깅 : 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적인 연산(이슈)를 찾아내고 그 원인을 밝히고 수정하는 과정을 뜻한다.
-> 코드 내에 log함수를 심기
console.log
console.dir-> 개발자도구 > Source탭을 활용
JavaScript언어의 특징-인터프리터 언어
컴퓨터가 내가 작성한 코드를 어떻게 이해할까?
-> 사람이 이해한 언어로 작성되면 기계어로 번역되어야 함
-
컴파일러 언어
사람이 코드를 작성 > 기게어로 변환 > 기계에서 실행 -
인터프리터 언어
사람이 코드를 작성 > 기게에서 실행 > 변환하며 진행
Interpreter 언어 : 컴파일 단계가 없음. 컴파일러 언어에 비해 실행속도가 느림 (모던 브라우저 내의 V8엔진에서는 속도 개선이 됨)
JavaScript언어의 특징-그 외
-
동적 타입 언어 : 변수에 들어가는 값에 따라서, 런타임에 타입이 추론됨
-
일급 객체
- 함수는 일급 객체의 특징을 가짐
- 함수는 객체와 동일하게 사용
- 함수는 값과 동일하게 취급
- 변수 할당문, 객체 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문
-
프로토타입 기반의 상속
: 언어가 갖고잇는 프로토타입 체이닝 구조를 통하여 상속 가능 -
여러 프로그래밍 패러다임 지원
- 명령형 프로그래밍
- 함수형 프로그래밍
- 객체지향 프로그래밍
- ...
JavaScript 표준화 - JavaScript의 탄생 배경과 ECMAScript
Fundamental
- 기술은 시간이 지남에 따라, 항상 더 나은 방향으로 고도화
- 소프트웨어, 개발 언어도 마찬가지
- 특정 시점을 기준으로 개선 : 버전으로 관리
자바스크립트의 발전
- 자바스크립트도 탄생 이후로 성장 시점마다 버전이 존재
- 자바스크립트를 사용하는 개발자는 버전을 확인하며 개발
- ECMAScript 2015, ECMAScript 2016, ..., ECMAScript 2022
자바스크립트의 탄생 & 표준화 과정
- Brendan Eich
- 넷스케이프 개발자
- 웹페이지의 보조적인 기능을 수행하기 위해 만듦
- 이름 변천사 : 모카->라이브스크립트->자바스크립트
- 1995년 발표
자사 소프트웨어 사용의 점유율을 높이기위해 브라우저마다 동작하는 기능을 경쟁적으로 추가함
-> 즉, 같은 자바스크립트 파일인데 IE에서는 동작하고, Netscape에서는 동작하지 않는 현상 발생
-> 크로스 브라우징 이슈
모든 브라우저에서 자바스크립트는 동일하게 동작해야 함
-
1996년 표준화 개발 진행(넷스케이프 -> ECMA 요청)
-
1997년 ECMA 총회때 채택
표준화 목록 중 하나 : ECMA-262
ECMAScript로 명명(ECMAScript 1, ES 1) -
ECMA의 여러 Committee 중 TC39 Committee가 관리함
개발자는 해당 표준화 정책을 고려한 개발이 필요
-> 언어 버전을 고려하며 개발해야 함
-> 이를 도와주는 솔루션 : (트랜스 파일러) Babel, (lint) eslint, (Bundler) Webpack, ...
JavaScript 표준화 - ECMAScript 2015+로 개발하기
ECMAScript 표기법
-
ECMAScript 버전 표기법
- ECMAScript{{연도}} - ECMAScript2015
- ES{{연도}} - ES2015
- ES{{판}} - ES11
-
ECMAScript2015 - ES2015 - ES6
-
현재는 ECMAScript2023까지 나옴
ECMAScript2015
-
6판을 위한 작업은 2009년도 부터 진행(15년)
-
목표 : 아래의 대상으로 사용하는 데에 용이하도록 토대를 제공
- 대규모 어플리케이션
- 라이브러리 생성
- 다른언어의 컴파일
-
개선사항 : 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선이 존재
ECMAScript 와 브라우저
-
브라우저는 브라우저의 버전마다 지원하는 자바스크립트 스펙이 상이
- ECMAScript의 기준을 따라가지는 않음
-
개별 기능의 지원 : Caniuse 확인 가능
개발에는 사용하고 싶은데, 브라우저 지원이 안될 경우?
: polyfill과 babel 사용
-
polyfill
지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는데 사용 -
Babel
이전 버전의 브라우저에서 ES6 이전 버전의 JavaScript로 변환하는데 사용되는 도구
문법을 번역 및 변환
폴리필 기능
