FTP(SFTP)로 원격 서버 접속하는 확장 기능

Visual Studio Code

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있다. 또는 프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있다.

Visual Studio Code는 플러그인을 추가하여 FTP 접속이 가능하다. 여러 가지 플러그인이 있는데, 그 중 하나인 ftp-simple 설정법과 사용법을 정리한다.

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

1 ftp-simple 설치
2 서버 연결 세팅
3 서버에 연결하여 파일 열기
4 서버에 연결하여 디렉토리 열기
5 서버에 연결 끊기

ftp-simple 설치

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

서버 연결 세팅

F1을 누른 후 ftp-simple을 입력하면 관련 항목이 나온다.
[ftp-simple : Config - FTP connection setting]을 선택한다.

연결할 서버의 정보를 입력하고 저장한다.
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)에 표시할 디렉토리를 선택합니다.

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

[Save Workspace As...]를 클릭하여 워크스페이스로 저장하면, 좀 더 편하게 접근할 수 있다.

서버에 연결 끊기

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

Visual Studio Code / 대문자를 소문자로, 소문자를 대문자로 일괄 변경하는 방법

많은 텍스트를 전부 대문자로 바꾸거나 소문자로 바꿔야 할 때가 있다. 비쥬얼 스튜디오 코드에는 그 작업을 위한 기능을 포함하고 있다. 변환하려는 텍스트를 선택한다. Ctrl + Shift + P를 누른다. 원하는 것을 선택하고 엔터 키를 누른다. 명령에 따른 결과는 다음과 같다. Transform to Lowercase : 모두 소문자로 바꾼다. Transform to Uppercase : 모두 대문자로 바꾼다. Transform to Title Case ...

Visual Studio Code / 설치 파일 종류 - 사용자 설치, 시스템 설치

윈도우(Windows)용 Visual Studio Code 설치 파일은 User Installer와 System Installer 두 가지가 있다. User Installer 사용자 폴더에 설치된다. 다른 사용자는 사용하지 못한다. System Installer 시스템 폴더에 설치된다. 모든 사용자가 사용할 수 있다. 첫 페이지에 있는 것은 User Installer이다. System Installer를 설치하라면 화살표가 가리키는 곳을 클릭하거나... https://code.visualstudio.com/Download로 접속한다.

Visual Studio Code / ftp-simple / FTP(SFTP)로 원격 서버 접속하는 확장 기능

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있다. 또는 프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있다. Visual Studio Code는 플러그인을 추가하여 FTP 접속이 가능하다. 여러 ...

Visual Studio Code / 언어 변경하는 방법

Visual Studio Code를 설치했는데, 별 생각 없이 알림이 뜨는 걸 다 클릭했더니 언어가 한글로 되었다. 그 상태에서 잠시 사용했는데, 왠지 어색해서 영어로 변경하기로 했다. 그런데 설정 창에는 언어와 관련된 것이 없더라. 좀 특이한 방법으로 언어를 변경하는데... 를 누른다. 그러면 상단에 명령을 입력하는 창이 나오는데... 라고 입력하면 관련 메뉴들이 나온다. 그 ...

Visual Studio Code / 메모

단축키 주석 블록 주석 : Alt + Shift + A 한 줄 주석 : Ctrl + / 주석 단축키가 되지 않으면, 한글 입력기가 Microsoft 입력기인지 확인한다. 한컴 입력기인 경우 문제가 생긴다. 업데이트 업데이트가 있는 경우 오른쪽 아래에 알림이 뜬다. Install Update를 클릭한다. 잠시 기다리면 Update Now 버튼이 생긴다. 클릭하고 잠시 기다리면... 업데이트가 완료되고 Release Notes를 볼 수 있다.

Visual Studio Code / 설정 동기화 하는 방법

Visual Studio Code를 여러 기기에서 사용한다면 설정을 동기화하는 것이 편하다. 설정 동기화를 사용하기 위해서는 Github 또는 Microsoft 계정이 필요하다. 를 클릭한다. 을 클릭한다. Github 또는 Microsoft 계정으로 로그인한다. 동기화 여부는 아래와 같이 확인할 수 있다. 개인적으로는 동기화하는 것보다 주 사용 기기에 원격으로 접속하는 것을 ...