sharingStorage

모던 자바스크립트 완독 회고 책을 읽게된 계기 Angular로 프로젝트를 해보면서도, React 기초를 공부하면서도, Svelte 코드를 수정할 때도 가장 많이 느낀점은 자바스크립트 기초 지식에 대한 부족이였다. 생각해보면 내가 js를 공부하게된 것은 학교 수업 웹프로그래밍을 이수하고 나서부터인데 그땐 HTML과 CSS를 주로 다뤘고 JS도 jQuery를 다뤘던 기억이 있다. 그리고 생활코딩, 10강정도 되는 유튜브 기본강의, 인프런 타입스크립트 강의등을 들었던 것이 끝이다. Angular나 React를 공부할 때 모르는 부분은 대부분 자바스크립트에서 있는 기본 개념을 조금 발전시킨 것들이 많았는데 기초가 튼튼하지 않으니 시간도 많이 소모되고 뭔가 중간이 빈 느낌이 계속 들었다. 또 컴퓨터공학 전공생이라..

크롬, 사파리 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%지만 IE 11의 지원율은 약 11%다. 그리고 매년 새롭게 도입되는 ES6이상의 버전과 제안 단계에 있는 ES제안 사양은 브라우저에 따라 지원율이 제각각이다. 따라서 ES6+와 ES.NEXT의 최신 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요한다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6모듈은 대부분의 브라우저에서 사용가능하지만 다음과 같은 이유로 아직 별도의 모듈 로더를 사용하는 것이 일반적이다 IE를 포함한 구형 브라우저는 ESM을 지원하지 않는다. ESM을 사용..

48.1 모듈의 일반적인 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야한다. 자신만의 파일 스코프를 갖는 모듈 자산 (모듈에 포함되어있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 다시말해 모든 자산은 캡슐화 되어 다른 모듈에서 접근 할 수 없다. 즉 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택정 공개가 가능하다. 이를 export 라고한다. 공개된 모듈의 자산은 다른 모..

47.1 에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 에러는 언제나 발생할 수 있고 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. 에러에 의해 프로그램이 강제 종료되어 [End]같은 아래 코드는 실행되지 않는다. try catch문으로 에러를 적절하게 대응하여 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 에러나 예외적인 상황은 너무나 다양하기 때문에 아무런 조치없이 프로그램이 강제 종료된다면 원인을 파악하여 대응하기 어렵다. 47.2 try ... catch ... finally 문 기본적으로 예외처리를 구현하는 방법은 크게 두가지가 있다. 예외적인 상황이 발생하면 반환하는 값(null 또는 -1)을 if문이나 단축평가 또는 옵셔..

46.1 제너레이터란? ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터와 일반 함수의 차이점은 다음과 같다. 1. 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 다시 말해, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도할 수 있다는 것을 의미한다. 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수는 매개변수를 통해 함수 외부에서 값을 주입하고 반환받는다. 즉 함수가 실행되고 있는 동안에는 함수의 상태를 변경할 수 없다. 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 ..

REST는 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 소개되었고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP요청의 내용을 이해할 수 있다. 구성요소 내용 표현 방법 자원 자원 URI (엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 REST에서 가장 중요한 기본적인 원칙은 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것이..

41.1 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 일정 시간이 경과된 이후 함수가 호출되도록 예약하려면 타이머 함수를 사용하면 된다. 이를 호출 스케줄링이라 한다. 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 호스트객체이다. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다. 다시 말해 타이머 함수가 생성한 타이머가 만료되면 콜백함수가 호출된다. setTimeout 함수가 생성한 타이머는 단 한번 동작하고 setInterval함수가 생..

40.1 이벤트 드리븐 프로그래밍 브라우저는 처리해야할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라 하고 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 프로그램의 흐름을 이벤트 중심으로 제어하는프로그래밍 방식을 이벤트 드리븐 프로그래밍이라한다. 40.2 이벤트 타입 40.2.1 마우스 이벤트 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 다음에 소개하는 이벤트 타입은 사용빈도가 높은 이벤트다. click - 마우스 버튼 클릭시 dbclick - 마우스 더블 클릭 mousedown - 마우스 버튼 눌렀을 때 mouseup - 누르고 있는 마우스 놓았을 때 mousemove - 마우..

구굴의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹르바우저를 벗어나 서버사이드 애플리케이션 개발에도 사용할 수 있는 범용 개발 언어가 되었다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS 와 함께 실행된다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 브라우저의 렌더링 엔진은 서버로부터..

37.1 Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. Set객체는 동일한 값을 중복하여 포함할 수 없다. 요소 순서에 의미가 없다. 인덱스 요소에 접근할 수 없다. Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조이며 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. 37.1.1 Set 객체의 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 중복을 허용하지 않는 Set 객체 특성을 활용하여 배열의 중복된 요소를 제거할 수 있다. 37.1.2 요소 개수 확인 Set..