간단하게 웹앱을 시험하고 싶을 때

React + Github Page

홍구

예전에 내가 좋아하는 웹에디터를 통해서 간단하게 리액트 페이지를 작성하고 배포하는 것에 관한 포스팅을 한 적이 있다. 저 방법을 이용하면 익숙한 에디터를 통해서 간단하게 테스트하고 배포할 수 있어서 좋았는데, 최근에는 저 방법을 쓰지 않는다. 가장 치명적인 것은 단일 페이지로 빠른 시작은 가능하나 모듈 번들러를 적극 활용할 수 없다는 단점이 있었다.

최근에는 아래 두가지 방법 중 하나로 진행하는 것을 선호한다.

1. creact-react-app + github page

터미널에서 creact-react-app my-project 한 번만치면 사용가능하고 HMR까지 되는 리액트 프로젝트가 구동된다. 여기에서 쓰고 싶은 모듈들 다 설치하고 깃헙 페이지에 배포하는 것이 간편하다.

  1. 프로젝트 생성 create-react-app my-project-name
  2. 필요한 모듈 설치 및 코드 작성 yarn add ...
  3. package.jsonhomepage: "." 를 지정하여 정적파일을 상대경로로 지정(깃헙 페이지내 폴더별로 프로젝트 관리를 위함)
  4. 정적 파일 생성 yarn build
  5. 배포

2. codesandbox.io

웹상에서 모듈 설치, 번들링 배포 가능한 주소까지 모두 한 번에 완성되므로, 아주 간단한 코드를 테스트하기 좋다. 다만 개인적으로 VS Code를 활용하는데, 이렇게 익숙한 툴을 쓰지 못한다는 것이 단점이다. 그냥 급하고 손하나 까딱하기 싫을 때 이용한다(타이핑은 어떻게 치지;)

홍구

Written by

홍구

tyle.io(Co-CEO), whooing.com(CEO)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade