이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다. CSSStyleSheet 인터페이스 인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다. 아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다. console 창에 로그를 찍어보면 사용 가능한 메소드..
CSSOM 이란? MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 ..
참고 : https://www.freecodecamp.org/ 객체 생성 기본과 접근자동차, 가게, 새 같은 모든 것들이 객체이다. 어떤 속성이 있는가? 자동차는 바퀴를 가지고 있고, 가게에서는 물건을 팔며, 새는 날개를 가지고 있다.이런 속성들이 객체를 만든다. 유사한 객체들은 동일한 속성을 공유하지만 그 값은 다양하다는 점에 주목하라. 예를 들어 모든 자동차에는 바퀴가 있지만, 바퀴 숫자는 차종마다 다른것 처럼 말이다. 자바스크립트의 객체는 실제 객체를 모델링하는데 사용되며 실제 객체와 마찬가지로 속성과 기능을 부여한다. 이런 컨셉으로 작성된 오리(duck) 객체를 살펴보자. duck 객체는 2개의 속성과 값을 가지고 있다. 이름은 Aflac, 다리의 수는 2 이다. 속성의 값을 얻기 위해서는 점(...
설정 Configuration웹팩 설정(구성) 파일은 객체로 내보내지는(export) 자바스크립트 파일이다. Node.js CommonJS 모듈을 통해 다음이 가능 :require(...)를 통해 파일 가져오기(import)require(...)를 통해 npm 유틸리티 사용자바스크립트 표현식 사용 가능 (예. ? : 연산자)자주 사용하는 값을 상수 혹은 변수로 선언 가능구성의 일부를 생성하기 위해 함수를 작성하고 실행 가능 기술적으로는 가능하지만 피해야 할 것들 :웹팩 CLI를 사용할때 CLI 인수에 접근 (대신 사용자 정의 CLI를 만들거나, --env 사용)비결정적인 값 내보내기 (웹팩을 두번 실행해도 동일한 출력파일이 생성되어야 함)긴 구성 파일 작성 (대신 여러 파일로 나눌것) 이 문서를 떠나 가..
플러그인 Plugins플러그인은 웹팩의 중추이다. 웹팩 자체는 웹팩 구성에서 사용하는 동일한 플러그인 시스템으로 설계된다. 또한 로더가 할 수 없는 일들을 수행할 수 있다. 구조웹팩 플러그인은 apply 메소드를 가지고 있는 자바스크립트 객체다. 이 apply 메소드는 웹팩 컴파일러에 의해 호출 되며, 엔트리 컴파일 라이프사이클에 접근 할 수 있도록 한다. ConsoleLogOnBuildWebpackPlugin.jsconst pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, compilation => { co..
로더 Loaders로더는 모듈의 소스 코드에서 적용되는 변환이다. import나 로드를 통해 파일들을 전처리 할 수 있다. 그러므로 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, 프론트엔드 빌드 과정을 처리하는 강력한 방법을 제공한다. 로더는 (TypeScript 같은) 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL로 변경할 수 있다. 심지어 로더는 CSS파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다. 예시로더를 사용해서 CSS파일을 로드하거나 TypeScript를 자바스크립트로 변환할 수 있다. 필요한 로더 설치 : npm install --save-dev css-loader npm install --save-dev ts-loader 확장자가 ..
- Total
- Today
- Yesterday