ES6 import.. export.. 문법을 브라우저에서 사용하고 싶지만 안타깝게도 아직까지 대부분의 브라우저에서 es6 모듈을 지원하지 않습니다. 때문에 webpack과 babel이 필요합니다. Babel은 최신 자바스크립트를 ES5 문법으로 변환해주는 역할을 합니다. 그리고 webpack은 모듈 번들러입니다. 간단하게 말하자면 여러 파일들을 모아서 하나의 파일로 만들어줍니다. 웹팩과 바벨을 설정하는 것을 처음부터 진행해 보도록 하겠습니다. 프로젝트 생성 mkdir...

HTML5에 새로 적용된 OffscreenCanvas에 대해서 소개와 예제입니다. OffscreenCanvas에 대해 처음 접하게 된 것은 2018 Deview에서 삼성전자 방진호님이 책에서는 맛 볼 수 없는 HTML5 Canvas이야기 세션에서 였습니다. 참고: https://www.slideshare.net/deview/122-html5-canvas Worker thread에서 Canvas Rendering을 돌릴 수 있다는 것이 너무 매력적으로 느껴져서 개인 프로젝트에 적용해보기로 했습니다. 적용 전에 예제들을 만들어보고 조사하면서 알게 된...

javascript 프로젝트를 처음부터 git, gulp, babel, eslint등을 설정하면서 만들어 보도록 하겠습니다. git & npm git 초기화 git init .gitignore 생성 # npm 디버그 기록 npm-debug.log* # 프로젝트 의존성 node_modules # Mac OS 폴더 속성 .DS_Store # 임시 파일 *.tmp *~ 의존성 설정 npm init 걸프와 바벨 설정 걸프: 자바스크립트에서 가장...

이번 포스팅의 주제는 GitHub Page 에 SPA React App 을 배포하기입니다. 프로젝트를 할 때마다 호스팅을 한다면 자금이 만만치 않고, 로컬 서버를 돌리기에도 쉽지가 않죠. 그런데 고맙게도 GitHub Pages 로 무료로 호스팅을 할 수 있습니다. GitHub Pages 를 이용해서 무료로 호스팅하는 두 가지 방법 중 프로젝트 사이트를 만드는 방법에 대해서 설명드리겠습니다....

혹시 eslint 설정하고 config 나 serviceWorker 와 같은 linting 이 불필요한 파일에서 에러가 나서 해결방법을 찾고 계신가요? 아니면 NODE_PATH 를 설정했는데 eslint 에서 인식을 못해서 고생하시나요? 저는 그랬습니다.. 해결했다!! 하고 새 프로젝트 만들 때 또 찾아보고 몇 번 반복하다가 포스팅을 남깁니다. Eslint + prettier 설정 eslint 설치 우선 vscode 의...