react-live demo 실행

왜 React Live 라이브러리에 관심을 가지게 되었냐면 React를 이용해서 간단하게 웹사이트 클론을 하고 있었습니다. 그런데 React 사이트를 클론 하던 중에 Live Jsx Editor라는 기능이 있어서 찾아봤더니 알게 된 게 React Live 였습니다.

React Live의 적용 기술

prism

PrismJS/prism

buble

bublejs/buble

react-simple-code-editor

satya164/react-simple-code-editor

prism-react-renderer

FormidableLabs/prism-react-renderer

Demo 실행 방법

1. 그냥 https://react-live.netlify.com/로 들어갑니다.

2. 직접 Demo를 수정할 수 있는 방법

React Live의 코드가 저장되어 있는 곳으로 가서 클론을 해줍니다. React Live Repository에 기여를 하고 싶다면 fork를 해서 에러를 고치거나 기능을 추가한 뒤 PR을 하시면 됩니다.

 

그리고 클론된 react-live/demo 폴더로 간 다음에 다음 명령어를 입력해줍니다.

 

npm run prebuild:npm

해당 명령어는 "cd .. && npm i && npm run build" 이런식으로 구성되어 있습니다.
해석을 해보면 현재 위치에서 상위 폴더로 이동한 후에 필요한 패키지를 다운받고
npm run build를 실행하겠다는 의미입니다.

 

npm run build 명령어는 "next build && next export"로 구성되어 있습니다.
처음에 이걸 봤을 때 next가 뭔지 몰랐는데 SSR이나 SEO에 도움을 주는 React Framework라는
사실을 알게되었습니다.

prebuild를 하면 루트 폴더에 dist폴더가 생성되고, 그다음에 npm run build를 하면 .next, out 폴더가 만들어집니다. 만들어진 폴더가 어떤 역할을 하는지 모르겠습니다. (나중에 알아보도록 하겠습니다.)

그리고 마지막으로 npm run start을 입력하면 드디어 Demo를 체험할 수 있는 서버가 열리게 됩니다. 다음과 같이요.

 

ready - started server on http://localhost:3000

 

그 주소로 들어가면 다음과 같은 화면이 나오는데 React 웹사이트의 Live Jsx Editor와 같은 기능을 체험해볼 수 있습니다.

 

제가 더 많은 정보를 찾아보지는 않아서 모르겠지만, 이것보다 더 효율적으로 Live Jsx Editor를 적용할 수 있는 방법이 있을 것입니다. 그래서 해당 내용을 계속 찾아보고 있고, 최종적으로는 React 웹사이트에서 제공하는 Live Jsx Editor와 똑같이 동작하는 기능을 제 클론 프로젝트에 적용하고 싶습니다.