현재 웹 개발 공부를 하고 있는데 Visual Studio Code에서 FTP로 서버에 접속(연동)하면,
파일을 서버에 올리기 훨씬훨씬 편하다!
방법은 아래와 같다.
1. VS code 열기
2. VS code에서 EXTENSIONS 선택. 좌측에서 아래 사진과 같이 네모네모한 아이콘을 선택해주면 된다.
ftp-simple 검색해서 설치하기. install 버튼을 눌러서 설치한다. (나는 이미 설치가 되어 있어서 버튼이 없다.)
3. F1(맥북의 경우에는 fn + f1)을 눌러서 ftp-simple을 검색한다. 아래 사진과 같이 ftp-simple : Config - FTP connection setting을 선택한다.
4. 3번에서 선택하면 아래와 같은 예시 코드가 나온다.
host에는 원격 서버 ip, port는 본인이 사용하는 것에 따라 21(ftp)나 22(sftp), username에는 아이디, password에는 비밀번호, path에는 해당 디렉토리 경로를 설정해준다.
참고로 나는 닷홈과 연결을 하였는데 host에는 본인의 닷홈 주소(xxxxxx.dothome.co.kr), username에는 본인 id, password는 비밀번호를 입력해주면 된다. port, type은 각각 21, ftp로 해주면 된다.
5. 4번을 완료했으면 저장해준다.
6. 다시 f1(맥북은 fn + f1)을 눌러 ftp-simple을 검색해준다. 아래 사진과 같이 ftp-simple : Remote directory open to workspace를 선택한다.
7. 아래 사진과 같이 4번에서 입력해준 name에 해당하는 server를 선택해준다. 엔터로 선택하면 된다.
8. 7번에서 서버를 선택하면 마찬가지로 4번에서 입력해준 path에 해당하는 경로가 나오는데, path에서 설정해주었떤 경로와 그 하위경로를 탐색할 수 있다.
나는 localhost의 모든 파일을 불러오고 싶기 때문에 제일 상단의 .(현재 디렉토리)를 선택해주었다.
9. 잠시 기다리면, 원격 서버에서 파일을 가져오고, 내 workspace에 원격 서버의 디렉토리와 파일들이 나오게 된다.
vs code에서 그냥 로컬 디렉토리를 사용할 때랑 똑같이 코드를 생성, 수정, 삭제할 수 있고, 이는 원격 서버에 바로 적용된다.
이게 정말 아주 편리하다! (하지만 이미지 파일은 바로 생성이 안돼서 파일질라 등을 통해 업로드 해주어야 한다.)
10. 끝! 다들 이코(이-지 코딩)합시다~!