이전에 webpack-dev-server를 처음 적용했을때 참 편하다 생각했다. 근데 뭔가 index.html 말고 테스트 모듈도 실행해서 실제 실행 결과로 테스트 해보고 싶은 생각이 들었다. 구체적으로 예를 들자면 tinymce opengraph 플러그인에서 opengraph 샘플 데이터 말고 실제 opengraph 데이터를 가져오는 것을 보고 싶었다. // 지금 opengraph: { fetch_handler: (url, callback) => { setTimeout(() => { if (url === "http://a.com") { callback({ description: "안녕하세요, TISTORY입니다. 지난 2월 2일부터 시범운영한 로그인 보안 기능을 정식 오픈합니다. 현재까지 3천 여개의 ..

webpack-dev-server는 webpack 빌드를 테스트할때 유용한 http 서버다. 문서에도 간단히 설명되어 있지만 Express의 심플버전이라고 보면 된다. 결과물을 file로 쓰지 않고 메모리에서 빌드해서 테스트해 볼 수 있다. 사용법 먼저 webpack 설정을 다음과 같이 만든다. output.publicPath는 클라이언트가 빌드된 파일에 접근할 수 있도록 서버가 제공할 path이다. // webpack.config.js var path = require("path"); module.exports = { entry: { app: ["./app/main.js"] }, output: { path: path.resolve(__dirname, "build"), publicPath: "/asset..

codemirror에 한참 빠져있을때 간단히 만든 markdown to html 에디터가 있다. 여기에 tistory api로 글 보내기도 붙이고 글 가져오기, 로컬에 임시 저장하기 등등을 붙여보고 싶었는데 솔직히 말해서 엄두가 나지 않았다. 아무래도 코드가 길어질테니 파일을 분리하는 것이 관리하기 편할텐데 분리한 모듈을 관리하고 merge해서 테스트하고 하는 과정이 굉장히 번거롭게 느껴졌다. 그러다가 react 공부하게 되었고, 부끄럽게도 아직 몰랐던 CommonJS도 알게 되었다. react에 webpack을 적용하면서는 눈이 번쩍 뜨이는 것 같았다. 이런 방법이 있는데 왜 그동안 그렇게 고생했던 것일까 싶다. (사실 CommonJS만 알았어도 더 속도가 붙었을 것 같다.) 지금부터 이전에 만들었던 ..

전에 React 체험을 했었는데 그 이후로 별다른 진전이 없다가 이제 조금 시간을 내어 더 공부해보려고 한다. 시작은 역시 시작문서로 하는게 좋을 것 같아서 Getting Started를 읽기 시작했다. 난관 We recommend using React with a CommonJS module system like browserify or webpack. 첫 문장에서 '턱!'하고 막혔다. 너무 오랜시간 javascript 세계를 떠나 있었나보다. 무슨 말인지 하나도 모르겠다. babel로 JSX를 javascript로 변환만 하면 되는거 아닌가 싶었는데 browserify, webpack를 사용한다고 한다. 그 것도 뭔지 모르지만 CommonJS module system도 뭔지 모른다. 빠르게 움직이는 ..