CodeSandbox 사용방법

로그인 & Fork

• 우선 https://codesandbox.io/ 로 이동해서. 회원가입 및 로그인을 하세요.
• 그 다음. 숙제 제출용으로 생성된 템플릿 "Today's Blueprint" 를 클릭하여 이동합니다.
• 해당 템플릿은 챌린지 과제 페이지의 우측 상단에서 발견하실 수 있습니다. 아래 캡쳐 이미지를 참고하세요.

  

• "Today's Blueprint" 템플릿을 Fork 합니다.
• Fork 할 때, 반드시 Fork 글자 옆 화살표를 눌러 자신의 아이디를 선택하고 포크해 주세요.

  

제출 방법

• 템플릿에 그대로 코딩을 합니다.
• 코딩을 완료한 후, 커맨드/ctrl+S 를 눌러 저장합니다.

  

• VS Code로 연동하여 작업하고 싶다면, 화면 상단 오른쪽의 'VS Code'버튼을 누릅니다.

  

• 코드샌드박스에서 안내되는 익스텐션을 설치해야 합니다. 익스텐션 설치 후에 VS Code로 자동 연동됩니다.
• 연동 후, VS Code에서 작업하면 자동으로 코드샌드박스에 반영 이 됩니다.
• 코딩을 완료한 후, 코드샌드박스 편집창 중앙에 있는 프로젝트 명 옆 화살표를 눌러 'Copy link'를 선택합니다.
• 자동으로 과제 링크가 복사됩니다.

  

• 복사된 링크를 챌린지 웹사이트에서 제출하면 끝!

2024 업데이트

• 현재 코드샌드박스는 처음 생성하면 무조건 Private (비공개) 로 작성됩니다.
• 과제를 제출하기 전, 설정을 꼭 Public (공개) 으로 바꿔주세요.
• 코드샌드박스 편집창 오른쪽 상단 Shre 버튼을 누르면 공개 설정을 변경할 수 있습니다.

  

  • 설정 변경 후, 코드샌드박스 편집창 중앙에 있는 프로젝트 명 옆 화살표를 눌러 'Copy link'를 선택하고 복사된 링크를 제출해주세요.

• Public (공개) 으로 변경한 후에는 코드 수정시에 아래와 같은 경고 메세지가 뜹니다.
• 코드 수정이 필요하면 Private (비공개) 로 바꾸고 수정하고, 작성이 완료된 후 반드시 Public (공개) 으로 바꾸어 링크를 제출해주셔야 합니다.

  

• Codesandbox 이용시 작성할 수 있는 템플릿 갯수가 제한되어 있습니다.

  • 코드샌드박스 Draft 제한은 10개, Sandbox 제한은 20개 입니다.
  • Draft 개수가 10개를 넘어가면 아래와 같은 이미지가 보이게 됩니다.
  • 이전 챌린지(심사가 끝난 챌린지) 파일을 삭제해 주세요.
  • Draft 폴더가 아닌 Sandbox 혹은 Devbox 폴더로 포크해 주세요.

• 과제를 제출한 후 링크가 시크릿 모드에서도 확실히 퍼블릭으로 보이는지 확인해주세요!

정상적으로 제출되었나요?

• 정상적으로 제출되었다면. 아래와 같이 저장되었다는 문구가 뜨며, 확인 이메일이 옵니다.
• 확인 이메일이 오지 않으면. 정상 제출된 것이 아니므로. 유의하시기 바랍니다.
• 마감 시간 (새벽 6시)까지 해당 링크를 계속 변경. 업데이트 할 수 있습니다.

  

이미 제출한 링크라고 떠요!

• 이미 제출한 링크라고 뜨는 경우 Codesandbox에서 프로젝트 명을 변경한 후 다시 링크를 제출해 주세요.
• 코드샌드박스 편집창 중앙에 있는 프로젝트 명 옆 화살표를 눌러 'Rename'을 클릭합니다.

  

• 이름 변경 후 엔터를 누르면 변경 완료!

링크 제출 시 유의사항

• .io 로 끝나는 링크로 보내주시면 코드를 볼 수 없습니다!

  • (좋은 예시) https://codesandbox.io/s/kw0x07o955
  • (잘못된 예시) https://213vk4vl6j.codesandbox.io/

• 코딩챌린지 정답은 그 다음날 챌린지 웹사이트를 통해 알려드립니다.
• 정상적으로 제출되었다면 제출 확인 이메일이 옵니다. 이메일이 안 왔다면, 정상 제출이 안 된 것이니 제출 확인 이메일이 왔는지 꼭! 체크 해주세요!
• 매번 챌린지가 바뀔 때마다, 매번 새로운 샌드박스를 생성하셔서 제출하셔야 합니다. 제출하는 링크가 매번 달라야 합니다!
• 저장을 확실히 한 후 제출하시기 바랍니다! 저장 안 하시고 빈 화면 제출하시는 분들이 은근 많습니다! 저장 확실히 때리고 크롬 시크릿 화면에서 링크 확인한 다음에 제출하세요!
• 해당 링크를 다시 클릭해보셔서 제대로 제출이 되었는지도 확인하시기 바랍니다. 간혹, 텅 빈 링크를 잘못 보내셔서 졸업 못 하시는 분들이 있습니다! 꼭~ 더블 체크해 주세요.
• 반드시 코드를 public(전체 공개) 로 작성해주셔야 정상 제출됩니다! 제출 전 확인해주세요!
• 제출 확인 이메일이 오지 않고, 정상 제출이 되지 않는다면? 챌린지 과제 제출 FAQ를 먼저 읽고 에러를 확인해주세요.
• 자주 발생하는 에러 메시지 대처법

  • "URL isn't valid. Make sure it's from codesandbox. io"
  • Codesandbox 템플릿을 이용하여 과제를 만들고 제출해주세요.
  • "이 링크는 이미 제출되었습니다."
  • Codesandbox에서 프로젝트 명을 변경한 후 다시 링크를 제출해 주세요.

VSC 에서는 정상 작동 하다가, CodeSandbox에 복사-붙여넣기 하니 제대로 출력 안 될 때

• 괜찮습니다. 걱정안하셔도 되어요!
• VSC에서 정상 작동하는거 확인하셨다면, 일단 붙여넣기 해서 보내주셔도 좋습니다.
• VSC로 자동 연동해서 작업하지 않았다면 아래 방법을 이용해주세요.

  • 해당 코드를 복사-붙여넣기 (컴퓨터 ->웹 코드샌드박스로) 합니다.
  • 여전히 샌드박스에서 에러가 나면. 무시하세요.
  • VSC에서 정상 작동했다면. 그냥 그 코드 복-붙하고.
  • 저장하신 후. 생성된 링크를 제출하시면 됩니다.

CodeSandbox가 왜인지 모르지만 잘 작동 안 될 때!

• 왼쪽 상단 네모 옆 화살표를 눌러, 메뉴에서 Restart Sandbox를 선택합니다.

  

그 외 에러 발생 시

• 항상 깃허브 로그인을 하세요~!
• You reached the limit of server sandboxes: 무료로 사용할 때 최대 15개까지입니다. 필요 없는 샌박들을 삭제해보세요.
• 저장 오류: restart server 하세요.
• 502 bad Gateway: 켜놓고 있다가 다른 브라우저가 열렸거나 했을 때 그런 에러가 잘 나는 거 같아요. 샌드박스 안에서 Browser() 있는 거 다 닫아버리고 서버 재시작하고 난 뒤 package.json같은데서 저장 한번 다시 하면 팝업창 뜨면서 에러 안 나는 새로운 브라우저 열릴 겁니다.
• Container Error: 샌드박스 완전히 끄고 조금만 기다렸다가 다시 접속해보시면 정상적으로 작동됩니다.

코딩 챌린지 결격 기준

• 나중에 집계할 때 결과가 아래와 같을 경우, 자동 결격 처리됩니다.

  • 제출한 내용이 텅 비어있거나,
  • 최소 조건을 이행하지 못한 경우,
  • 누군가의 코드를 무작정 베낀 것으로 추정된 경우입니다.

졸업 타임라인

• D-Day. 챌린지 2주 혹은 6주 진행 끝.
• 1~2일 후 최종 졸업생 확정. Dashboard 에 자동으로 쿠폰 발급.

코드 챌린지 과제를 유출하지 말아주세요!

• 간혹 개인 블로그 등에 과제 및 솔루션을 공유하시는 분들이 계십니다.
• 챌린지의 묘미를 위하여, 해당 과제 내용 및 솔루션을 유출하지 말아 주세요!