Web Standard

HTML의 텍스트 노드(Text node) 는 다루기 까다롭다. 특히 동적으로 삽입되거나 생성될때 더욱 그렇다. 예시를 살펴보자. 하나의 글이 있습니다. p태그에 텍스트 노드를 하나 더 추가 하면 : let el = document.getElementById('el'); el.appendChild(document.createTextNode(' 글을 하나 더 추가 합니다.')); console.log(el.childNodes.length); // 2 글을 하나 더 추가 한 뒤, childNodes 의 개수를 로그로 찍어보면 2개라고 나온것에 주목하자. 이 노드들은 단일 문자열 이지만 동적으로 추가 되었기 때문에, 각각 분리된 노드로 취급된다. 경우에 따라서는 하나의 텍스트 노드로 다루는게 나은데, norm..

addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 모습이다. element.addEventListener('click', doSomething, false); 1번째 인자는 이벤트명이다. 2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다. 3번째 인자는 useCapture 라 불리는 불린값으로, 이벤트 버블링이나 캡쳐링을 사용할것인지 나타낸다. 위의 코드는 꽤 익숙하다. 특히 1, 2번째 인자는 모두 아는 내용일 것이다. 하지만 3번째 인자값을 다르게 줄 수 있다는 것은 많이 알려지지 않았다. 새로운 인자는 options 객체로, 이렇게 생겼다 : element.addEventListener('click', doSomething, { capture: f..

최신 크롬, 파이어폭스에서 사용 가능한 ES2019(ES10) 의 5가지 기능 Object.fromEntries( ), trimStart( ), trimEnd(), flat(), flatMap() 1. Object.fromEntries() 객체를 배열로 바꾸는 것은 ES2017 에서 Object.entries( ) 메소드로 가능하다. 이 메소드는 객체를 인자로 받아 [key, value] 형태의 배열로 반환한다. const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]] 반대로 배열을 객체로 변환하려면 어떻게 해야 할까? 파이썬 같은 몇몇 언어는 dic..

React Navigation 사이트 에서 참고한 내용입니다. withNavigation 은 감싸고 있는 컴포넌트에 navigation prop 를 전달해주는 Higher-Order 컴포넌트이다. 이는 navigatio prop 를 컴포넌트로 직접 전달할 수 없거나, 깊게 중첩된 자식 컴포넌트로 전달하고 싶지 않을때 유용하다. 이를 해결하기 위해선, MyBackButton 에 navigation prop 를 전달하면 된다 : . 또는, withNavigation 를 함수를 이용해 navigation prop 를 자동으로 제공해줄 수 있다. 이 함수는 Redux의 connect 함수와 비슷하게 동작하는데, dispatch prop 대신 navigation prop 를 전달한다. 이 방법을 통해, navig..

이전 포스트 : 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 확장자가 ..