본문 바로가기

전체 글49

자바스크립트(javascript) 웹 브라우저 스크립팅. [2] DOM Level 2 - 이벤트 전파 W3C에서는 웹 브라우저 애플리케이션에서 이벤트 처리를 표준화하기 위해 "DOM Level2 이벤트 모델"이라는 표준을 제시했다. 자바스크립트(javascript) 웹 브라우저 스크립팅. [1] 에서 정리해본 핸들링 방식은 W3C에서 제시한 DOM Level 0을 기반으로 한 것이다.DOM Level 2 이벤트 모델에는 이벤트를 등록하거나 제거하는 표준적인 방법을 비롯해 이벤트 전파 메커니즘에 대한 표준, 이벤트 핸들링 메서드로 전달되는 인벤트 객체에 대한 표준 등이 포함되어 있다. 물론 DOM Level 2의 모델을 지원하는 거의모든 브라우저는 DOM Level 0 의 표준도 지원할 것이다. (IE 는 9부터 표준을 지키고 있다.) 많은 자바스크립트 라이브러리는 D.. 2017. 8. 29.
웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [2] 자바스크립트 외의 리소스 웹팩의 가장 독특한 특징 중 하나는 모든 종류의 파일을 모듈로 취급할 수 있다는 점이다.즉, 적절한 로더가 있으면 자바스크립트 코드뿐만 아니라 CSS, 글꼴을 비롯한 어떤 파일이라도 모듈로 취급할 수 있다.CSS 관련 로더를 설치한다면 웹팩은 @import 문과 CSS의 URL 값을 분석하고 모든 의존성 트리를 추적한 후 모듈들을 빌드하고 전처리한후 번들로 만들어낼 수 있다. 스타일시트 웹팩은 스타일시트를 처리하는 css-loader와 style-loader라는 두 가지 로더를 제공한다. 두 로더는 각기 다른 작업을 처리한다.css-loader는 @import와 url 문을 찾고 해석하며, style-loader는 계산된 모든 스타일 규칙을 페이지로 추가한다.이러한 두 로더를 함.. 2017. 6. 27.
ES6, ECMAScript 6 의 새로운 것. 자바스크립트2015(javascript 2015) 자바스크립트 2015는 ECMAScript 6 또는 ES6 이라고도 하며, 자바스크립트 언어의 새로운 버전이다.ES6에는 클래스, 모듈, 새로운 변수 선언 키워드와 프로미스를 비롯해 복잡한 애플리케이션을 작성하기 위한 새로운 구문이 많이 추가되었다. 또한 좀더 간결해진 함수 표기법, 템플릿 문자열, 구조 분해와 같이 코드의 표현력을 높이기 위한 새로운 편의 문법(syntactic sugar) 기능도 추가됐다. 클래스 자바스크립트 class는 ES6에 추가됐으며 자바스크립트의 기존 프로토타입 기반 상속에 기반을 두는 편의 문법이다.클래스 구문이 자바스크립트에 새로운 객체 지향 상속을 추가하는 것은 아니지만 훨씬 간단하고 알아보기 쉬운 자바스크립트 클래스 구분으로 객체를 생성하고 상속을 처리할 수 있다. 클.. 2017. 6. 20.
웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1] Front-End 단 개발에서 React.js , Vue.js .. 등을 사용할 때 Node.js, Webpack 을 설치하라느니 뭔가 복잡해 보이는데 사실 뭐 없다. 웹팩이란 ? 최근 몇 년동안 웹 개발은 매우 작은 리소스들과 약간의 자바스크립트가 포함된 웹페이지를 시작으로, 복잡한 자바스크립트와 대규모 의존성 트리를 가지고 있는 다양한 기능을 갖춘 웹 애플리케이션으로 발전했다.이러한 복잡성에 대응하기 위해 아래와 같은 방법을 고안했다. 한 프로그램으로 작동하는 하나의 파일을 여러 파일로 분할하고 구성할 수 있는 자바스크립트 모듈 향후 자바스크립트에서 제공될 기능을 미리 이용할 수 있게 해주는 자바스크립트 전처리기(pre-processor)와 자바스크립트로 컴파일되는 언어 (ex. CoffeeScrip.. 2017. 6. 20.