CS/모던 자바스크립트 Deep Dive (41) 썸네일형 리스트형 [회고] 모던 자바스크립트 딥다이브 1회독 2023년 4월 5일부터 2023년 5월 17일까지, 약 한 달하고 2주간 딥다이브 1회독을 마쳤다. 원래는 작년에 스터디 참여 당시 11장 정도까지 읽었었는데(물론 시간에 쫓겨 깊이 이해하지 못하고 넘어간 경우가 많다), 프로젝트 기간이니 뭐니 해서 자연스럽게 책에서 손을 뗐고, 우리의 딥다이브는 내 책장에 방치되고 있었다(미야내... 열심히 읽어보겠다고 분철까지 했는데.. 그치?). 부트캠프를 수료한 후 면접 준비 겸 JS 공부를 하려고 빈출 문제들을 살펴보는데 세상에 마상에 내가 모르는 내용들도 많았고, 알아도 말로 설명할 수 없는 애매모호한 수준까지만 아는 내용들이 거의 99% 였다. 처음엔 하루에 기출 문제 하나를 선정해서 그 내용에 대해 공부하고 정리하는 방식으로 공부를 시작하였다. 물론 빠르.. 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 2023년 5월 17일 900p~917p 크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분 ES6 사양을 지원한다. 하지만 IE 11의 지원율은 11%다. 그리고 매년 새롭게 도입되는 버전은 브라우저에 따라 지원율이 제각각이다. 따라서 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경 구축이 필요하다. 트랜스파일러인 Babel과 모듈 번들러인 Webpack에 대해 알아보자. 49.1 Babel Babel은 자바스크립트 컴파일러이다. Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+(이상)의 코드를 이전 버전의 JavaScript로 변환하는 데 .. 47장 에러 처리 & 48장 모듈 2023년 5월 886p~899p 47장 에러 처리 47.1 에러 처리의 필요성 에러가 발생하지 않은 코드를 작성하는 것을 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); 직접적으로 에러를 발생하지 않는 예외적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. // DOM에 button 요소가 존.. 46장 제너레이터와 async/await 2023년 5월 15일 870p~885p 46장 제너레이터와 async/await ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제터레이터와 일반 함수의 차이는 다음과 같다. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있도록 제어권을 가진다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수를 호출하면 파라미터를 통해 값을 받고 함수 코드를 실행하여 결과값을 반환한다. .. 45장 프로미스(2) 2023년 5월 13일 856p~869p 45.5 프로미스 체이닝 위에서 "콜백 헬"에서 보았듯이 비동기 처리를 위한 콜백 패턴은 콜백 헬이 발생하는 문제가 있다. 프로미스는 then, catch, finally 후속 처리 메서드를 통해 콜백 헬을 해결한다. const url = 'https://jsonplaceholder.typicode.com'; // id가 1인 post의 userId를 취득 promiseGet(`${url}/posts/1`) // 취득한 post의 userId로 user 정보를 취득 .then(({ userId }) => promiseGet(`${url}/users/${userId}`)) .then(userInfo => console.log(userInfo)) .catch(err .. 45장 프로미스(1) 2023년 5월 12일 842p~856p 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 GET 요청을 위한 함수 예시를 살펴보자. // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest().. 44장 REST API 2023년 5월 11일 830p~841p REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 REST에서 가장 중요한 기본적인.. 43장 Ajax 2023년 5월 10일 816p~829p 43.1 Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 전통적인 이전의 웹페이지는 화면이 전환되면 html 태그로 시작하여 html 태그로 끝나는 완전한 html을 서버로부터 전송받아 웹페이지 전체를 다시 렌더링하는 방식으로 동작했다. 전통적인 웹페이지 통신 방법은 단점이 존재했다. 변경할 필요가 없는 부분까지 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화면이 깜박이는 현상이 발생한다. 서버와의 통신이 동기 방식으로 동작하기 .. 이전 1 2 3 4 ··· 6 다음
