JS31 모던 자바스크립트 Deep Dive - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 ES6+와 최신 사양을 사용하여 프로젝트를 진행하려면 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요함. Babel ES6의 화살표 함수, ES7의 지수 연산자 49-01 [1, 2, 3].map(n => n ** n); IE 같은 구형 브라우저에서는 위 문법을 지원하지 않을 수 있음. Babel을 사용하면 위 코드를 ES5 사양으로 변환할 수 있음. 49-02 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel은 최신 사양의 소스코드를 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있음... 2024. 2. 21. 모던 자바스크립트 Deep Dive - 모듈 48장 모듈 모듈의 일반적 의미 재사용 가능한 코드 조각 일반적으로 기능을 기준으로 파일 단위로 분리함. 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야함. 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음. 즉 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함. 이를 export라고 함. 공개된 모듈의 자산을 사용하는 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있게 함. 이를 import 라고 함. 자바스크립트와 모듈 Node.js는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원함. ES6 모.. 2024. 2. 20. 모던 자바스크립트 Deep Dive - 에러 처리 47장 에러 처리 에러 처리의 필요성 발생한 에러를 방치하면 프로그램은 강제 종료됨 try catch 문을 사용해 대응하면 강제 종료되지 않고 실행 시킬수 있음. 직접적인 에러를 발생하지는 않는 예외적인 상황이 발생할 수도 있음. 대응하지 않으면 에러로 이어질 가능성이 큼. 47-03 // DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다. const $button = document.querySelector('button'); // null $button.classList.add('disabled'); // TypeError: Cannot read property 'classList' of null 에러가 발생하지 않는 코드를 작성.. 2024. 2. 19. 모던 자바스크립트 Deep Dive - async/await 46장 async/await async/await 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현 프로미스의 then/catch/finally에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있음. 다시 말해, 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있음. 46-14 const fetch = require('node-fetch'); async function fetchTodo() { const url = ''; const response = await fetch(url); const todo = await response.json(); console.log(todo); .. 2024. 2. 17. 모던 자바스크립트 Deep Dive - 프로미스 45장 프로미스 비동기 처리를 위한 콜백 패턴의 단점 1 ) 콜백 헬 45-01 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; // id가 1인 post를 취득 get(''); /* { "userId": 1, "id": 1, "title": "sunt.. 2024. 2. 16. 모던 자바스크립트 Deep Dive - REST API 44장 REST API REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처. REST API : REST를 기반으로 서비스 API를 구현한 것. REST API의 구성 자원, 행위, 표현 REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음. REST API 설계 원칙 가장 중요한 기본적인 원칙 1 ) URI는 리소스를 표현하는데 집중 2 ) 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것. 1 ) URI는 리소스를 표현해야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용. 따라서 이름에 get 같은 행위에 대한 표현이 들어가서는 안됨. # bad GET /getTodos/1 GET /todos/.. 2024. 2. 15. 이전 1 2 3 4 ··· 6 다음
