Standalone React + Github page deploy

혼자 갑작스러운 아이디어가 떠올랐을 때 바로 코드부터 시작해보고 싶을 때가 있다. 그럴 때를 위해 미리 준비해두면 좋다.


저는 이 방법을 더 이상 활용하지 않습니다. 새로운 방법은 https://medium.com/p/9f20e31ccba4 여기에 게시되어 있습니다.

멍때리다가 보면 가끔 간단한 웹페이지를 만들고 싶을 때가 있다. 최근에는 프론트엔드 기술이 워낙 발달해서, 데이터 저장이 큰 의미가 없다면 순전히 HTML+CSS+JS 기술만으로도 그럭저럭 동작하는 프로토타입을 만들 수 있다. 이를테면 가위바위보나 사다리타기 게임, 혹은 직장 동료 놀리기 같은 것들이 괜히 만들고 싶어질 때가 있다.

요즘엔 툴바없이 output 페이지만 랜더링을 해주는 여러 online code editor 들(jsfiddle, codepen)이 있고 쉽게 시작할 수 있지만, 막상 스크립트를 막 작성하다보면 평소에 로컬에서 쓰던 IDE나 Sublime Text 등에 비해 편의기능들이 너무 구리고, 브라우저의 한계상 속도나 다른 탭과의 혼돈 등으로 인해서 코드가 빨리 작성되지가 않는다. 게다가 이미지 등의 추가 요소들을 연결하기가 엄청 까다롭거나 되지 않는다.

내가 원했던 조건은 많지는 않고 대략 아래와 같았다.

나의 바람…
  • 평소에 로컬에서 코딩하던 에디터들을 그대로 쓸 수 있고,
  • 이미지나 다수의 리소스(js, css) 등을 분할해서 사용할 수 있고,
  • 배포가 쉬워서 즉시 지인들에게 공유해서 사용하게 할 수 있어야 하고,
  • 기왕이면 es6, scss 등의 편리한 기술들도 쓸 수 있고,
  • 로컬에서 다수의 프로젝트를 관리할 때 귀찮은 작업이 없고,
  • 프로젝트별 로컬 서버를 띄우거나하는 사전작업도 없고,
  • 걸프나 웹팩 등 번들링 명령도 필요 없고,
  • 무료로 할 수 있는 방법

꼼수를 많이 굴린 결과 ‘본인의 에디터+크롬+Github Page’를 이용하는 방법이 가장 무난하다고 결론을 내렸다. 데헷!

크롬 세팅

폴더에 index.html 달랑 만들어놓고 크롬으로 불러들이면 잘 열린다. 그런데 같은 폴더에 base.js 등 리소스를 분리하고 호출하면 보안 문제상 거절이 된다.

물론 파이썬이나 php나 node로 localhost:8888 등을 띄우는 방법도 있는데,토이프로젝트 하나 만드는데 이것도 굉장히 귀찮다. 이럴려면 터미널로 들어가서 해당 폴더로 가야하고, 여러 토이프로젝트를 돌리기 위해서 토이프로젝트만큼 서버를 돌리든가 셋팅하든가 귀찮은 일들이 생긴다. 그러지 말고 크롬을 실행할 때 아래의 명령어로 실행하면 된다. 길고 외우기 어려우니까 애플 스크립트로 만들어놓고 실행시키면 된다. 자, 이렇게 했으면 이제 그냥 무식하게 file://... 로 열어도 상대경로로 정적 리소스들을 마음껏 불러올 수 있다.

open /Applications/Google\ Chrome.app — args — allow-file-access-from-files

윈도우에서는 아래와 같이 하면 된다고 한다. 윈도우를 써본지 오래되어서 기억은 잘 안나지만 단축 아이콘의 등록정보에 가면 실행시 옵션을 지정해 줄 수 있는 것으로 기억한다.

"C:\PathTo\Chrome.exe" --allow-file-access-from-files

Github Page

깃헙페이지를 이용하면 공개된 저장소에 올려놓은 Static Assets 들을 웹서버처럼 바로 엑세스할 수 있도록 해준다. 여러 토이 프로젝트들을 담고 있는 폴더를 깃헙페이지용 저장소로 만들어 두면, 수정사항 생길때마다 push 하여 배포할 수 있게 되는 것이다.

여러개의 토이 프로젝트를 서브 폴더로 두게되는 셈이지만 어차피 각 폴더별로 뭐 있는 것도 없고, 이거 만들고 셋팅하는 것도 일이니 다 구겨 넣는게 오히려 더 좋은 것 같다.

토이프로젝트 시작

최적화 이런거 신경쓰지말고, 일단 코드 치자마자 바로 동작할 수 있도록 index.html 을 만들어두었다. 걸프나 웹팩 이런거 없이 react.js + es6 + sass(scss) 가 런타임상에서 동작할 수 있도록 CDN 들을 연결해두었다. 아래 소스를 참고하여 토이프로젝트 저장소에 두고, commit & push 하면 https://{yourName}.github.io/{folderName} 으로 항상 공개되는 식이다. 이런식으로 마구마구 쓰잘데기 없는 토이 프로젝트들을 만들어보자.

DB가 필요한 경우라면?

일단 깃헙페이지를 통해서 공개하는 프로젝트들이므로 보안이 중요하거나 진지한 프로젝트는 아닐 것이다. 하지만 웹페이지를 껐다켜도 무언가 남아있어야한다면 내가 예전에 만들어놓은 또 다른 쓰잘데기 없는 프로젝트인 https://opendb.gitools.net을 사용해보는 것도 좋다. 이 사이트는 인증 이런거 없이 그냥 아무도 안 쓸것 같은 board 값 지정해서 저장하고 불러오면 되는 사이트이다. jQuery 기준으로 소스도 생성되므로 쓰기 쉽다. 물론 자료가 날아가는 것에 대해서는 책임지지 않는다.


저는 이 방법을 더 이상 활용하지 않습니다. 새로운 방법은 https://medium.com/p/9f20e31ccba4 여기에 게시되어 있습니다.