2018 github page
Github Repository
소개
2018년도에 사용됐던 github page 이다. 나에대한 간단한 소개와 작업물들을 올려놓는 일종의 블로그였지만 지금의 새로운 블로그가 생긴 탓에 잠시 묻어두기로했다.
node.js 를 처음 이용하게 된 사이트이다. 이 때는 노드모듈들과 웹팩 사용법을 익히는데 중점을 두었다. Vallista 님의 이상형월드컵 의 innerHTML 기반 DOM 렌더링기법을 따라해보았다.
Preview
사용한 모듈
Babel
ES6 를 사용하여 코드를 작성하였는데 브라우저에서도 실행이 되게끔 변환해주는 transpiler 입니다.
- babel-core
- babel-loader 자바스크립트 파일을 웹팩에서 번들링하기위해 사용하는 로더입니다.
- babel-preset-env
Webpack
웹팩을 이용하여 소스코드들을 번들링하고 webpack-dev-server 를 사용해 개발시 실시간 빌드를 해줍니다.
- style-loader style 태그를 삽입하여 css에 DOM을 추가
- css-loader webpack에서
.css파일을 읽어들이기위해 사용하는 로더 - file-loader webpack 에서 파일을 번들링하기 위해 사용하는 로더입니다.
- webpack-dev-server 개발시 실시간 빌드를 해주는 모듈입니다.
특징
- innerHTML 기반의 DOM 렌더링
- Vanilla Javascript
- 반응형 웹
배운점
- ES6
- npm 을 이용한 웹 어플리케이션 제작
- SPA를 제작할 때 이용되는 Atomic Design 방법론