동적 테이블 생성기

이 앱은 HTML table Tag의 colspan, rowspan, thead,   th scope="col", tbody, th scope="row"을 동적으로 생성해주는 앱이다.
사용 방법을 익히고픈 사람은 아래 링크로 가자.
동적 테이블 생성기 사용법

스펙

• ES6(ES2015)
• HTML5, CSS3(라지만 별로 쓴 건 없다.)
• Webpack, Babel
• Jasmin, Karma, ESLint
• Bootstrap, Font-Awesome

사용 이유

보기 귀찮은 사람은 개발하기로 건너뛰자.  

• ES6(ES2015)
  ES5의 단점을 보완하고 생산성이 높으니 안 쓸 이유가 없다.
  크로스 브라우징을 위해선 어쩔 수 없이 바벨을 써야하지만,
  크롬에서는 잘 돌아간다, 뭐 바벨 돌리면 모던 브라우저에서도 다 잘 돌아간다.

• HTML5, CSS3
  HTML5는 좀 더 문서 각 부분 부분에 의미를 부여하고자 시멘틱 태그만 썼다.
  CSS3는 float 보다 flex로 위치 잡는 게 훨씬 편해서 썼다.
  box 모델과 flex 모델이 비교 대상이었나...   또 둘 다 모던 브라우저에서는 잘 돌아가니..

• Webpack, Babel
  만들다 보니 생각보다 앱의 규모가 커졌다.
  사전에 미처 파악하지 못해 큰 덩어리들을 모듈 단위로 잘게 쪼개는 일을 해야했다.
  ES6의 모듈을 구현한 브라우저가 없어서 어쩔 수 없이 모듈 번들러인 Webpack을 쓰게 됐다.
  바벨과도 쿵짝이 잘 맞으니 복습할 좋은 기회였다.

• Jasmine, Karma, ESLint
  맨 처음엔 귀찮아서 일일이 콘솔 창에 다 찍어보았다.
  근데 이게 경우의 수가 너무 많다보니 일일이 확인하지 않으면 어디서 에러가 터질지 모른다.
  물론 Jasmine으로 테스트를 다 한다고 했지만...
  성공하겠거니~ 하고 귀찮아서 빼먹은 테스트도 존재하고,
  또 내가 빼먹은 테스트도 존재한다.
  혹시나 발견하면 제보를...
  여튼 테스트 해야할 경우가 워낙 많다보니 하나씩 테스트 코드로 정리해나가다 보니
  내가 어떻게 코딩을 해야할지 답이 나오기도 했다. TDD의 장점을 다시 한번 깨닫게 된 것 같다.
  근데 나중에는 너무 귀찮고 예측이 가능한 부분은 앱을 먼저 개발하기도 했다.
  또한 Karma와 Jasmine을 연동하면 headless하게 개발할 수 있어서 편하다.
  테스트 파일이나 앱 파일이 아무리 늘어나도 두렵지 않다.
  또한 ESLint는 사용 방법도 겸사겸사 익힐 겸, 세미콜론이나 따옴표 같은 거 어디 빼먹은 데 없나
  간단하게 체크하는 정도로만 썼고, 아직은 코딩 컨벤션이 없어서 필요성을 잘 모르겠다.

• Bootstrap, Font-Awesome
  원래는 안 쓸려고 했는데 디자인이 너무 나빠서 어쩔 수 없이 썼다.
  그래봤자 도긴개긴이지만 뭐...
  부트스트랩의 버튼 클래스와 Font-Awesome의 아이콘은 정말 사기케인 것 같다.

개발하기

파일을 압축해서 다운받건, 클론을 해서 프로젝트 디렉토리로 이동하고,

npm i

로 설치하면 된다.

웹팩, 카르마, 자스민, 바벨, ESLint 전부 다 로컬로 깔아서 실행하게 하였다.
전역에다 설치하면 너무 충돌이 많이 나는 것 같다.

기본적으로 app/src 안에 개발용 파일이, app/dist 안에 배포용 파일이 만들어진다.
실제 엔트리는 1개이며 app/app.js이고, class 폴더 안의 모듈들과 의존성을 가진다.

app/src/tests 안에는 테스트에 쓰일 앱과 테스트 코드가 존재한다. 궁금한 사람은 테스트 코드를 작성하고 npm test를 입력하면 카르마가 뜨면서 텟트 결과를 보여준다.
테스트 설정을 바꾸고 싶은 사람은 karma.conf.js를 보도록 하자.
karma.debug.js는 카르마가 뜨자마자 debug.html로 이동하는 코드이므로 크게 신경쓰지 않아도 된다.

ESLint의 환경설정은 .eslintrc.js, Babeld의 환경설정은 .babelrc다.
npm run lint를 입력하면 린트를 돌려서 html 파일로 바로 결과를 볼 수 있다.
터미널에 띄워서 보는 것보다 훨씬 편하다.

웹팩은 두 가지 버전이 존재하는데 개발용(webpack.config.dev.js)과 배포용(webpack.config.div.js)이 존재한다.
개발용은 따로 번들링 된 파일을 만들지도 않고서 쓴다.
또한 컴파일 되는 시간은 제일 짧아야 한다. 배포용은 컴파일이 오래걸려도 되니 용량이 작은 게 중요하다.

npm start를 입력하면 개발용 서버가 열리면서 브라우저도 함께 열리고,
npm run build를 입력하면 app/dist에 실제로 배포할 파일들이 생성된다.

마치며...

혹시나 도움이 되었다고 생각하면다면 주변에 널리 널리 알려주시고,
이슈 날려주시면 제가 힘 닿는데까지 해볼게요!
깃헙 스타도 한 방 박아주시고, 블로그에도 댓글 달아주시면 더 힘 날 것 같네요.
4일 밤낮을 샜더니 넘나 졸리군요... 전 이만 자러 가야겠습니다.