프론트엔드/웹 표준 사이트 만들기

사이트제작 - 닷홈, FileZilla와 Visual Sstudio Code 연결

김곰댕 2021. 8. 31. 14:12
728x90

1. 닷홈 무료 호스팅, FileZilla와 연결

1) 닷홈 홈페이지 접속

https://www.dothome.co.kr/index.php

 

닷홈 | 호스팅은 닷홈

닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.

www.dothome.co.kr

2) 메뉴 -> 무료 호스팅 클릭

3) 무료호스팅 신청하기 클릭 후 목록 작성

4) 마이닷홈 -> 호스팅 관리 -> 웹호스팅 목록 -> 상세보기

5) 자세한 사항 확인 가능

6) FileZilla 다운로드

https://filezilla.softonic.kr/download

 

FileZilla

신난다 무료 FTP 클라이언트

filezilla.softonic.kr

7) 닷홈을 참고하여 호스트, 사용자명, 비밀번호를 작성 후 빠른연결

위와 같이 연결된 모습을 확인할 수 있다.


2. FileZilla와 Visual Sstudio Code 연결

1) 파일 -> 기본설정 -> 설정

2) 검색창에 encoding 검색 후 그림과 같이 UTF-8로 변경

3) 확장 (Ctrl + <Shift> + X) -> 검색창에 html검색 -> HTML Snippets 다운로드

4) 검색창에 sftp 검색 -> SFTP 다운로드

5) 파일 -> 폴더 열기 -> 폴더 선택

6) 폴더가 열렸으면 F1키를 눌러 뜬 검색창에 sftp를 입력 -> SFTP:Config 클릭

7) SFTP:Config을 선택하면 아래와 같은 창이 열리게 되며, 아래에 FTP정보를 기입하면 된다.

host : FileZilla에서 호스트 보고 기입

protocol : ftp로 수정 (dothome일 경우)

port : 21로 수정

username : FileZila에서 사용자명 보고 기입

8) SFTP창으로 이동하여 상단의 Refresh 아이콘을 클릭

9) FTP 비밀번호를 입력 후 엔터

10) 연결이 완료되면 File Zila에서 생성되있던 파일이 연동됨을 확인 가능


3. Visual Studio Code 폴더에서 SFTP 연동

1) 탐색기 -> 오른쪽클릭 -> Download Folder를 클릭하면 SFTP 아이콘에 들어가서 다운받은 File Zila의 html 디렉토리 파일들을 불러올 수 있다.

2) Visual Studio Code 폴더에서 생성한 html파일을 오른쪽 클릭하여 upload 후 SFTP에서 새로고침하면 update된 것을 확인할 수 있다.

728x90