CodeSandbox와 Github 연동

본 포스팅은 CodeSandbox와 Github 연동하는 방법을 소개합니다. CodeSandbox 버전에 따라 스크린샷이 일치하지 않을 수 있습니다.

개요

CodeSandbox는 웹 브라우저에서 코드를 작성할 수 있는 온라인 컴파일러다. CodeSandbox는 FrontEnd 개발자들이 사용하는 다양한 라이브러리를 제공하며 React, Next, Node와 같은 라이브러리를 로컬 PC에 설치하지 않고 웹 브라우저에서 사용할 수 있다.

 

그리고 CodeSandbox에서 생성한 프로젝트를 폴더별로 관리할 수 있으며 사용자가 폴더를 추가하거나 제거할 수 있다는 장점이 있다.

로컬 PC에서 React 프로젝트를 생성할 때마다 create-react-app 명령어를 입력하고 dependencies를 설정하는 과정이 번거롭고 시간이 많이 걸렸는데 CodeSandbox를 사용한 이후 React 프로젝트를 생성하는 시간이 많이 단축되었다. CodeSandbox에서 React 프로젝트 생성 후 프로젝트를 다운로드하면 되기 때문이다.

 

하지만, CodeSandbox가 망하거나 서버에 이상이 있는 경우 내가 작성한 소스들이 전부 사라질 수 있기에 CodeSandbox에 작성한 소스를 백업하는 습관을 기르는 좋다.

 

본 포스팅은 CodeSandbox와 Github 계정을 연동하여 CodeSandbox에서 React 프로젝트를 생성하고 Github에 올리는 과정과 Github에 존재하는 Repository를 import 하는 과정을 소개한다.

 

CodeSandbox와 Github 연동

CodeSandbox 메인 사이트 이동 후 'Sign In'을 클릭한다.

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

 

GitHub, Google, Apple 계정을 연동할 수 있는데 본 포스팅은 Github와 연동하는 게 목적이므로 'Sign in with GitHub'를 선택한다.

 

'Sign in with GitHub'를 선택하면 팝업창이 활성화되는데 Github ID와 Password를 입력한다.

반응형

CodeSandbox에서 Repository 생성

Github 계정으로 로그인했으면 CodeSandbox 메인 사이트로 이동한다. 새로운 React 프로젝트를 생성하기 위해 'Create Sandbox'를 선택한다.

 

React를 선택하면 새로운 프로젝트가 생성된다. 만약 React가 조회되지 않는다면 우측 상단의 검색 창을 활용한다.

 

신규 프로젝트를 생성하면 React 기본 템플릿을 제공한다. Template 상태에서는 프로젝트의 이름을 변경하거나 Github에 새로운 Repository를 생성할 수 없다.

 

코드를 수정하거나 'Ctrl + S' 단축키를 누르면 프로젝트가 익명의 이름으로 변경되며 GitHub 상태 창이 달라진 것을 확인할 수 있다.

 

저장소(repository) 이름을 입력하고 'Create new repository on GitHub'를 클릭하면 CodeSandbox의 프로젝트가 Github에 생성된다. 참고로 repository의 이름에 한글이 포함된 경우 repository가 비정상적으로 생성된다.

 

Github에서 새로운 Repository를 확인할 수 있다.

 

CodeSandbox에서 Repository 불러오기

반대로 Github의 Repository를 CodeSandbox에 import 할 수 있다. 이번에는 위에서 생성한 Respository를 CodeSandbox에 import 하는 과정을 설명한다.

 

Github에서 import 하려는 Repository의 URL을 복사한다. 여기서 주의할 점은 상단의 URL을 복사해야 한다는 것이다.

상단의 URL이 아닌 Code > Local > HTTPS에서 URL을 복사하면 URL 뒤에 '.git'이 존재한다. '.git'이 포함된 URL을 CodeSandbox에서 Import하면 "GraphQL error not found" 에러 메세지를 표시하므로 반드시 상단의 URL을 복사한다.

 

CodeSandbox의 메인페이지로 이동한 다음 'Create Sandbox'를 선택한다. 다이어로그에서 'Import from GithHub'를 선택하고 위에서 복사한 URL을 붙여 넣기 후 'Import'를 클릭한다.

 

Repository에서 불러온 프로젝트를 확인할 수 있다.

최근에 티스토리 스킨을 변경하기 위해 HTML, CSS, JavaScript를 자잘하게 작업해야 하는 일이 많아졌다. Local PC에서 개발 환경을 세팅하는 게 번거로워서 CodeSandbox를 이용하고 있으며 국내에 자료가 많지 않아 차근차근 정리하려고 한다.