VS Code로 FTP 연결하여 코드수정 바로 적용하기(ftp-simple)

홈페이지 제작 또는 관리를 할 때 파일질라 같은 ftp 프로그램을 이용하여 코드를 수정한 후 업로드를 합니다. ftp에서 파일을 다운받아 코드 편집기로 수정 후 다시 ftp로 올려야 하는 작업이 여간 번거롭습니다. 비쥬얼 스튜디오 코드에서 확장 프로그램을 이용해 ftp로 연결하여 바로 코드 편집할 수 있도록 환경을 셋팅해 보도록 하겠습니다.

 

먼저 파일질라 ftp 프로그램 설치 및 사용방법은 아래 링크로 걸어두었습니다.

lognam.tistory.com/54

 

 

▲ VS Code 프로그램을 실행하여 좌측 하단 아이콘을 누른 후 ftp-simple을 검색하여 설치를 합니다.

 

 

▲ F1키를 누른 후 ftp로 검색을 하여 ftp-simple : Config - FTP connection setting를 클릭합니다.

 

 

▲ ftp 정보들을 입력하여 줍니다.

 

 

▲F1키를 눌러 이번에는 ftp-simple : Remote directory open to workspace를 클릭하여 줍니다.

 

 

▲ 등록했던 서버를 클릭합니다.(ftp-simple : Config - FTP connection setting의 "name" 부분에 입력했던 이름이 나옵니다)

 

 

▲ 그누보드 WWW로 들어갑니다.

 

 

▲ 예시는 그누보드 디렉토리 구조인데, 자신의 티렉토리에 맞게 접속하시면 됩니다.

 

 

▲ 접속을 하면 위와 같은 안내문구가 우측 하단에 표시됩니다.

 

 

▲ 이때 폴더를 클릭하면 하위 폴더들이 아직 준비가 되지 않아 이미지처럼 표시가 되고, 클릭해도 열리지 않습니다.

 

 

▲ 기다리면 다운로드에 성공했다는 메시지가 생깁니다.

 

 

▲ 메시지를 확인 후 다시 폴더를 열어보면 정상적으로 로딩이 완료된 것을 확인할 수 있습니다.

 

 

▲ 소스를 수정 후 저장을 하면 덮어쓰기 할지 물어봅니다. OK를 누르면 FTP에 업로드가 됩니다.

 

 

▲ 저장을 할 때마다 업로드할 건지 물어보므로 confirm 설정을 false로 바꿔주면 물어보지 않고 업로드됩니다.