[에디터] 안드로이드폰 에디터 - 깃허브 - vscode 연동하기

 spck editor는 폰으로도 코드를 작성해볼 수는 없을까해서 알게된 앱입니다. 다른 앱보다 인터페이스가 깔끔하기도 하지만 무엇보다 앱이 '한국어' 지원이 된다는걸 보고  선택! 파일 생성, 작성까지 하면 vscode의 live server처럼 미리보기도 간단합니다. 이왕 써보는 김에 활용성을 높이기 위해 깃허브, PC와도 연동해봤습니다.

 

준비물

• 깃허브 회원가입
• 폰 어플리케이션 spck editor 설치
• vscode 회원가입 후 PC에 vscode 설치

 

작성자 사용 기종

• 모바일 : 갤럭시 폴드4 / 안드로이드 버전 12 / One UI 4.1.1
• PC : 맥북에어 실리콘 m1 / 소프트웨어 버전 몬터레이 12.4

---

폰 - 깃허브 연동 방법

spck editor 앱과 깃허브를 먼저 연동해기로 합니다.

 

1. 설치한 spck editor에서 ★깃허브 계정★으로 로그인합니다

* 설정에서 language를 한국어로 변경할 수 있습니다(영어 기준으로 설명합니다)

* 제가 깃허브 계정으로 로그인 했기 때문에 다른 로그인 방식 구글, 페이스북의 케이스는 어떻게 되는지 알 수 없습니다

 

 

 

2.  깃허브에서 레포지토리를 생성합니다

 

 

3.  생성한 레포지토리와 깃허브에 연동된 spck editor를 확인합니다

* repository 는 깃허브 개인 페이지에서 바로 확인 가능

* 연동 확인은 깃허브 프로필 클릭 - settings - applications - Authorized OAuth Apps

 

생성한 레포지토리

spck editor에 깃허브 계정으로 로그인하면 깃허브 연동 목록에 표시됩니다

 

4.  spck editor 프로젝트 생성

spck editor에서 create 버튼 클릭 - clone

url을 입력하라는 창이 뜹니다.

깃허브에서 앞서 만들어놓은 레포지토리를 클릭하면 https 주소가 뜨는데 그걸 spck editor에서 요구하는 url 입력칸에 적으면 됩니다.

• Username: 사용하는 username
• author email: 사용하는 username

 

ok 클릭을 하면 spck 에 새로운 프로젝트(깃허브 레포지토리 이름)가 생성되어 있는걸 확인할 수 있습니다. 프로젝트를 클릭하면 상단에서 트리 아이콘을 볼 수 있는데 해당 부분이 깃허브에 생성한 repository와 연동해주는 기능입니다. 

여기에서 지금 커밋이나 풀, 푸쉬를 눌러도 내 깃허브에는 아무 업데이트가 이루어지지 않습니다. 연동하기 위해서는 credentials라는 추가 작업을 해주어야 합니다.

 

 

 

5.  Credentials

트리 아이콘 - 제일 오른쪽에 있는 책 아이콘(Branch:Master) - credentials

• provider: github
• Username: 사용하는 username
• token: 깃허브 토큰 생성하기 참고
• author email: 사용하는 username

 

입력후 ok를 클릭하면 credentials 등록까지 완료 되었습니다.

 

 

 

 

6. Commit

이제 index.html 파일을 하나 생성해봅니다.

그리고 깃허브에 있는 내 레포지토리에게 '커밋'이라는 행동으로 새로운 파일을 생성했다고 알려줍니다.

 

트리 아이콘 - 책 아이콘 - commit All

이렇게 spck에서 수정하거나 추가한 내용들이 깃허브에 전송되었습니다. 이때 커밋 메시지 부분은 꼭 작성해야합니다.

 

 

 

 

7.  Push

트리 아이콘 - 책 아이콘 - Push

이제 깃허브 레포지토리에서 제가 폰으로 생성한 index.html 파일을 확인할 수 있습니다.

 

 

---

깃허브 - vscode 연동 방법

1. 폰과 연동된 깃허브를 이제 vscode와 연동해보기

vscode를 실행한 후 하단에서 깃허브로 로그인을 합니다.

 

clone repository 버튼 클릭

 

생성했던 spckeditortest 주소 클릭

 

 

그럼 이 레포지토리와 연동된 폴더, 파일을 내 컴퓨터 어디에 설치할 것인지 묻는 창이 뜹니다. (코드 파일을 모아놓는 폴더로 지정합니다.)

이제 vscode도 폰, 깃허브와 연동이 끝났습니다.

 

 

2. vscode와 연동하기: PC Commit - push

index.html에 div를 하나 만들고 저장하면 왼쪽 바에 있는 트리아이콘에서 1이라는 표시가 뜹니다

spck editor에서 한것처럼 변경 내용에 대한 메세지 작성 후 커밋 클릭, 그리고 Sync Changes까지 완료합니다.

깃허브 레포지토리에 변경된 내용이 반영된 것을 확인 할 수 있습니다. 

 

3.  PC 작업 후 연동된 다른 기기에서 업데이트 다운 받기

• PC에서 작업하다 커밋하고 외출해서 spck editor로 보려고할 때는 앱을 한번 종료한 다음 다시 켜서 트리아이콘 - 책 아이콘 - pull 을 클릭하여 PC에서 커밋한 내용을 업데이트 받습니다.
• spck editor에서 작업한 내용을 PC로 볼 때는 반대로 spck editor에서 커밋 - push까지 한 다음 vscode 혹은 깃허브로 확인하면 됩니다.