Visual Studio Code / FTP(SFTP)로 원격 서버 접속하여 파일 수정하는 방법

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다. 대표적인 것은 에디트 플러스입니다.

프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있습니다. 대표적인 것은 Brackets, Visual Studio Code입니다. 이번 포스트에서는 Visual Studio Code의 ftp-simple 확장기능을 이용해서 원격 서버에 접속하는 방법을 알아보겠습니다.

  • FTP 플러그인 중에는 로컬 머신과 서버를 동기화해주는 것이 있고, 서버의 파일을 직접 수정하는 것이 있습니다. ftp-simple은 직접 수정하는 확장기능입니다.
  • ftp-simple은 ftp 뿐만 아니라 sftp도 지원합니다. 서버에 SSH로 접속할 수 있다면 바로 사용할 수 있습니다.

ftp-simple 설치

  • 확장기능(Extension)에서 ftp로 검색합니다. 여러 가지 확장기능이 있는데, 그 중에서 ftp-simple을 설치합니다.

서버 연결 세팅

  • F1을 누른 후 ftp-simple을 입력하면 관련 항목이 나타납니다.
  • 그 중에서 ftp-simple:Config - FTP connection setting을 선택합니다.

  • 연결할 서버의 정보를 입력하고 저장합니다.
  • autosave를 true로 하면 파일을 저장할 때 서버의 파일도 자동으로 저장합니다.
  • confirm을 true로 하면 서버에 저장하기 전에 다시 한 번 저장할 것이냐고 묻습니다. false로 하면 묻지 않고 바로 저장합니다.

  • 여러 개의 서버 정보를 넣고 싶다면 다음과 같은 형식으로 만듭니다. 중괄호 사이에 쉼표(,)가 들어간다는 것에 주의합니다.
[
	{
		"name": "localhost",
		"host": "",
		"port": 21,
		"type": "ftp",
		"username": "",
		"password": "",
		"path": "/",
		"autosave": true,
		"confirm": true
	},
	{
		"name": "localhost",
		"host": "",
		"port": 21,
		"type": "ftp",
		"username": "",
		"password": "",
		"path": "/",
		"autosave": true,
		"confirm": true
	}
]

서버에 연결하여 파일 열기

  • 서버에 있는 파일을 열려면, F1을 누른 후 ftp-simple:Open - Open the file directly from FTP server를 선택합니다.

  • 서버를 선택하고, 원하는 파일을 선택하면 편집기에 그 파일이 열립니다.

서버에 연결하여 디렉토리 열기

  • F1을 누른 후 ftp-simple:Remote directory open to workspace를 선택합니다.

  • 설정한 서버 목록이 나옵니다. 접속하려는 서버를 선택합니다.

  • 탐색기(Explorer)에 표시할 디렉토리를 선택합니다.

  • 탐색기에 폴더와 디렉토리 목록이 나옵니다.
  • 이제 파일 추가, 삭제, 편집 등을 할 수 있습니다.

서버에 연결 끊기

  • 서버와의 연결을 끊으려면 ftp-simple:Close all FTP connections를 실행합니다.

같은 카테고리의 다른 글

포토스케이프 / 콜라주 만드는 방법

포토스케이프 / 콜라주 만드는 방법

위키백과에 따르면 콜라주란... 콜라주(collage)는 질이 다른 여러 가지 헝겊, 비닐, 타일, 나뭇조각, 종이, 상표 등을 붙여 화면을 구성하는 기법이다. 라고 해요. 그런데 보통 사진에서는 여러 사진을 모은 하나의 사진을 콜라주라고 합니다. 콜라주는 포토샵 같은 이미지 편집 프로그램으로 만들 수도 있지만, 손이 많이 가요. 그래서 콜라주를 만들어주는 프로그램을 찾게 되는데, 그 중 하나가 포토스케이프에요. 상단 메뉴에 콜라주라고 있어요. 거기서 드래그, 클릭하면 콜라주가 ...

에디트플러스 / FTP, SFTP로 원격 서버 접속하는 방법

에디트플러스 / FTP, SFTP로 원격 서버 접속하는 방법

서버에 있는 파일을 수정할 때, 서버에서 다운로드하고 수정하고 업로드하면 무척 번거롭습니다. 그래서 텍스트 에디터 중에는 FTP 또는 SFTP로 서버에 접속해서 서버의 파일을 바로 편집할 수 있는 기능 갖춘 것들이 있습니다. 예를 들어 Visual Studio Code나 Brackets는 확장 기능으로 구현할 수 있고, 드림위버 같은 웹 프로그래밍 제품은 기본적으로 포함하고 있습니다. 여러 가지 프로그램으로 ...

WinSCP / 다운로드하고 설치하는 방법

WinSCP / 다운로드하고 설치하는 방법

