VScode 비주얼스튜디오 ftp 접속 원격 코드 동기화 방법

비주얼 스튜디오 코드(VScode)는 개발자들 사이에서 가장 널리 사용되는 에디터 중 하나입니다. 다양한 확장 프로그램을 통해 서버와 FTP 연결 및 원격 코드 동기화를 할 수 있어 편리하기 때문입니다. 그러나 처음 사용하는 분들이라면 비주얼 스튜디오 FTP 접속 방법과 원격 코드 동기화가 어렵게 느껴질텐데요.

이번 글에서는 비주얼 스튜디오(VScode) FTP 연결 방법에 대해 설명드리겠습니다.

VScode FTP 연결 효율성

비주얼 스튜디오 코드는 로컬 환경과 원격 서버 간 파일을 연결해 작업 효율성이 높습니다. 특히 웹 개발자나 서버 관리자라면 ftp 연결은 필수인데요. 로컬에서 코드를 변경하여 파일질라(FileZilla)를 통해 업로드 할 수 도 있지만 원격 코드 동기화를 하면 실시간으로 수정 베포할 수 있습니다.

  • 즉시 배포: 코드 변경 사항을 바로 서버에 업로드하여 테스트 및 배포 속도 향상.
  • 데이터 보안 강화: 원격 서버 작업 시 로컬 백업 파일 유지 가능.
  • 생산성 향상: 하나의 에디터에서 모든 작업 수행.

이번 글에서는 VScode FTP 확장 프로그램을 설치하고, 설정 파일을 작성하여 FTP 연결을 설정하는 법을 배워보겠습니다.

sftp 확장 프로그램 설치와 설정

VScode에서 FTP 연결을 위해 ftp-simple 또는 sftp와 같은 확장 프로그램을 설치해야 합니다. 설치방법은 매우 간단합니다. 다음은 sftp 확장 프로그램을 설치하고 설정하는 방법에 대해 알려드리겠습니다.

1. VScode 확장 프로그램 설치

  1. VScode를 실행하고, 왼쪽 사이드바에서 Extensions(확장) 아이콘을 클릭합니다.
  2. 검색창에 sftp 또는 ftp를 입력하고, SFTP(제작자 Satiro Marra)를 선택하여 설치합니다.
  3. 설치가 완료되면 VScode를 다시 시작하여 확장이 활성화되도록 합니다.

VScode 확장 프로그램 SFTP 설치

2. 로컬 폴더 생성 및 선택

로컬(내컴퓨터)와 서버 코드 동기화를 위해서는 우선 폴더를 생성 또는 기존 폴더를 선택합니다. 해당 폴더에 ftp 접속 설정 파일이 생성됩니다.

VScode 로컬 폴더 선택

3. SFTP Config 파일 설정

FTP 접속을 위해 sftp 확장 프로그램 설치 후 Config 파일에 연결 정보를 입력합니다.

F1을 눌러 검색창에서 SFTP:Config를 선택합니다.

VScode SFTP Config 파일 설정

FTP 연결 정보를 자신의 웹서버 또는 웹호시팅 정보에 맞게 입력하고 저장(Save)합니다.

  • Protocol: 일반적으로 SFTP를 사용합니다.
  • host: FTP 서버 주소(도메인 또는 아이피)
  • port: 기본 포트(일반적으로 21 또는 22).
  • username: FTP 사용자 이름.
  • password: FTP 비밀번호.
  • Remote Path: 원격 서버의 작업 디렉토리를 설정합니다.
  • Local Path: 원격 서버의 작업 디렉토리
  • ./ 는 2번 설명에서 로컬 폴더 선택한 위치를 기본으로 선택

    VScode SFTP 정보 입력 세팅

    위의 과정을 거치면 로컬 폴더.vscode폴더와 sftp.json 파일이 생성됩니다.

    VScode 로컬 소스 코드 동기화

    원격 코드 동기화

    FTP 연결 설정이 완료되면 VScode와 서버 간 원격 코드 동기화가 가능합니다. 아래 단계를 통해 원격 코드 동기화를 설정하세요. 비주얼 스튜디오 코드를 종료 후 재실행 하면 ftp 연결이 바로 되기때문에 코드를 수정하고 save 하시면 실시간 반영됩니다.

    참고로 원격으로 코딩 작업을 할때 인코딩 문제로 한글 깨짐이 발 생할 수 있으니 주의하세요.

    VScode FTP 사용 시 유의사항

    보안

    FTP는 기본적으로 암호화되지 않은 프로토콜이므로, 민감한 데이터를 다룰 경우 SFTP(Secure FTP) 또는 FTPS를 사용하는 것이 좋습니다.

    접속 오류 해결

    • 서버 설정에 따라 포트 번호가 다를 수 있으므로 정확한 정보를 확인하세요.
    • 방화벽이나 네트워크 문제가 있을 경우 서버 관리자에게 문의하여 허용 규칙을 설정하세요.

    동시 작업

    여러 작업자가 동일한 서버에서 작업하는 경우 충돌을 방지하기 위해 Git 또는 버전 관리 시스템을 사용하는 것이 좋습니다.


    VScode 비주얼 스튜디오 ftp 연결과 원격 코드 동기화는 생각보다 간단합니다. 다만 설정과 몇 가지 유의사항만 숙지하시면 편리한 작업 환경을 구축할 수 있습니다. 전문 개발자뿐만아니라 워드프레스 웹사이트를 직접 설치 운영하는하는 분들에게도 유용합니다.

    Leave a Comment