꾸준한 개발일기

1. Babel 대표적인 트랜스파일러임 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이이다. 이를 해주는 것이 트랜스 파일러이다. 트랜스파일링이 필요한 이유는? 모든 브라우저가 ES6의 기능(최신기능)을 제공하지 않기 때문에 ES5코드(구기능)으로 변환시키는 과정이 필요하기 때문이다. 1.1 Babel 설치 # 프로젝트 폴더 생성 $ mkdir esnext-project && cd esnext-project # package.json 생성 $ npm init -y # babel-core, babel-cli 설치 $ npm install --save-dev @babel/core @babel/cli 생성된 package.json { "name": "esnext-project",..

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 1. REST API의 구성 REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. 구성요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 * 페이로드란? 전송되는 데이터를 의미 데이터를 전송할 때 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어 데이터 전송의 효율과 안정성을 높이는데 이 때, 보내고자 하는 데이터 자체를 페이로드라 함 2. REST API 설계 원칙 1. URI는 리소스를 표현해야 한다. 리..

1. Math 프로퍼티 1.1 Math.PI 예제 01) 원주율 PI 반환 Math.PI; // 3.141592653589793 2. Math 메서드 2.1 Math.abs 예제 02) 절대값 반환 Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0 Math.abs(null); // 0 Math.abs(undefined); // NaN Math.abs({}); // NaN Math.abs('string'); // NaN Math.abs(); // NaN 2.2 Math.round 예제 03) 소수점 이하를 반올림한 정수 반환 Math.round(1.4); // 1 Math.round(1.6); // 2 Math.rou..

1. 렉시컬 스코프(정적 스코프) 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함 예제3) const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 foo 함수와 bar 함수는 모두 전역에서 정의된 함수이기 때문에 상위 스코프는 전역임 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값(상위 스코프에 대한 참조)은 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정됨 2. 함수 객체의 내부 슬롯 [[ Environment ]] 함수는 자신의 내부 슬롯 [[Environment]..

객체 const obj = { a: 'hello', b: 30, c: true, d: {} }; 예시로 하나의 객체를 만들었다. Object.keys() console.log(Object.keys(obj)); // ['a', 'b', 'c', 'd'] 키를 배열로 얻는 코드이다. Object.values() console.log(Object.values(obj)); // ['hello', 30, true, {…}] 값을 배열로 얻는 코드이다. filter와 map을 사용하여 json 형태의 데이터로 변환하기 const obj = { a: 'hello', b: 30, c: true, d: {} }; this.feature = []; // 새로 생성할 객체 선언 Object.keys(obj) .filter(..