본문 바로가기

별걸다하는 IT/개발환경 세팅&TIPS

[vsCode-svn] 비주얼스튜디오코드 SVN에 연동하여 소스 환경 구성하기 Visual Studio Code (VSC)

안녕하세요~ 양햄찌 블로그입니당

이클립스를 쓰다가 IDE가 무거워서 vscode를 사용하게 됐는데요

오늘은 비주얼스튜디오의 경량화 버전인 비주얼스튜디오코드의 svn 연동법에 알아보려고 합니다.

 

Visual Studio Code 비주얼스튜디오코드 SVN 연동하는 법

비주얼스튜디오코드 에디터와 tortoiseSVN은 깔려있다는 가정하에 진행하도록 할게요~!

1. SVN 확장팩 설치하기

[네트워크가 연결되어 있을 경우]

저기 빨간색 네모칸에 있는 아이콘이 확장 프로그램을 설치하고 관리하는 아이콘인데요,

저기를 눌러서 SVN을 검색해 깔아줍시다. 저 화면은 ctrl + shfit + x의 단축키를 통해 단번에 이동할 수 있어요.

비주얼스튜디오코드 에디터는 경량화된 개발환경이니만큼, 다양한 유틸리티를 익스텐션(확장프로그램)으로 제공하고 있는데요, 검색으로 설치하려면 당연히 네트워크!!가 연결되어 있습니다.

 

[네트워크가 없는 오프라인일 상황의 경우]

하지만 특정 회사에서는 망분리 때문이나 보안적 이슈떄문에 네트워크가 제공되어 있지 않은 경우들이 많죠?

이럴 경우에는 비주얼스튜디오코드 익스텐션 마켓 페이지에서 직접 파일을 다운받을 수 있습니다.

사이트 URL : marketplace.visualstudio.com/vscode

 

그림 누르면 사이트로 이동

여기서 svn을 검색하신 후 클릭!

SVN을 클릭해줍시당

여기 가시면 'DOwnload Extension을 눌러서 확장자명 .vsix 파일을 다운받을 수 있어요. 네트워크 되는데에서 다운받은 후, 네트워크 안되는 망으로 옮겨서 사용하시면 됨

 

이제 visual studio code에서 확장팩 insert 하는 법을 알아봅시다.

더보기점점점 부분을 클릭한 후 install from VSIX...누르기 

 

그럼 파일열기창이 뜨는데 거기서 아까 다운로드한 확장팩을 눌러서 INSTALL눌러설치하면 됩니다!

 

2. svn.exe있는지 확인하기

비주얼스튜디오코드에서 svn을 사용하시려면 svn.exe파일이 존재해야 합니다.

TortoiseSVN 설치파일 위치를 연 다음에 bin폴더에 svn.exe파일이 있는지 확인해봅시다.

설치 위치를 변경하지 않았으면 "C:\Program FIles\TortoiseSVN\bin"부분에 있음!

 

[svn.exe 파일이 없을 경우]

tortoise를 어떻게 설치했느냐에 따라 간혹 svn.exe파일이 없을 수 있는데요, 

저는 설치파일을 tortoiseSVN 디렉터리에 같이 보관하고 있는데, tortoiseSVN을 다시 클릭해서 실행해줍시다.

재설치는 아니고 설치변경이 필요해요 ㅎㅎ

여기서 Modify 클릭!!

저기 X표시 되어있는거 보이죠? 최초에 깔았을 떄 이부분 X상태로 깔면 실행파일이 나오지 않습니다.

'command line client tools'부분 클릭해서 'Will be installed on local hard drive'로 수정해 추가설치해주세요~

그리고 다시 확인해보면 아까 그 경로에 'svn.exe'파일이 생성된 것을 확인하실 수 있을거예요!

 

3. vsCode 설정파일 변경하기

비주얼스튜디오코드 설치할 떄 지정했던 위치로 들어가면 

저의 경우 D디렉토리로 변경해서 설치했기 때문에 "D:\Program Files\vsCode\Microsoft VS Code\resources\app"부분에 있는데요, 그냥 default로 설치하신 분은 "C:\Users\User\Appdata\Local\Programs\Microsoft VS Code\resources\app"로 가셔서 product.json 파일을 찾으면 됩니다.

(설치 위치에 따라 유저마다 다를 수 있음)

product.json 파일 편집 눌러서, extensionAllowedProposedApi 검색

거기 맨 마지막에다가 "johnstonecode.svn-scm"추가하시면 됩니다.

요렇게~~ 그리고 저장!!

4. vsCode와 svn 연동 및 소스받기

Visual Studio Code 편집기를 들어갑시다.

ctrl+shift+p를 눌러서 

SVN: Checkout을 눌러주세요

그럼 요렇게 URL넣는 창이 뜹니다.

여기서 연동하고 싶은 소스가 있는 remote 주소를 넣어주시면 돼요!! (repository 주소)

엔터누르면 이렇게 폴더 열기 창이 나타나는데 여기는 소스를 다운받을 기본 로컬주소입니다.

여기는 소스 checkout 받을 메인주소를 지정해서 넣어주면 됩니당.

'Select Repository Location'클릭!

달라진게 없어 보이지만 자세히 보면 'Folder name (Press 'Enter' to confirm or 'Escape' to cancel)

라고 변경된게 보일거예요, 여기에 디렉터리명을 다시 넣으면 아까 지정한 "로컬주소/방금지정한디렉터리" 이 주소에 소스가 체크아웃됩니다~!

 

만약 다른 IDE환경에서 이미 로컬에 다운받은 소스가 있다면, 해당 로컬 디렉터리 주소를 넣어줘도 자동으로 연동돼요. 굳이 IDE마다 매번 소스 다운을 할 필요는 없단 얘기!

 

밑에 보면 레파지토리가 잘 체크아웃 되고 있는 것을 확인할 수 있습니다.

시간이 좀 지나면 완료되면서 이렇게 팝업이 바뀌는데 'Open Repository'를 누르시면, 

짠 요렇게 소스가 잘 연동되어 뜨게 됩니다~~!

 

오늘 포스팅은 여기까지입니다.

본격적인 SVN 사용방법에 대해 궁금하신 분은 아래 포스팅을 참고해주세요

▼VSC SVN 사용법 - 커밋, 업데이트, 히스토리 보는법: jhnyang.tistory.com/386

 

[VSC SVN] 비주얼스튜디오코드 SVN 사용법 - 커밋, 업데이트, 히스토리, 버전 확인하는 법

안녕하세요 양햄찌 블로그 주인장입니다~!! 오늘은 비주얼스튜디오코드(Visual Studio Code, 일명 줄여서 VSC)의 SVN 사용법을 다뤄보려고해요 SVN 설치하고 환경설정하는 것 부터연동해서 소스다운받

jhnyang.tistory.com

도움이 되셨다면 공감은 어떤가요? 큰 힘이됩니다.