설치하기전

이미 워크스페이스(workspace)가 셋팅되었고 프로젝트 디렉터리가 활성된 상태에서 다음 순서를 진행하기 바란다.

설치하기

VSCode를 실행하고 확장 프로그램 관리 탭으로 이동하여 'SFTP' 키워드로 검색한다.

검색 결과로 비슷한 이름을 갖는 다양한 확장 프로그램들이 보여질 것이다. 그 중에서 'liximomo'라는 개발자 아이디를 가지고 있는 확장 프로그램을 설치할 것이다.

 ※ 아래의 캡처 이미지에서는 이미 설치된 상태이므로 ' Uninstall'로 표시되었다.

접속 환경 설정하기

설치가 완료 된 후 탐색기(Explorer)로 돌아간다. 그리고 F1 키를 눌러 나오는 명령어 선택 창에서 'SFTP' 키워드를 입력하여 SFTP:Config 명령을 찾아 선택한다.

만약에 하나의 워크스페이스(workspace)에서 셋팅된 프로젝트가 두 개 이상이라면 어떤 프로젝트에서 사용할 것인지를 선택하는 단계가 나온다. 원하는 프로젝트를 선택한다.

이후 선택한 프로젝트의 탐색기(Explorer)를 잘 보면 .vscode 폴더가 생성되었고 그 안에 sftp.json 파일이 생성되어 있을 것이다.

sftp.json 파일을 열어 아래의 내용을 참고하여 필요한 값을 작성한다.

• name : 식별할 수 있는 원하는 프로젝트 별칭
• host : 접속하고자 하는 서버의 IP 또는 계정에 연결된 프로토콜(protocal)을 뺀 도메인
  • (예) www.example.com
• protocal : FTP 프로토콜의 종류
  • 보통 ftp 또는 sftp가 있으므로 확인이 필요
• port : FTP로 사용하는 포트(port)
  • 기본값은 21이며 다르다면 맞는 포트 값을 설정
• username : FTP 아이디
• password : FTP 접속 비밀번호
• remotePath : 원격으로 연결될 계정의 최상위 경로
  • 보통은 '/'이나 자신에게 맞는 경로 확인이 필요
• uploadOnSave : 선택 사항이며 작업중인 파일을 저장시 업로드 진행 여부를 설정
  • true인 경우 저장시 즉시 업로드를 하지만 현재 서비스중인 경우에는 위험할 수도 있다. 항상 개발자가 최종적으로 확인 후 업로드를 직접 하는 것을 권장한다.
• ignore : 선택사항이며 업로드 대상에서 제외하고자 하는 파일들이 있다면 확장자들을 배열로 설정
  • 원하는 확장자를 원소로 추가

{
    "name": "",
    "host": "",
    "protocol": "",
    "port": 21,
    "username": "",
    "password": "",
    "remotePath": "/",
    "uploadOnSave": false,
    "ignore": [".vscode", ".git", ".DS_Store" ]
}

작성이 끝났으면 저장하여 SFTP를 사용하기 위한 설정을 마친다. 다른 프로젝트도 동일한 방법으로 sftp.json 파일을 생성하고 맞는 정보를 설정한다.

직접 업로드

sftp.json 파일에서 uploadOnSave 옵션을 false로 설정하여 직접 업로드를 하고자 할 때는 컨텍스트 메뉴 또는 단축키로 업로드하는 방법이 있다.

컨텍스트 메뉴를 이용하는 경우에는 탐색기(Explorer)에서 업로드를 하고자 하는 파일 또는 폴더를 마우스 우측 버튼을 눌러 메뉴를 열고 Upload 항목을 선택하면 된다.

단축키를 이용하는 방법은 VSCode에서 관련 명령의 단축키 설정을 먼저 해야 한다. SFTP는 다양한 상황에서 업로드가 가능하도록 지원하지만 가장 좋은 시나리오는 에디터에 열려 있고 저장후 단축키로 업로드를 하는 경우이다.

업로드 단축키 설정

VSCode 좌측 하단에 있는 아이콘(1번 캡처 이미지 참고)을 눌러 Keybord Shortcuts 메뉴를 선택해 단축키를 설정하는 창을 연다.

다음 열린 창에서 'sftp'라는 키워드로 검색하면 관련 단축키 설정 항목들이 보인다.

에디터에서 활성된 파일만 업로드를 할 예정이므로 아래 캡처 이미지를 참고하여 해당 위치를 더블클릭(double click)한다. 다음 단축키 조합을 누를도록 안내하며 원하는 단축키 조합을 눌러주고 Enter 키를 누르면 된다.

※ 캡처 이미지의 예시는 맥(Mac) 환경이며 이미 단축키 설정이 완료된 상태이므로 참고할 때 주의한다.

업로드 여부 확인

실제로 업로드를 했는가를 확인하고자 할 때는 VSCode의 Output 창에 출력된 로고를 확인하면 된다.