끄적끄적

웹팩은 자바스크립트 모듈 번들러입니다. 오픈소스자바스크립트이며, 현재 프론트엔드 개발에 있어 웹팩이 없이 개발을 한다는 것은 상상할 수 없을 정도로 필수로 알아야하는 패키지입니다. 웹팩은 자바스크립트뿐만 아니라 Html,css까지도 번들링을 시키고 파일을 압축,의존성,캐싱관리,개발환경 등 유용한 기능 및 환경을 제공합니다. 물론 Webpack이 없이도 개발은 가능합니다. 예전의 방식대로 cdn방식으로 일일히 불러와서 사용하거나 다른 패키지를 사용하셔도 됩니다. 예를들어 common.js,require.js,grunt,gulp등등 말이죠. 하지만 이 패키지들은 웹팩만큼 광범위한 기능을 제공하지 않습니다. 단순히 모듈 번들러로써의 기능을 제공할 뿐이죠. 기본방식의 아래의 코드를 볼께요. 전에는 이런식으로 필..

자바스크립트에 클로저의 이해 및 구현방법에 대해 알아보도록 합시다. 요즘은 자바스크립트 개발자라면 대부분이 알고 계실 클로저이고, 이것 역시 필수적으로 알아야 할 개념 중에 하나로 꼽히고 있습니다. 클로저 컴퓨터 언어에서 클로저(Closure)는 일급 객체 함수(first-class functions)의 개념을 이용하여 스코프(scope)에 묶인 변수를 바인딩 하기 위한 일종의 기술이다. 기능상으로, 클로저는 함수를 저장한 레코드(record)이며, 스코프(scope)의 인수(Factor)들은 클로저가 만들어질 때 정의(define)되며, 스코프 내의 영역이 소멸(remove)되었어도 그에 대한 접근(access)은 독립된 복사본인 클로저를 통해 이루어질 수 있다.(위키백과) 저 역시 많은 양의 글을 보..

자바스크립트의 키워드는 오랜 기간 var

이번에는 많은 관심을 받고 있는 Vue.js에 대해 알아봅시다. Vue는 수많은 프로젝트에서 AngularJS를 사용하여 구글을 위해 작업하던 Evan You에 의해 개발되었다고 해요. 2014년 2월에 첫 릴리즈를 시작으로 꾸준히 발전하고 업데이트가 진행되고 있고, 대표적인 SPA프레임워크 Angular,Vue,React중 제일 진입장벽이 낮기로 유명하며, Vue.js는 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었습니다. Vue.js의 장점에 대해 알아보죠. 진입장벽이 낮다. Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮습니다. Template과 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer..

우리가 구성한 패키지에 대해 알아보고 먼저 프로젝트를 진행하는게 좋을 것 같아 이번 포스팅은 우리가 환경 세팅에 활용한 패키지 구성에 대해 알아보려 합니다. "dependencies": { "babel-loader": "^8.0.6", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.2.0", "path": "^0.12.7", "source-map-loader": "^0.2.4", "ts-loader": "^6.0.1", "typescript": "^3.4.5", "webpack": "^4.32.2", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.4.1", "webpack-merge":..

본격적으로 타입스크립트 프로젝트를 하기 위한 셋팅은 끝났습니다. 프로젝트를 들어가기전에 알아 두셔야 하는 개념부터 알고 들어가 보도록 합시다. 타입스크립트는 모든 변수나 파라미터, 프로퍼티 등의 타입을 정의 해야 합니다. (실제로 타입정의에 대한 비용 때문에 타입스크립트 도입에 대해 고민을 많이하죠^^) 타입 예제 const numberArray: number[] = [1, 2, 3]; const number: number = 1; const string: string = 'text'; const stringArray: string[] = ['1', '2', '3']; const boolean: boolean = true; function example(param: string): string { ret..

ECMA Script? 아직까지 이게 뭔데? 하는 경우를 주위에 많이 접해 오늘은 ECMA Script에 대해 알아보도록 하려합니다. 적어도 어떠한 변화가 있고 예전과는 개발 방식이 다르다는 인식은 필요한것 같아요. 서론이 길었네요.. ECMA 인터내셔널(ECMA International) ECMA 인터내셔널은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다. 이 기구에서 javascript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해 표준화 되었습니다. ECMA-262 및 ECMA-402 스펙에서 표준화 되었습니다. 그래서 ECMA Script가 뭔데? 즉, ECMA Script란 표준자바스크립트라 생각하시면 되요. 어떠한 버전을 쓰느냐 어떤환경을 셋팅을 하느냐에 따라 자바스크립트..

타입스크립트 프로젝트는 웹팩을 이용해 구현해 보기로 합시다. 먼저 간단히 프로젝트를 구성하기 위해 NPM을 설치합니다. 프로젝트를 설정하기 위해 프로젝트폴더를 생성하고 mkdir typescript-project $cd typescript-project $npm init $npm i webpack webpack-cli npm 패키지를 이용해 타입스크립트 프로젝트를 구성합니다. 타입스크립트 패키지를 인스톨 합시다. $npm install --save typescript ts-loader 프로젝트 구성도입니다. typescript-project |- /build |- base.js |- build.js |- dev.js |- /src |- types |- index.d.ts |- app.ts |- tscon..