본문 바로가기

Front-End/ETC

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,.. 더보기
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 에.. 더보기
SPA(Single Page Application) SPA(Single Page Application) SPA 는 웹 페이지를 구성하는 방법중 하나다. SPA 는 기본적으로 단일 페이지로 구성된다. SPA 가 아닌 보통의 link tag 를 사용하는 전통적인 웹사이트는 새로운 페이지 요청시 마다 해당 주소로 이동하고 서버통신으로 HTML 코드를 읽어오는 방식을 취하는데, 이것을 서버사이드 렌더링(Server Side Rendering, SSR) 이라고 부른다. 이것은 변경이 필요없는 부분을 포함한 전체 페이지를 갱신하기 때문에 비효율적이다. 하지만 SPA 는 초기 페이지 요청시 모든 정적 리소스를 다운로드 하고, 이후에 페이지 갱신에 필요한 JSON, XML 같은 데이터만 서버를 통해 요청 응답 받는다. 페이지 이동시에는 전체 페이지를 갱신하는 것이 아니.. 더보기
Babel, Polyfill 그리고 Babel-Polyfill Babel - ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler- ES5 이전까지는 표준이 없었고, jquery 가 브라우저 호환성을 해결해줄 수 있기 때문에 필요 없었음- Babel 은 스크립트 자체가 수정되어야 하는 상황으로 새로운 컴파일이 필요할 때 사용함 - 자바스크립트 스펙으로 아직 확정되지 않은 Proposal 스펙이 5개의 Stage 로 구분되어 존재하는데, Babel 은 각각의 Stage 에 대해 Preset 을 제공함 아래의 Arrow Function (=>) 은 ES6 에서 추가된 함수 표현식으로, 화살표 표현식 (=>) 은 Javascript 의 Syntax 가 아니기 때문에 Javscript 가 읽을 수 있는 스크립트로 재 작성 되어 새로 컴파일 되어야.. 더보기