CodeSandbox를 통한 코드 공유 IDE 환경 구현

 

프로그래밍 학습이나 교육에 활용될 수 있고, 팀 또는 회사에서 코드를 공유하고 즉각적으로 프로토타이핑 해볼 수 있는 서비스가 있어서 소개해 드립니다. 

 

codesandbox라는 이 서비스는 

CodeSandbox의 미션

2017년에 Ives van Hoorne 와 Bas Buursma에 의해서 설립되었습니다. 

누구나 각자의 생각을 쉽게 만들고 공유할 수 있도록 하는 것이 그들의 미션이었습니다. 

복잡합을 제거하고, 간단하게 협업하며, 모두가 코드를 통해 창조해낼 수 있도록 하고자 합니다. 

 

CodeSandbox의 활용

CodeSandbox를 이용하면, 간단하게 웹 환경에서 프로그래밍을 할 수 있으며, 

 

어떤 설치나 셋팅도 필요치 않습니다. 

 

굉장히 빠르면서, 거의 모든 종류의 언어를 구현해 볼 수 있으며, 실시간으로 업데이트됩니다. 

 

 

CodeSandbox 사용해보기

 

네이버 부스트코스에 있는 모두를 위한 컴퓨터과학 CS50 수업중에 이 서비스를 알게 되었습니다. 

무엇보다 편하고 빠른거 같아서, 활용도가 높을 듯해서 소개해 드립니다. 

더 자세한 사용법이나 기능들은 저도 써보면서 또 기록해보도록 하겠습니다. 

우선은 간단하게 CodeSandbox를 실행해보겠습니다. 

 

1. 브라우저 주소창에 https://sandbox.cs50.io 로 들어가면 네이버 부스트코스에서 공유해주는 환경을 사용할 수 있습니다. 

<<< 다른 체크박스들은 건드리지 않고, Create 합니다.

 

 

 

 

 

 

 

 

2. Github 아이디를 통해서 로그인합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 왼쪽 상단에 있는 New File or Tab를 통해 새로 생성합니다. 

 

 

 

 

 

 

 

 

4. hello.c 로 Create File을 클릭해 줍니다. 

C 확장자는 C언어를 의미합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

#include <stdio.h>

int main(void)
{
    printf("hello, world");
}

5. 아래쪽에 터미널로 .c를 실행시켜줍니다. (enter)

 

정상적으로 실행이 되면, 

 

hello.c 위로 a.out 폴더모양의 아이콘이 생성됩니다.

 

 

 

 

 

 

 6. ./결과 파일 이름을 실행하면 .c가 실행되면서 결과값이 출력되는 것을 알 수 있습니다. 

 

 

 

 

 

 

 

 

 

같은 방법으로 아래의 더하기 문제를 풀어 보실 수도 있습니다. 

#include <stdio.h>

int main()
{
    int a=3;
    int b=5;
    printf("%d", a+b);

    return 0;
}

 

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development