꾸준한 개발일기

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..

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 값의 위치를 가리키는 상징적인 이름이다. * 변수에 여러 개의 값을 저장하는 방법은? 변수는 하나의 값을 저장하기 위한 매커니즘이다. 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다. 단, 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다. var user = { id: 1, name: 'Lee' }; var user = [ { id: 1, name: 'Lee'}, { id: 2, name: 'Kim'} ]; 변수 이름(변수명)은 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름, 변수값은 변수에 저장된 값이다. 변수..

화면 정가운데에 떠야하는 팝업창이 모니터 끄트머리에 잘려서 보이는 오류가 발생했다. 디버깅을 해보니 코드에서 설정하지 않은 스타일이 적용되어 내가 지정한 스타일이 먹지 않았다. 이를 해결하기 위해서는 두 가지 방법이 있다. 1. !important 사용 { top:-766px; left: 0px !important; z-index: 4 !important; } 지정한 스타일에 !important를 넣어 우선순위를 주면 된다. element.style에 있는 스타일 값이 적용되지 않고 내가 css파일에서 설정한 스타일 값이 적용되었다. 2. 자바스크립트로 스타일을 제거 document.querySelector('#id').removeAttribute('style'); querySelector와 remove..