본문 바로가기
반응형

자바스크립트

 (6)
webpack 살펴보기 - (1) 정의와 사용하는 이유 안녕하세요! 오늘은 webpack 살펴보기 - (1) 정의와 사용하는 이유를 살펴보겠습니다. 웹팩(webpack)은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)입니다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 냅니다. webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org webpack은 현재 많은 ..
프론트엔드 - webpack 설정하기 오늘은 webpack을 설정하는 방법을 알아보겠습니다. webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러입니다. webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없습니다. 간단하게 webpack을 설치해봅시다. 다음과 같이 명령어를 입력하여 webpack을 설치합니다. npm install --save-dev webpack webpack-cli 설치가 완료된 이후 package.json 파일에 webpack, webpack-cli가 설치됨을 알 수 있습니다. { "name": "frontend", "version": "1.0.0", "description": "", "main": "..
프론트엔드 - Babel을 이해하고 적용해보자!(트랜스파일러) 오늘은 Babel을 이해하고 적용해보는 시간을 가져보겠습니다. 크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 지원하지만 아직은 IE에서는 11%밖에 지원해주지 않습니다. 따라서 IE를 포함한 구형 브라우저에서 문제없이 동작시키기 위한 개발 환경을 구축하는 것이 필요합니다. 예를 들어보자 IE 같은 구형 브라우저에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있습니다. [1.2.3].map(n => n **n) Babel을 사용하면 위 코드를 다음과 같이 ES5 사양으로 변환할 수 있습니다. "use strict" [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 다음과 같이 명령어를 입력하여..
자바스크립트 - 빌트인 객체(표준 빌트인 객체, 원시 값, 래퍼 객체, 전역 객체) 자바스크립트에서 빌트인 객체란 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공합니다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있습니다. * 표준 빌트인 객체 - 자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math 등 40여 개의 표준 빌트인 객체를 제공합니다. const strObj = new String('Lee'); // String { "Lee" } console.log(typeof strObj); const numObj = new Number(123); console.log(typeof numObj); const boolObj = new Boolean(tr..
자바스크립트(JavaScript) - 정규표현식 정규표현식은 아이디, 비밀번호 유효성 검사와 같이 특정 문자열을 체크할 때 많이 사용됩니다. 문법은 다음과 같습니다 /pattern/i 검색할 패턴과 옵션인 flag로 구성됩니다. 옵션인 flag는 다음과 같이 구성됩니다. g(global) : 매칭되는 다수의 결과값을 기억합니다. m(multiline) : 패턴 내의 문법은 다음과 같습니다. * 그룹에 관련된 패턴 1. a|b : a또는 b => ex) in|and (in 또는 and) 2. (a|b) : 그룹 => ex) (in|and) (in 또는 and의 그룹) 3. (?:) : 찾지만 기억하지는 않음 4. [] : 문자셋, 괄호안의 어떤 문자든 => [a-zA-Z0-9] (a부터 f까지의 문자) 5. ^ : 부정 문자셋, 괄호 안의 어떤 문자가 ..
자바스크립트(JavaScript) - 객체와 객체 리터럴 오늘은 객체 리터럴에 대해서 공부하는 시간을 가져보겠습니다. 목차 1. 객체란? 2. 객체 리터럴에 의한 객체 생성 3. 프로퍼티 4. 메서드 5. 프로퍼티 접근 6. 프로퍼티 값 갱신 7. 프로퍼티 동적 생성 8. 프로퍼티 삭제 9. for-in 문 1. 객체란? - 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체입니다. - 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체입니다. - 원시 타입은 단 하나의 값을 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조입니다. - 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됩니다. - 자바스크립트에서 사..

티스토리툴바