10_codesandbox

Codesandbox

https://codesandbox.io/

CodeSandbox는 브라우저 기반의 온라인 개발 환경으로, 로컬 설치 없이 웹에서 바로 코딩할 수 있는 플랫폼입니다.

주요 특징

즉시 개발 환경

• 브라우저에서 바로 코드 작성 및 실행
• 로컬 환경 설정 불필요
• 다양한 프레임워크와 라이브러리 지원 실시간 미리보기
• 코드 변경사항을 즉시 확인
• 핫 리로딩 지원
• 모바일 반응형 테스트 가능 협업 기능
• 실시간 공동 편집
• 코드 리뷰 및 댓글
• 팀 워크스페이스 제공

지원하는 기술 스택

프론트엔드

• React, Vue.js, Angular
• Svelte, Next.js, Nuxt.js
• Vanilla JavaScript, TypeScript 백엔드 (Sandpack)
• Node.js 서버
• API 개발
• 데이터베이스 연결 스타일링
• CSS, SCSS, Styled Components
• Tailwind CSS, Bootstrap
• CSS Modules

주요 용도

프로토타이핑

• 빠른 아이디어 검증
• UI/UX 테스트
• 개념 증명 (PoC) 개발 학습 및 실험
• 새로운 기술 학습
• 코드 예제 작성
• 튜토리얼 따라하기 포트폴리오
• 프로젝트 데모
• 인터뷰 준비
• 코딩 테스트

요금제

개인 (무료)

• 공개 샌드박스 무제한
• 기본 협업 기능
• GitHub 연동

1. GitHub 저장소 임포트

방법 1: URL로 직접 임포트

• CodeSandbox 대시보드에서 "Import" 버튼 클릭
• GitHub 저장소 URL 입력 (예: https://github.com/username/repository)
• "Import" 클릭하여 프로젝트 생성 방법 2: GitHub 연동
• CodeSandbox에서 GitHub 계정 연결
• 대시보드에서 "Import from GitHub" 선택
• 원하는 저장소와 브랜치 선택

2. 공동작업 설정

실시간 협업 (Live Session)

• 프로젝트를 연 후 우상단의 "Share" 버튼 클릭
• "Start Live Session" 선택
• 생성된 링크를 팀원들에게 공유
• 팀원들은 실시간으로 코드 편집 가능 프로젝트 공유
• "Share" 버튼에서 "Make Public" 또는 "Share with Team" 선택
• 특정 사용자에게 편집 권한 부여 가능
• 이메일 또는 사용자명으로 초대

3. GitHub과 동기화

자동 동기화 설정

• 프로젝트 설정에서 "GitHub" 탭 이동
• "Enable automatic syncing" 활성화
• 변경사항이 자동으로 GitHub에 커밋됨 수동 커밋
• 좌측 사이드바의 Git 아이콘 클릭
• 변경된 파일 확인 후 커밋 메시지 작성
• "Commit & Push" 버튼으로 GitHub에 푸시

4. 협업 워크플로우

권장 방식:

1. 각 팀원이 별도 브랜치에서 작업
2. CodeSandbox에서 실시간 협업으로 코드 리뷰
3. 완료된 기능은 Pull Request로 메인 브랜치에 병합
4. GitHub Actions 등을 통한 자동 배포 설정 주의사항:

• 무료 계정은 공개 저장소만 임포트 가능
• 프라이빗 저장소는 Pro 계정 필요
• 대용량 파일이나 복잡한 빌드 설정은 제한될 수 있음

---

5. 저장소 불러오기