비쥬얼 스튜디오 코드 내에 확장 버전이 업데이트되면서 본인이 작업한 HTMP, CSS 코드가 보이지 않는 현상이 발생했습니다. HMTL 수업을 들으면서, 현재 FTP-SIMPLE 개발자도 오류 건 현상에 대해서 해결하지 못한 상황입니다. 대체안으로 사용할 수 있는 익스텐션은 Ftp-sync로 확인되었습니다. 다만, FTP-Simple 보다 사용 방법이 조금 어렵기 때문에, 설정 방법에 대해서 자세하게 알아보겠습니다.
비쥬얼 스튜디오 코드
FTP-SYNC 설치 방법 1
VS code 아이콘을 재실행하게 되면 업데이트가 되었다는 표시가 나타나게 되고, 비쥬얼 스튜디오 코드 하단 내에 보라색 창이 뜨게 되면 정상적으로 설치할 수 있는 환경이 만들어집니다. 아래의 화면 같이 FTP-Simple를 disable 클릭하고 uninstall을 순서대로 진행합니다. 마지막으로 익스텐션 FTP-Sync 익스텐션 설치하고 VS Code 종료합니다.
FTP-SYNC 설치 방법 2
C드라이브를 제외하고 나머지 외장하드 파일 내에 본인과 같은 도메인 파일을 생성하고 파일질라 접속합니다. 파일질라 접속 후, 본인의 HMTL 디렉토리를 도메인 파일 내에 다운로드합니다.(파일이 날아가는 것을 방지하기 위해서 하는 작업입니다.)
FTP-SYNC 설치 방법 3
왼쪽 아이콘 상단을 클릭하면, 바로 옆에 OPEN Folder가 생성합니다. 오픈 폴더를 누른 후, 외장하드 파일에 저장한 HTML 디렉토리 폴더로 설정 값을 지정합니다.
FTP-SYNC 설치 방법 4
폴더를 지정하게 되면 VS Code 내의 본인이 작업한 HTML 작업한 코드를 볼 수 있습니다. Ctrl+Shift+P를 눌러서 FTP-SYNC:lint를 눌러줍니다.
FTP-SYNC 설치 방법 5
본인의 host, username, password 본인의 도메인 주소에 맞게 입력하고 저장버튼을 누릅니다. 저장이 끝났다면 VS Code를 종료하고 재실행합니다. VS Code 하단 내에 파란색 줄이 보이며 정상적으로 작동되는 것을 볼 수 있습니다.
마지막으로 ctrl+shift+p를 누르고 "ftp-sync : remote to local" 를 선택합니다. 그 이후부터는 ENTER만 입력하면, VS CODE를 사용할 수 있는 조건을 확인할 수 있습니다.
'웹퍼블리싱' 카테고리의 다른 글
HTML 3.0 태그 정리 (0) | 2021.03.11 |
---|---|
HTML 1.0 ~ 2.0 태그 개념 정리 (0) | 2021.03.10 |
Visual Studio Code 비주얼 스튜디오 코드 필수 Extension 5가지 추천 (0) | 2021.02.25 |
Visual Studio Code 비주얼 스튜디오 코드 다운로드 방법 알아보기 (0) | 2021.02.24 |
닷홈 무료 웹호스팅 도메인 제작 방법 절차 알아보기 (0) | 2021.02.24 |