본문 바로가기

Front-End

Utils 모듈 만들기 (feat. import, export) Javascript 모듈 만들기파일별로 나누어진 util 함수들을 한번에 사용할 수 있는 utils 모듈을 만들고 싶어서 모듈을 만들 수 있는 방법들에 대해 알아봄. (주의, 이 글에서는 모듈을 다루는 모든 방법에 대해서 자세히 다루지는 않습니다)모듈로 만들 수 있는 방법은 아래와 같습니다. Browser 의 태그ES6 Modules(ESM) 의 importCommonJS 의 requireAMD 의 define - require이것 이외에도 여러 방법이 존재하지만 오늘 다룰 방법은 import, export 입니다. Import다른 파일에서 모듈을 불러옴.default export 만 가져오기import name from "module-name";named export 가져오기import { print,.. 더보기
화살표 함수 표현식 (arrow function expression) 보호되어 있는 글입니다. 더보기
Interface in Javascript Interface - 인터페이스란 사양에 맞는 값과 연결된 속성키의 셋트- 어떤 Object 라도 인터페이스의 정의를 충족시킬 수 있다.- 하나의 Object 는 여러개의 인터페이스를 충족시킬 수 있다. {test(str) { return true; }} Iterator interface - next 라는 키를 갖고,- 값으로 인자를 받지 않고 IteratorResultObject 를 반환하는 함수가 온다.- IteratorResultObject 는 value 와 done 이라는 키를 갖고 있다.- 이 중 done 은 계속 반복할 수 있을지 없을지에 따라 불린값을 반환한다. {next() {return { value:1, done:false };}} {data: [1, 2, 3, 4],next() {re.. 더보기
CSS Position 에 대하여 Position static | absolute | relative | fixed | inherit 의 다섯가지 속성을 가짐 static - position 속성 값으로 아무 것도 지정하지 않는 경우 기본값으로 사용됨.- CSS 의 Normal-flow(BFC, IFC) 로 계산됨. absolute - 부모 요소가 absolute 이거나 relative 일때까지 거슬러 올라가 offset-parent 를 찾아 계산함.- CSS 의 Normal-flow 계산 대상이 아님. relative - offset 에 따라 배치되며, offset 은 top, left, right, bottom 속성 값을 가짐.- offset 값을 설정하지 않으면 static 과 동일한 기능을 수행함. fixed - 화면 스크롤과 관.. 더보기
CSS 렌더링 에 대하여 CSS 렌더링 'CSS 렌더링'이란 그림을 그릴 영역을 계산하고 영역을 채우는것. 웹에있는 CSS 렌더링 시스템은 여러 분야의 렌더링 시스템을 받아들여 왔기 때문에 난잡하고, 표준화 되어 있지 않다. CSS 는 버전이 아니라 레벨로 관리된다. 1. CSS LEVEL 1 - A4 한장으로 정의할 정도로 별거없음 2. CSS LEVEL 2 + Module 의 개념 추가 - 모듈로 관리되기 시작하면서 모듈별로 버전이 관리되게 되고 CSS3 로 전체 모듈의 레벨을 한번에 관리하는것이 불가능하게됨) 3. CSS LEVEL 2.1 - CSS 2.1 에 포함 된 모듈 중 모듈의 버전이 3 인것들을 CSS 3 라고 부르게 됨) W3C 의 영향력이 약해지면서 Draft 되지 않을 것들을 브라우저에서 적용했고, W3C 에.. 더보기