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. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수는 매개변수를 통해 함수 외부에서 값을 주입하고 반환받는다. 즉 함수가 실행되고 있는 동안에는 함수의 상태를 변경할 수 없다. 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 ..

Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해서 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위해 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. get 함수는 비동기 함수다. 비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함하는 함수를 말한다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코..

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

43.1 Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 예전의 웹페이지는 html로 시작해서 html태그로 끝나는 완전한 HTML을 서버로 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로 부터 새로운 HTML을 전송받아 페이지를 처음부터 다시 렌더링했다. 이는 변경할 필요가 없는 부분도 다시 전송하기 때문에 불필요한 데이터 통신..

42.1 동기처리와 비동기 처리 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸쉬되는 것은 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. const bar=()=>{}; const foo=()=>{ bar(); }; foo(); 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 실행중인 실행 컨텍스트를 제외하고는 모두 대기중인 태스크들이다. 이처럼 자바스크립트 엔진은 한번에 하나..

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