codesandbox 사용하기

codesandbox를 사용하면

현재 작성한 소스에 대한 결과를 오른쪽 Brower창에서 실시간으로 확인 할 수 있다.

 

 

 

vscode와 codesandbox 연동하기

https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects 

CodeSandbox - Visual Studio Marketplace

install 하여 연동.

 

---

 

codesandbox 에 로그인 후 사이트 우측 상단의 Create Sandbox를 클릭.

자바스크립트만 사용시 Vanilla 를 선택.

 

---

 

github과 연동

기존의 repository 사용시 import 하고 새로 생성시 create.

link sandbox라 적힌 파란색 버튼이 생성되는데 그것을 누르면 github에 commit할 수 있게 된다.

 

 

 

vscode에서 내용을 작성하면 codesandbox의 코드도 자동으로 바뀐다.