본문 바로가기

javascript/📖 study39

[11주차 스터디]49장-Babel과 Webpack 이요한 ES6+/ES.NEXT 개발환경 구축 Babel과 WebPack을 이용한 ES6+/ES.NEXT 개발 환경 구축 매년 새롭게 도입되는 ES6이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각 따라서 최신 사양으로 프로젝트를 진행하려면 구형 브라우저에서 문제 없이 동작 시키기 위한 개발환경을 구축하는 것이 필요하다. 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. 다음과 같은 이유로 ESM 보다 별도의 모듈 로더를 사용하는 것이 일반적 IE를 포함한 구현 브라우저는 ESM을 지원하지 않는다. ESM을 사용하더라도 트랜스 파일링이나 번들링이 필요한 것은 변함 없음 ESM이 아직 지원하지 않는 기능(bare import 등..)이 존재 Babel Babel은 트랜스 파일링 도구.. 2022. 4. 8.

[11주차 스터디]48장-모듈 모듈 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리 이때 모듈이 성럽하려면 모듈 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 자신만의 파일 스코프를 갖는 모듈은 기본적으로 비공개 상태 즉, 모듈내부의 변수, 함수 객체 등 모두 캡슐화 되어 다른 모듈에서 접근할 수 없다. 그러나 모듈은 애플리케이션이나 다른 모듈에 의해 재사용 되어야 의미가 있음, 따라서 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 하다. 이를 export라고 한다. export된 모듈은 다른 모듈에서 재사용 가능하고, 이때 공개된 모듈은 사용하는 모듈을 모듈 사용자(module consu.. 2022. 4. 8.

[11주차 스터디]47장-에러 처리 에러 처리 try ... catch ... finally 에러 처리 구현하는 방법은 크게 두가지 예외 적인 상황이 발생 시 반환 하는 값을 if 문, 단축 평가, 옵셔널 체이닝 등으로 직접 확인하는 방법 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법 try ... catch ... finally 는 두번 째 방법 3개의 코드 블록으로 구성 try { // 실행 할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // err 변수명은 다른 거 해도 됨 // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행 된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 .. 2022. 4. 8.

[11주차 스터디]46장-제너레이터와 async / await 제너레이터와 async/await 제너레이터란? ES6에서 도입 된 제너레이터는 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수 입니다. 일반 함수와의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 이때 함수의 제어권을 호출자에게 넘기는 것을 양도(yield)라고 함 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다. 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로 부터 상태를 전달 받을 수도 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다. 제너레이터 함수의 정의 제.. 2022. 4. 8.

[10주차 스터디]45장-프로미스 프로미스 비동기 처리를 위한 콜백 패턴의 단점 함수 내부에 비동기로 동작하는 코드를 포함하는 함수를 비동기 함수라고 함 비동기 함수 내부에 비동기로 동작하는 코드가 있는 경우? -> 비동기 함수가 종료된 이후에 완료됨 즉, 비동기 함수 처리 결과를 외부로 반환하거나 상위 스코프 변수에 할당하면 기대한 대로 동작되지 않음 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // ① 서버의 응답을 반환한다. return JSON.parse(xhr.response); } console.. 2022. 4. 2.

[10주차 스터디]44장-REST API REST API REST(Representation State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한것을 의미 즉, http를 기반으로 네트워크 상에서 자원의 상태를 주고받는 것을 REST라고 한다. REST의 기본원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현. REST API의 구성 REST API는 3가지 요소로 구성 REST는 자체 표현 구조로 구성 되어, REST API 만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원(resource) 자원 URL(엔드포인트) 행위(verb) 자원에 대한 행위 HTTP 요청 메서드 표현(repre.. 2022. 4. 2.

이전 1 2 3 4 ··· 7 다음

티스토리툴바