WinSCP는 윈도우에서 사용할 수 있는 FTP 클라이언트 프로그램입니다. 누구나 사용할 수 있는 Free Software입니다. WinSCP는 Windows용 그래픽 유저 인터페이스 SFTP 및 FTP 클라이언트 프로그램이고 오픈소스 프리웨어입니다. 레거시 SCP 프로토콜 역시 지원합니다. 이 프로그램을 사용하여 로컬 컴퓨터와 원격 컴퓨터 간에 안전하게 파일을 복사할 수 있습니다. WinSCP를 다운로드하고 설치하는 방법을 알아보겠습니다. 다운로드 다운로드는 여기에서 합니다. [DOWNLOAD ...

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus 컴퓨터 화면을 이용해서 강의를 하거나 컴퓨터 화면을 녹화할 때, 마우스 포인터가 잘 보이지 않아서 불편할 수 있습니다. 또한 4K 모니터를 사용하면 마우스 포인터가 아주 작게 보여서 찾기 힘들 때도 있구요. 이때 유용한 프로그램이 PointerFocus입니다. PointerFocus는 마우스 포인터에 도형을 입혀서 눈에 잘 띄게 하고, 클릭했을 때 애니메이션 효과를 주어 클릭했음을 알 ...

닷네임코리아에서 도메인 인증코드 발급 받는 방법

닷네임코리아에서 도메인 인증코드 발급 받는 방법

도메인은 어디에서 구입하나 별 차이가 없습니다. 도메인 판매처에서 여러 가지 부가서비스를 제공하고 있지만 대동소이해서, 업체가 아주 이상한 곳이 아니라면 저렴한 곳에서 구입하면 됩니다. 그런 이유로 그동안 닷네임코리아를 이용했었습니다. 등록 비용도 저렴했고, 기간 연장 비용도 저렴했고, 이벤트도 자주 했었습니다. 그런데, 요즘은 달라졌습니다. 닷네임코리아의 가격이 좀 올라갔고, 더 저렴하게 공급하는 업체가 많아졌습니다. 닷네임코리아에서 웹호스팅 ...

Brackets / HTML, CSS 실시간 미리보기 사용하는 방법

Brackets / HTML, CSS 실시간 미리보기 사용하는 방법

Brackets의 장점 중의 하나는 실시간 미리보기입니다. HTML, CSS 등을 만들 때 유용합니다. 만약 실시간 미리보기가 안되는 상황이라면, 문서를 편집하고 저장하고 웹브라우저에서 새로 고침을 해야 하는데, Brackets의 실시간 미리보기를 이용하면 입력 또는 저장만 해도 바로 웹브라우저에 반영됩니다. 실시간 미리보기를 하려면 오른쪽에 있는 번개(?) 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 실행하는 거라면 다음과 같은 메시지가 ...

경기도교육청 상용클라우드 계정 만들고 오피스365, 한컴오피스 2018 설치하는 방법

경기도교육청 상용클라우드 계정 만들고 오피스365, 한컴오피스 2018 설치하는 방법

아이가 학교에서 컴퓨터를 배웁니다. 프리젠테이션을 배웠는데 한쇼로 만듭니다. 그리고 과제가 나옵니다. 한쇼로 뭔가를 만들어오라고... 만약 집에 한쇼가 없다면 어떻게 할까요? 아이 과제를 위해 사야할까요? 다행히도 초중고 학생이라면 교육청에서 한컴오피스 사용권을 받을 수 있습니다. MS 오피스 사용권도 얻을 수 있구요. 다음은 교육청에서 MS 오피스, 한컴오피스 사용권을 얻는 방법입니다. 경기도교육청의 사례이고, 다른 지역 ...

크롬 / 맞춤법 검사 해제하는 방법

크롬 / 맞춤법 검사 해제하는 방법

크롬 웹브라우저에는 맞춤법 검사 기능이 있습니다. 폼에 텍스트를 입력하면 맞춤법 검사를 하고, 맞춤법에 맞지 않으면 빨간 밑줄을 칩니다. 유용한 기능이기는 하지만, 굳지 필요하지 않을 수도 있습니다. 글 주제에 따라 빨간 줄이 너무 많이 나올 수도 있기 때문입니다. 맞춤법 검사는 크롬 설정에서 해제할 수 있습니다. 오른쪽 위의 점 세 개 아이콘을 클릭한 후 ...

구글 계정 삭제(구글 회원 탈퇴) 하는 방법

구글 계정 삭제(구글 회원 탈퇴) 하는 방법

구글 계정은 여러 개 만들 수 있습니다. 입력해야 하는 정보도 별로 없고, 실명 인증도 없고, 간편하게 원하는 만큼 계정을 만들 수 있습니다. 그래서 만들기는 했지만 사용하지 않는 계정이 생기기 시작합니다. 사용하지 않는다면 탈퇴하는 게 좋겠죠? 구글에서는 회원 탈퇴라는 용어를 쓰지 않고, 계정 삭제라고 합니다. 계정을 삭제하기로 했다면, 일단 백업할 데이터가 있는지 잘 ...

OBS Studio / 윈도우 캡쳐 / 녹화 영역 윈도우에 맞추는 방법

OBS Studio / 윈도우 캡쳐 / 녹화 영역 윈도우에 맞추는 방법

OBS Studio의 윈도우 캡쳐를 이용하면, 특정 창만 선택하여 캡쳐를 할 수 있습니다. 그런데, 화면에 꽉 차지 않은 창을 선택하면 아래처럼 나머지 부분이 검정으로 나옵니다. 그 부분에 다른 화면이나 창을 넣을 수 있는데, 만약 선택한 창만 녹화를 한다면 검정 부분까지 녹화가 됩니다. 검정 부분을 없애고, 선택한 윈도우만 녹화하고 싶다면, 마우스 우클릭하여 [출력 ...