[vscode.dev] 브라우저 기반 에디터 vscode.dev 소개

무료 개발 툴 중에서 가장 인기가 많다고해도 과언이 아닌 코드 에디터 vscode의 웹 브라우저 버전이 정식으로 나왔다. 최신 브라우저에서 https://vscode.dev 를 접속하면 확인할 수 있다.

브라우저에서 동작하기 때문에 갤럭시탭이나 아이패드와 같은 테블릿이나 휴대폰에서도 접속하여 사용이 가능하다. 물론 접속한 브라우저와 기기OS의 상황에 따라 로컬 프로젝트 사용가능 유무가 갈리며, 디버깅에 제약이 있다.

 

이번시간엔 일반적인 PC 환경 외, 테블렛에서도 적용 가능한 방법으로 vscode.dev 를 맛보기로 한다.

 

1. Github에서 리포지토리 만들기

기능을 제대로 사용하기위해선 Github 계정이 필요하므로 가입이 선행되어야 한다. Github에서 신규 리포지토리를 만든다.

 

2. vscode.dev에서 프로젝트 열기

[Open Remote Repository] 버튼을 누르면 상단에 Command Palette 가 표시된다. `Enter a remote url, or select a remote provider` 에 생성했던 리포지토리 URL을 입력한다.

입력 후 아래에 나타난 `Open Github Repository` 를 눌러주면 아래와 같이 Github 로그인 동의 관련 팝업창이 나타난다. Allow를 누른다.

 

Github 로그인 인증까지 완료하고 나면 아래와 같이 vscode.dev에 생성한 프로젝트 파일이 표시된다.

 

3. helloworld 소스코드 만들기

테스트를 위해 helloworld.js 를 생성한다. 생성방법은 설치형 VSCode와 유사하다.

 

생성 후 아래와 같이 소스코드를 작성해보자.

console.log("hello! vscode.dev!!")

 

4. Commit 하기

수정한 소스코드를 리포지토리에 반영하기위해 `Source Control` 메뉴에서 생성한 소스코드를 커밋한다.

커밋이 완료되면 github 페이지에서 확인이 가능하다.

 

이것으로 vscode.dev에 대해 간략히 알아보았다. 웹 환경이기에 찾아오는 빌드 및 디버깅의 한계와 일부 인기 언어를 제외하면 제대로 제공되지 않는 스니펫 지원에 의해 한계를 느낄 수 밖엔 없다. 그러나 PC나 노트북을 사용할 수 없는 상황에서 코드를 분석하거나 간단한 수정작업이 필요할 때 보다 편리하게 활용할 수 있지 않을까 싶다.

(물론 자본이 어느정도 여유가 된다면 codespace를 사용하여 빌드 디버깅 한계를 해결할 수도 있다. 😂)

 

이것으로 vscode.dev를 간단하게 맛보았다.