CodeSandBox 사용 방법

CodeSandBox

CodeSandBox는 온라인 코드 에디터입니다.

이클립스 또는 VSCode 같은 개발 도구를 설치하지 않아도 온라인에서 웹 개발 및 간단한 코드를 작성할 수 있습니다.

단, FrontEnd 개발 및 테스트 한정입니다.

 

링크 : https://codesandbox.io/dashboard

CodeSandbox

---

CodeSandBox에서 지원하는 기능 및 특징

1. GitHub 연동
2. 심플한 코드 관리
3. VSCode와 비슷한 UI와 편리한 사용방법
4. 작업한 코드 파일로 다운로드 가능
5. 유료 버전 구매했을 경우 코드 비공개 가능함

---

CodeSandBox 간단한 사용 방법

회원가입은 구글 계정 및 GitHub 계정과 연동 가능하므로 생략합니다.

 

1. Home -> New Sandbox 클릭

 

2. 템플릿 선택

템플릿을 선택합니다. VSCode에서 개발환경을 설정하는 것과 유사합니다.

 

Create Sandbox

• Recently Used Templates : 최근에 사용한 템플릿 선택
• My Templates : 내가 설정한 템플릿
• Offical Templates : CodeSandBox에서 공식적으로 지원하는 템플릿

Explore Templates : Offical Templates와는 다르게 간단한 예제가 존재하는 템플릿

Import Project : GitHub에서 가져오거나 Stackbit에서 프로젝트 생성(Stack은 사용 안 해봐서 모르겠습니다.)

간단한 React 프로젝트를 생성해보겠습니다.

Offical Templates의 React를 선택합니다.

 

3. 프로젝트 생성

간단한 프로젝트가 생성되었습니다.

VSCode 사용하시는 분들에게는 어느정도 친숙한 개발환경입니다.

알고 있는 기능에 대해서만 설명드립니다.

 

상단

1) 현재 로그인 사용자와 버전(Free 또는 Pro)

2) 현재 작업중인 프로젝트 이름

- 최초 생성시 프로젝트 이름은 임의로 작성되며, 클릭 시 이름 변경 가능

3) 현재 웹에서 프로젝트를 보고있는 사용자들

4) 다른 사용자와 공유

5) 저장

- 코드 수정 후 ctrl + s 입력해도 저장됨

 

메인

1) 프로젝트 폴더 및 파일

2) NPM, 외부 소스, 구글 폰트

- React 템플릿으로 선택시 react, react-dom, react-scripts는 자동으로 설정

3) 작업중인 코드

4) 브라우저

- 하단에 콘솔, 에러 및 오류, React DevTools 활용 가능

 

4. 프로젝트 저장 후 확인

- Home -> Recently Viewed Sandboxes에서 확인 가능합니다.

- 최근에 작업한 순서대로 나열됩니다.

- My Drafts에서도 확인 가능합니다.

---

외부(다른 사용자) 코드 수정시

1. 소스 검색

2. 예제 코드 접속

 

3. 코드 수정 전

 

4. 코드 수정 후 저장

- 코드 수정 후 저장하면, 본인의 Drafts에 등록이 됩니다.

- 외부 사용자에게는 영향이 없습니다.