[VsCode] 원격으로 페어 프로그래밍을 해보자 (Live share)
재택 중에 동료와 페어 프로그래밍을 해보기로 했습니다.
동료분께서 진행 중인 웹 프로젝트에 참여하게 되어 간단한 버그 수정과 기능 추가를 하기로 했고 태스크 볼륨은 크지 않았지만 일단 제가 전체적인 코드를 잘 모르기 때문에 그때그때 옆에서 물어보면서 빠르게 적응할 수 있었습니다.
프로젝트 구조를 설명하자 다음과 같습니다.
Project(root)
⌞ server
⌞ client
최상위 폴더 밑에 서버(Node)와 클라이언트(React)가 있었고 각각을 로컬에서 실행하여, 페어 프로그래밍으로 수정한 코드의 실행 화면을 서로의 컴퓨터에서 볼 수 있게 하고 싶었습니다.
VsCode의 Live Share라는 익스텐션을 사용했고 여러 가지 세팅 과정에서 시행착오가 있었기에 팁을 작성해 봅니다. 제 생각엔 메인으로 진행하시는 분이 세팅을 잘해주셔야 공유받는 분들이 어려움 없을 것 같습니다.
공식 문서에서는 세션 생성자를 호스트(Host)라고 하고 이 세션에 접속하는 사람을 게스트(Guest)라고 합니다.
먼저, 호스트의 설정을 시작해 보겠습니다.
Live Share 탭에서 Share 버튼을 눌러 세션을 만듭니다.
그러면 공유 링크가 생성이 되고 (처음 세션 생성 시 자동으로 클립보드에 복사되며 혹은 Invite participants를 눌러도 링크가 복사됩니다. 링크 예시 : https://prod.liveshare.vsengsaas.visualstudio.com/join?{영문숫자조합})
그 후 터미널에서 서버와 클라이언트에서 각각 로컬에서 실행합니다. 이렇게 실행한 서버와 클라이언트를 모두 공유해야 게스트가 실시간으로 수정된 코드의 실행 화면을 볼 수 있습니다.
Shared Server 추가 버튼을 누르고 서버와 클라이언트의 포트를 입력합니다.
저는 클라이언트의 경우 13456이고 서버는 9899라서 두 개를 각각 추가해 주었고 결과 화면은 아래와 같습니다.
이제 게스트가 해당 항목을 클릭하면 웹 페이지를 볼 수 있게 됩니다!
하지만 사실 저는 처음에는 실행이 잘 안 됐습니다...
원인은 .env파일을 게스트가 읽을 수 없어서였습니다. 게스트에게 .env는 물론이고 몇몇 파일이 보이지 않는 문제가 있었습니다.
이때는 .vsls.json 파일을 추가해 주면 됩니다.
공식 문서에 따르면 보안상 문제로 호스트는 공유하고 싶지 않은 파일이 있을 수 있고 .vsls.json 파일에 명시하여 제외할 수 있습니다. (혹은 처음부터 아예 Read-only 모드로만 공유할 수도 있습니다.)
기본적으로 .gitignore을 포함하여 .gitignore 내부 내용은 게스트에게 보여주지 않습니다. 따라서, .vsls.json 파일에서 gitignore옵션 값을 변경하여 게스트가 파일을 볼 수 있도록 호스트께서 추가해줘야 합니다.
| none | .gitignore contents are visible to guests in the file tree (assuming they are not filtered by a guest editor setting). |
| hide | The default. Globs inside .gitignore are processed as if they were in the "hideFiles" property. |
| exclude | Globs inside .gitignore are processed as if they were in the "excludeFiles" property. |
{
"$schema": "http://json.schemastore.org/vsls",
"gitignore":"none",
"excludeFiles":[
"*.p12",
"*.cer",
"token",
".gitignore"
],
"hideFiles": [
"bin",
"obj"
]
}참고로, 만일 공유받는 사람이 .vsls.json 파일을 만든다면, 이 파일을 만든 사람은 파일이 만들어진 직후에 목록에서 사라져 버리는 현상을 발견하게 됩니다.🤣 .vsls.json 는 호스트에게만 보인다고 합니다.
이제 잘 실행되는 화면을 보고 뿌듯함을 느껴봅니다!👍
추가적으로 게스트에게 터미널 write권한도 줄 수 있습니다.
Live Share는 실시간으로 코드를 공유는 물론이고 실행화면까지 공유할 수 있다는 점이 무척 편리했습니다. (처음에는 실행화면 공유할 줄 몰라서 포트포워딩으로 공유해줘야 하나 하고 꼬아서 생각했던..🥹)
남의 코드 짜는 모습도 보고 있으니 재미있고 헤매고 있으면 옆에서 바로 조언을 받거나 줄수도 있어서 피드백이 잘 되었던 것 같습니다. 처음이지만 즐거웠고 색다른 경험이었습니다!
Live Share를 통해 코딩쇼(ㅎㅎ)를 즐겨보세요.