(🇰🇷) 🏄‍♂️ Github.surf를 소개합니다! — 코드를 서핑하기 가장 빠르고 쿨한 방법 (CLI, Extension 지원)

(ko) https://github.surf

봄이오고 있어요. 서핑을 위한 계절이죠.

무슨 문제를 해결할까요?

github에서 코드를 탐색하고 싶을 때 어떻게 하나요? master/ main 의 코드, 로컬브랜치와는 다른 리모트 브랜치의 코드를 확인할때는 어떻게 하나요?

우리는 이때 github로 이동하여 제공되는 기본 코드 보기에서 브랜치를 선택하고 파일을 네비게이팅하여 코드를 봅니다. 이 방법은 별도의 작업 공간에서 원하는 코드를 볼 수 있는 가장 빠른 방법이기 때문에 로컬 브랜치를 깔끔하게 유지할 수 있고 커밋되지 않은 파일을 유지할수 있습니다..

하지만 이건… 좀 귀찮습니다. 이것이 우리가 github.surf 를 만든 이유입니다 (ghub1 영감)

그리하여 surf 등판! 로컬 작업시 현 디렉토리에서 surf . -b other-branch 를 타이핑 하면 브라우저 환경에서 해당 브랜치에대한 vscode 뷰어로 코드를 서핑할수 있습니다. (자세한 내용은 아래 CLI 에서)

이러한 기능들이 제공됩니다

• ✅ 깃헙 지원 — 깃헙 레포지토리를 브라우저상의 vscode 환경에서 서핑할수 있습니다.
• ✅ 공식 크롬 확장자 — Surf 를 레포지토리상의 버튼을 통해 런칭할수 있습니다.
• ✅ 공식 CLI — 터미널에서 새로운 서핑을 열기위한 surf . 커맨드
• 깃랩 지원 (gitlab.surf) (다음주 공개)
• 비트버킷 지원 (bitbucket.surf) (다음주 공개)
• 프라이빗, 커스터 scm 을 위한 surf.codes
• 브라우저 환경에서의 리모트 컴파일과 터미널 지원R (준비중)

기본적으로 vscode on browser 라고 생각하시면 됩니다. 항상 접근하능하고, 현제 나의 관심코드에만 집중할수 있죠. (빠른 데모 → github.surf)

간단한 사용법

Surf 에서 코드를 보려면 간단히 .com 을 .surf 로 바꾸면 됩니다. gitlab 과 bitbucket 에서도 동일합니다. (gitlab.surf, bitbucket.surf)

아래와 같이 브라우저 안의 vscode 가 나타납니다.

좀더 편하고 똑똑한 사용법 — 브라우저 Extension 과 함께

크롭 확장자를 설치하면 (Firefox 에서도 가능), 깃헙레포를 서핑할때 귀여운 🏄‍♂️ Surf 버튼이 생기게 됩니다.

확장자는 README 의 설명을 통해 설치가능합니다. (개인적으로 제일 좋아해요)

😎 boss 처럼 사용하기 — CLI

https://github.com/bridgedxyz/surf-cli

vscode 의 code . 처럼, surf . 커맨드를 지원합니다.

CLI 설치하기

# === cli 설치 ===
npm -g install @bridged.xyz/surf
		# 또는 yarn 을 통해 설치
		yarn global add @bridged.xyz/surf
# 그리고 서핑 🏄!
surf .

surf .

또한 이는 서브 에디터로서의 역할도 수행할수 있습니다. 이는 다른 브랜치를 서핑할때 매우 유용하게 사용될수 있습니다.

# 다른 브랜치에서 서핑하기
surf -b <branch-name>

그리고 하나더.. “surf ..”

# `code .` 을 실행해요. surf 커맨드에 중독 되었을때를 대비해서 만들었어요.
surf ..

surf-cli 에대해 github 에서 더 알아볼수 있습니다.

잠시만요! 이것까지 해주면 정말로 끝.

제한없는 사용을 위해서는, 깃헙 토큰을 키 아이콘이 있는 탭에서 설정 해 주어야 합니다.

github.surf 위한 토큰 발급은 여기서

• github — 60 리퀘스트 / 시간당 (토큰 미발급시) (토큰 발급시 5000)
• gitlab — 5 리퀘스트 / 분당
• bitbucket — 60 리퀘스트 / 시간당

토큰과 사용 리밋에 대해 자세히 알아보기

내장된 탑 언어 / 프레임워크

이곳과 surf-code-extensions 에 명시된것처럼,

아래 확장자를 내장으로 지원합니다.

• Vue
• JS/TS/JSX/TSX (React, Svelete 와 다른 js 기반 프레임워크들)
• Dart & Flutter
• Elm
• Kotlin
• Scala
• Ocaml
• Vetur
• Jupyter Notebook — deepmind/deepmind-research 데모
• Material theme

지금은 이런것들을 준비하고 있어요

• PWA 지원
• 엔터프라이즈 계정 지원 (github enterprise)
• 커스텀 확장자, 플러그인 지원
• 모바일 스크린 지원
• 리모트 CLI 와 빌드 지원
• 개인 래포를 위한 더 강력한 경험 제공

리모트 컴파일 / 앱프리뷰 (ui 앱) & CLI 호환성 — 완전한 all-in-one 웹 IDE 를 향하여.

플러터, 리액트와 같은 UI 프래임워크들을 포함한 레포지토리를 위해, 라이브 컴파일 프리뷰 기능을 준비하고 있습니다. 가장큰 문제는 과금문제일것 같습니다. 저희는 과금을 받을 예정이 없고, 무료로 이 서비스를 계속 제공하고 싶기에, 빌드를 위한 리소스와 퍼포먼스 문제를 해결해야 합니다.

해당 기술은 appbox 와 console 이라는 프로젝트에서 구현 / 실험 된 바 있습니다. 리모트 컴파일 데모를 보시려면 assistant 를 참고하셔도 좋습니다.

모든 소스와 디자인은 깃헙에 공개되어 있습니다

bridgedxyz/github.surf

bridgedxyz/surf-cli

• 영문 미디움

우리 팔로우 해요

Please subscribe / follow to our medium, github, youtube, facebook, twitter and instagram for latest news on how we change developer’s life easier.

감사합니다

special thanks to contributors all around the world making this world-shaking technologies! we are always welcoming designers, developers, researchers, copywriters, or any type of creators all around the world.

우리는 브릿지드 입니다. 우리는 유저 인터페이스를 재정의 할것입니다.

bridged.xyz