분류 전체보기

    FrontEnd/Deep Dive

    [JS] DeepDive(48) 모듈

    모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소이다. 모듈이 성립하기 위해선 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다. 모듈의 모든 자산은 캡슈로하되어 다른 모듈에서 접근할 수 없으며 즉 모듈은 애플리케이션과 분리된다. 하지만 애플리케이션과 모듈이 완전히 분리된다면 모듈은 사용하는 의미가 없다. 따라서 공개에 필요한 부분에 한정해서 선택적으로 공개한다. 이게 export이다. 모듈 사용자는 모듈이 공개한 자산 중 일부나 전체를 선택하여 자신의 스코프로 불러올 수 있으며 이를 import라고 한다. 자바스크립트와 모듈 자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기위한 제한 적 용도를 목적으로 태어난 언어이다. 따라서 타 언어와 비교할때 부족한 점이 몇가지 있는데 대표적으로..

    FrontEnd/Deep Dive

    [JS] DeepDive(47) 에러처리

    에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. { // 매개변수 f에 전달된 인수가 함수가 아니면 TypeError를 발생시킨다. if (typeof f !== 'function') throw new TypeError('f must be a function'); for (var i = 0; i < n; i++) { f(i); // i를 전달하면서 f를 호출 } }; try { repeat(2, 1); // 두 번째 인수가 함수가 아니므로 TypeError가 발생(throw)한다. } catch (err) { console.error(err); // TypeError: f must be a function } 에러의 전파 에러는 호출자 방향으로 전파되며 콜 스택의 아래방향으로 ..

    FrontEnd/Deep Dive

    [JS] DeepDive(46) 제너레이터와 async/await

    제너레이터 ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시적으로 중지했다가 필요한 시점에 다시 재개할 수 있는 특수한 함수이다. 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 2. 제너레이터 함수는 함수 호출자와 함수 상태를 주고받을 수 있다. 3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수는 function* 키워드로 선언하며 하나 이상의 yield 표현식을 포함한다. // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMe..

    FrontEnd/Deep Dive

    [JS] DeepDive (45) 프로미스

    자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용한다. 이러한 콜백 패턴은 가동성이 나쁘고 에러처리가 곤란하다는 문제가 있다. 콜백 헬 GET요청에 의한 함수의 예시를 하나 보자 // 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..

    [JS] DeepDive(44) REST API
    FrontEnd/Deep Dive

    [JS] DeepDive(44) REST API

    REST는 HTTP/1.0 과 1.1의 스펙 작성에 참여했으며 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이필딩의 2000년 논문에서 처음 소개되었다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 표현한다. REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이며 REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API의 구성 API는 자원,행위,표현 세가지 요소로 구성된다. 자원(Resource) 자원 URI(엔드포인트) 행위(Verb) 자원에 대한 행위 HTTP 요청 메서드 표현(Representations) 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 1. URI : 리소..

    [JS] DeepDive(43) Ajax
    FrontEnd/Deep Dive

    [JS] DeepDive(43) Ajax

    Ajax Ajax란 JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 WebAPI인 XMLHttpRequest 객체를 기반으로 동작한다. Ajax이전의 웹 페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 렌더링했다 즉 화면이 전환될때마다 새로운 HTML을 전송받았다. 이러한 방식은 단점이 많았다. 1. 변경할 필요가 없는 부분까지 포함된 HTML을 서버로부터 매번 받아야 함 2. 변경할 피룡가 없는 부분까지 렌더링을 다시 해야함 -> 화면이 깜빡이는 현상 발생 3. 동기 방식으로 동작하기에 서버로부터 응답이 ..

티스토리툴바