[TIPS] VScode 확장프로그램 Live Share

페어로 스프린트나 프로젝트 혹은, 스터디를 진행하면 내가 전달하고자 하는 부분이 잘 전달되지 않을 때가 있다. 특히, 오탈자의 경우 작성자가 잘 찾지 못하는 경우가 있어 고구마를 다섯개 주워먹고 시간은 시간대로 날리는 때도 적지 않다. 만약 우리가 vscode의 확장프로그램 라이브쉐어 ( Live Share ) 를 이용한다면, 위의 경우는 더 이상 문제가 아니다.

 

라이브 쉐어 ( Live Share )

기능요약:

• 코드 동시 편집
• 웹 프로그래밍 시 편집된 내용을 내 PC에서 url로 접속하여 확인 가능
• 커뮤니케이션 툴 ( 채팅, 음성통화 )

어마어마하다. 특히 코드를 동시에 편집할 수 있다니!!!!!! 내 PC에 설치되어있는 vscode로 다른 사람의 로컬 레포지토리에 존재하는 코드를 함께 보며 편집할 수 있다. 또, 저장만 한다면 변경 사항을 내 PC에 설치돼있는 브라우저를 통해 확인할 수 있다. 이제는 당연해져버린 커뮤니케이션 툴이 포함돼 있어 모각코에 카메라를 켜놓고 페어프로그래밍이 가능하다.

 

 

그럼 이제 설치부터 사용까지 한 번 해보자!

우선 vscode를 실행하여 왼쪽의 확장프로그램 탭으로 이동하자. 그리고 위의 검색창에 live share 를 검색 키워드로 넣어주면 바로 뜬다!

한 가지 유의사항은, Live Share 를 검색했을 때 나오는 Live Share Extension Pack 도 함께 설치하길 권장한다. 

 

해당 패키지는 음성통화, 결과화면 공유 등의 추가 기능을 사용할 수 있도록 도와준다.

 

라이브 쉐어를 설치했다면, 왼쪽에 새로운 탭이 나타난다!

라이브 쉐어 로고와 같은 모양의 탭을 선택하면 세션 정보를 볼 수 있는데, 작업을 시작하기에 앞서 동시편집을 가능하게 할 지 ( 읽기/쓰기 ), 참가한 사람들은 읽기 전용으로 볼 수 있게 할 지 세팅할 수 있다.

위의 화면에서 협업 세션(공유) 시작 버튼을 클릭하면 협업세션에 참여할 수 있는 url이 자동으로 클립보드에 복사가 된다.

함께 협업할 사람에게 Ctrl+v로 url을 전달해주면 끝!

 

처음에는 깃헙 로그인 등의 자잘한 문제가 있을 수 있다. 관련 내용은 live share extention 하단의 내용을 읽어보면 해결할 수 있다!

그래도 헤맬 수 있으니까, 잘 정리된 블로그 링크를 걸어두겠다.

참고 블로그: https://hwanine.github.io/vs%20code/VScode-liveshare/

live share: https://visualstudio.microsoft.com/ko/services/live-share/