이것저것 스터디📚/JavaScript - Deep Dive (24) 썸네일형 리스트형 DeepDive - 48장. 모듈 48.1 모듈의 일반적 의미 - 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. - 이때, 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export라 한다. - 모듈 사용자는 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있으며 이를 import라 한다. 48.2 자바스크립트와 모듈 - 자바스크립트는 태생적으로 모듈 시스템을 지원하지 않는다. 즉, 모듈이 성립하기 위해 필요한 파일 스코프와 im.. DeepDive - 47장. 에러 처리 47.1 에러 처리의 필요성 - 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. - try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. - 우리가 작성하는 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. 47.2 try... catch... finally 문 - try... catch... finally 문은 일반적인 에러 처리 방법이라고 한다. - finally 문은 불필요하다면 생략 가능하다. catch 문도 생략이 가능하지만, catch문 없는 try 문은 의미가 없으므로 생략하지 않는다. console.log('[Start]'); t.. DeepDive - 45장. 프로미스 - 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하는데, 전통적인 콜백함수는 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는데도 한계가 있다. - ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. - 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료되기 때문에, 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 .. DeepDive - 44장. REST API - REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 - REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위와 구체적 내용 페이로드 44.2 REST API 설계 원칙 - 1. URI는 리소스를 표현하는데 집중한다. - 2. 행위에 대한 정의는 HTTP 요청 메서드를 통해한다. 1. URI는 리소스를 표현해야 한다. - URI는 리소스를 표현하는데 중점을 두어야 한다. - 리소스를 식별할 수 있는 이름은 동사보다는 명.. DeepDive - 43장. Ajax 43.1 Ajax란? - Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작함. - 전통방식의 문제점 - 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함한 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. - 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. - 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처.. DeepDive - 42장. 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 - 자바스크립트에서 함수가 실행되려면 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. - 자바스크립트 엔진은 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작하는데, 싱글 스레드 방식은 한 번에 하나의 테스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 테스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. - 현재 실행 중인 테스크가 종료할 때까지 다음에 실행될 테스크가 대기하는 방식을 동기 처리라고 한다. // sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다... DeepDive - 41장. 타이머 41.1 호출 스케줄링 - 호출 스케줄링 : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 사용하여 함수 호출을 예약하는 것. - 자바스크립트는 setTimeout과 setInterval 타이머 함수와 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공. - 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아닌, 브라우저와 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공. - 즉, 타이머 함수는 호스트 객체이다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.(싱글 스레드) - 즉, 타이머 함수 setTimeout과 s.. DeepDive - 40장. 이벤트 40.1 이벤트 드리븐 프로그래밍 - 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 - 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 - 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 40.2 이벤트 타입 - 이벤트 타입 : 이벤트의 종류를 나타내는 문자열(mdn : https://developer.mozilla.org/ko/docs/Web/API/Event) 40.3 이벤트 핸들러 등록 40.3.1 이벤트 핸들러 어트리뷰트 방식 Click me! - HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다. - on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.(e.. 이전 1 2 3 다음
