Javascript (47) 썸네일형 리스트형 [모던 자바스크립트 Deep Dive] 44. 모듈 모듈의 일반적 의미 어플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 기능을 기준으로 파일 단위로 분리 모듈이 성립하려면 자신만의 파일 스코프 (모듈 스코프)를 가질 수 있어야 함 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export 라 함 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능하며 이를 import 라 함 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고 재사용성이 좋아 개발 효율성과 유지보수성을 높일 수 있음 자바스크립트와 모듈 클라이언트 사이드 자바스크립트는 script 태그를 사용하여 .. [모던 자바스크립트 Deep Dive] 43. 에러 처리 에러 처리의 필요성 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료됨 try ... catch 문을 사용해 발생한 에러에 적절하게 대응하면 계속해서 코드 실행 가능 작성한 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드 작성 필요 console.log("start"); try{ foo(); } catch(err){ console.log(err); // ReferenceError: foo is not defined } // 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 X console.log("end"); try ... catch ... finally 문 try{ // 실행할 코드 (에러가 발생할 가능성이 있는 코드) } catch.. [모던 자바스크립트 Deep Dive] 42. 제너레이터와 async/await 제너레이터란? 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다 제너레이터 함수의 정의 function* 키워드로 선언 하나 이상의 yield 표현식 포함 에스터리스크의 (*) 위치는 function 키워드와 함수 이름 사이라면 어디든지 상관 X 하지만 일관성을 위해 function 키워드 바로 뒤를 권장 제너레이터 함수는 화살표 함수로 정의 X new 연산자와 함께 생성자 함수로 호출 X // 제너레이터 함수 선언문 function* getDecFunc(){ yield 1; }; // 제.. [모던 자바스크립트 Deep Dive] 41. 프로미스 비동기 처리를 위한 콜백 패턴의 단점 비동기 함수 : 함수 내부에 비동기로 동작하는 코드를 포함한 함수 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후 완료 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작 X let todos; // GET 요청을 위한 비동기 함수 const get = url =>{ const xhr = new XHLHttpRequest(); xhr.open('GET',url); xhr.send(); xhr.onload=()=>{ if(xhr.stats === 200){ // 1. 서버의 응답을 상위 스코프의 변수에 할당 todos = JSON.parse(xhr.response); } }.. [모던 자바스크립트 Deep Dive] 40. REST API REST : HTTP 를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API : REST 를 기반으로 서비스 API 를 구현한 것 RESTful : REST 의 기본 원칙을 성실히 지킨 서비스 디자인 REST API 의 구성 구성 요소 내용 표현 방법 자원 자원 URL (엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 URI 는 리소스를 표현하는데 집중 행위에 대한 정의는 HTTP 요청 메서드를 통해 해야함 1. URI 는 리소스를 표현해야 한다 리소스를 식별할 수 있는 이름은 동사보다는 명사 사용 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다 HTTP 요청 메서드 종류 목적 .. [모던 자바스크립트 Deep Dive] 39. Ajax, JSON, XMLHttpRequest Ajax 란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 XMLHttpRequest 는 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 전통적인 방식 변경할 필요가 없는 부분까지 포함된 완전한 HTML 을 서버로부터 매번 다시 전송받아 불필요한 데이터 통신 발생 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 (깜빡임) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리 블로킹 Ajax 방식 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에.. [모던 자바스크립트 Deep Dive] 38. 비동기 프로그래밍 동기 처리와 비동기 처리 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 (함수를 실행할 수 있는 창구가 단 하나) 자바스크림트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹 (작업 중단) 발생 동기처리 : 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 (순서 보장) // sleep 함수는 일정 시간이 경과한 이후에 func 함수를 호출 function sleep(func, delay) { const delayUntill = Date.now() + delay.. [모던 자바스크립트 Deep Dive] 38. 타이머 호출 스케줄링 호출 스케줄링 : 함수를 명시적으로 호출하면 함수가 즉시 실행되지만 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수 사용 타이머 함수 1. setTimeout/ clearTimeout setTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케줄링 됨 setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id 를 반환 (clearTimeout 함수의 인수로 전달하여 타이머 취소 가능) const timeoutId = setTimeout(func | code [, delay, param1, param2, ...]); 매개변수 설명 func 타이머가 만료된 뒤 호출될 콜백 함수 delay - 타이머 만료.. 이전 1 2 3 4 ··· 6 다음
