1. github gist 소개

github gist는 github에서 제공하는 간단하고 강력한 코드 스니펫 저장 및 공유 도구입니다. 프로그래머가 코드 조각, 메모, 구성 파일 등을 웹에 저장하고 다른 사람들과 공유할 수 있도록 설계된 서비스입니다.

gist는 github 계정을 사용하여 관리되며, 소규모 프로젝트나 짧은 코드 공유에 적합합니다.

github gist는 프로그래머에게 필요한 “작고 빠른 저장소” 같은 역할을 합니다. 코드 작성과 저장이 빠르고, 공유와 협업까지 가능하니 dartpad와 함께 활용하면 간단한 플러터 코드 실험에서 실제 개발 공유까지 손쉽게 할 수 있습니다.

github gist를 사용하는 이유

목적	이유
학습 및 공유	공부하며 작성한 코드를 동료나 친구들과 쉽게 공유하고 의견을 나눌 수 있습니다.
백업 및 기록	짧은 코드 조각이나 중요한 스니펫을 저장해두고 나중에 다시 참고할 수 있습니다.
빠른 프로토타이핑	간단한 테스트 코드를 빠르게 작성하고 저장해두기 적합합니다.

2. github gist의 주요 특징

1) 빠르고 간단한 코드 공유

github gist는 작성한 코드를 몇 초 만에 온라인에 올릴 수 있습니다. 저장한 gist는 고유 URL로 제공되므로, 해당 링크를 다른 사람들과 쉽게 공유할 수 있습니다.

2) 버전 관리

gist는 Git을 기반으로 하므로 코드 스니펫의 모든 수정 이력이 저장됩니다. 여러 사람이 협업하며 코드 버전을 관리할 때 유용합니다.

3) 공개/비공개 설정

gist를 공개로 설정하면 누구나 볼 수 있고, 검색도 가능합니다. 비공개로 설정하면 해당 URL을 아는 사람만 접근할 수 있습니다.

4) 다양한 언어 지원

github gist는 자동으로 코드 언어를 인식하고 구문 강조(syntax highlighting)를 적용합니다.

5) Embed 지원

다른 웹사이트나 블로그에 코드 스니펫을 삽입할 수 있도록 Embed 기능을 제공합니다.

이를 통해 Gitgist로 작성하고 해당 주소를 이용해 다트패드에서 바로 실행해볼 수 있습니다.

3. github gist 사용 방법

1) github에 접속하여 가입하기

github에 접속합니다. github 계정이 필요하며, 로그인 후 이용할 수 있습니다.

2) 새 gist 작성

기본적으로 github로 들어가면 Gitgist는 우측프로필을 이용하여 접속이 가능합니다. 아래 링크로 이용해서 들어가셔됩니다.

gitgub gist

gist description에 설명을 입력해주고 filename including extention에 counter.dart라고 입력하여 dart코드임을 명시해줍니다. 그리고 앞서 dartpad에서 작성한 flutter 코드를 입력해줍니다.

Create secret gist 또는 Create public gist 버튼을 클릭하면 선택한 공개 상태로 저장됩니다.

3) 작성한 gist 관리

github 계정의 프로필에서 Your gists 섹션에서 저장된 모든 gist를 확인하고 관리할 수 있습니다. 수정, 삭제, 댓글 달기 등이 가능합니다.

4. github gist와 dartpad 연결하기

dartpad에서 작성한 코드를 github gist로 저장하면, 다음과 같은 이점이 있습니다:

목적	이점
코드 보존	브라우저 탭을 닫아도 코드가 사라지지 않습니다.
공유 용이성	gist URL을 통해 다른 사람들과 Dart 코드를 공유할 수 있습니다.
협업 강화	다른 사람이 gist에 댓글을 달거나, gist 내용을 기반으로 새로운 코드를 작성할 수 있습니다.

앞서 작성한 코드를 DartPad를 이용해 열어보겠습니다. 우선 제가 public으로 만든 gist를 들어가보면 상단 URL의 계정/ 뒤어 주소가 있습니다. 저는 bcbf95795e73390998f7bb6d56ee0e0b이라고 나옵니다.

https://dartpad.dev/?id=bcbf95795e73390998f7bb6d56ee0e0b 

형식으로 사용하면 gist로 작성한 코드가 바로 dartpad로 열리면서 코드를 이용해볼수있습니다.

다음은 직접적으로 Vsidual Studio Code에 Flutter를 셋팅해보겠습니다.

5. Next

• Flutter Setting