VS Code를 활용하여 FTP를 통한 웹호스팅 서버에서 직접 코드 작성하기

Visual Studio Code(VS Code)는 개발자들 사이에서 가장 인기 있는 코드 에디터 중 하나입니다. 그 이유 중 하나는 그 확장성에 있습니다. 다양한 확장 프로그램을 통해 거의 모든 개발 환경에 맞게 조정할 수 있기 때문입니다. 오늘은 이러한 VS Code의 확장성을 활용하여 FTP로 웹호스팅을 이용하고 있는 서버에 직접 접속해서 코드를 작성하는 방법에 대해 알아보고자 합니다.

첫 번째 단계는 VS Code에 FTP 연결을 가능하게 해주는 확장 프로그램을 설치하는 것입니다. ‘FTP-Simple‘ 혹은 ‘SFTP’와 같은 확장 프로그램이 인기가 있습니다. 이 글에서는 ‘SFTP’ 확장 프로그램을 예로 들겠습니다. VS Code에서 왼쪽 사이드바에 있는 확장 아이콘을 클릭한 후, 검색창에 ‘SFTP’를 입력하고 설치를 진행합니다.

설치가 완료되면, F1을 눌러 상단에 명령 팔레트(Command Palette)창에 “> ftp-simple: Config – FTP connection setting”을 선택하면 JSON 형식의 설정 파일이 열리게 됩니다. 여기에는 서버의 주소, 사용자 이름, 비밀번호, 원격 디렉토리 경로 등 FTP 접속에 필요한 정보들을 입력해야 합니다. 예를 들어, 서버의 주소가 ‘example.com’, 사용자 이름이 ‘user’, 비밀번호가 ‘password’, 원격 디렉토리 경로가 ‘/public_html’일 경우, 다음과 같이 입력합니다.

{
    "name": "My Server",
    "host": "example.com",
    "protocol": "ftp",
    "port": 21,
    "username": "user",
    "password": "password",
    "remotePath": "/public_html",
    "uploadOnSave": true
}

설정 파일을 저장한 후, VS Code의 좌측 사이드바에 있는 SFTP의 아이콘을 클릭하면 연결된 서버의 파일들을 볼 수 있습니다. 이제 원격 서버의 파일을 직접 열어 수정하거나 새로운 파일을 생성할 수 있습니다. ‘uploadOnSave’ 옵션을 ‘true’로 설정하면 파일을 저장할 때마다 자동으로 서버에 업로드됩니다.

입력한 정보는 ‘C:\Users\사용자명’ 아래에 저장이 되며, 설정한 정보로 서버에 접속을 하려면 마찬가지로 F1을 눌러서 명령 팔레트에서 “> ftp-simple: Remote directory open to workspace“를 선택한후 입력한 서버명을 선택하시면 됩니다.

이처럼 VS Code와 FTP를 연동하는 방법을 통해 웹호스팅 서버에 직접 접속하여 코드를 작성하고 수정하는 작업을 훨씬 더 편리하게 수행할 수 있게 됩니다. 웹 개발자라면 한 번쯤 시도해볼 만한 방법입니다.

혹시 잘 안되시거나 어려운 부분이 있으시면 아래에 댓글로 남기시면 도움을 드리겠습니다.