[웹 개발을 위한 기초지식2] 개발 환경 설정하기, vscode+extensions(sftp, html snippets), filezilla client, 한글설정 등

지난 [웹 개발을 위한 기초지식1] 에 이어 오늘 다룰 내용은 본격적인 개발 환경 설정에 관한 내용입니다.

1. vscode 설치

https://code.visualstudio.com/

2. vscode extension 설치

설치해야할 extension은 sftp, html snippets 이렇게 두개입니다! 이외에도 작업할 때 있으면 편한 estenstion 들이 많이 있는데요! 이건 나중에 몰아서 vscode extension 추천 포스팅으로 가져올게요 🌞

대부분 로컬에 서버가 존재하지 않으며, 원격에서 작업을 많이 합니다.
코드를 패치한 것을 저장하고 다시 서버에 올려서 적용하고, 이러한 작업은 여간 번거로운 일이 아닌데요 ..
이러한 수고를 덜어주는 것이 에디터에 SFTP 동기화 기능인데 패치된 코드를 지정된 경로에 바로 코드 적용이 가능합니다.
이러면 작업 능률이 배로 올라갈 수밖에 없겠죠?ㅎㅎ

html Snippets는 html 문서를 작성할때 정말 파워풀한 기능을 제공하는데요, 이게 없었다면 저는 코딩을 안했을 수도..

! 하나만 입력해도 html 의 기본 골격을 만들어주고,

div 태그를 곱하기 연산자로 이렇게나 쉽게 만들수도 있다. 이외에도 정말정말 유용하게 사용하는, 코딩 속도를 다섯배는 올려주는 사용법들은 앞으로의 포스팅으로 또 ,.. 미뤄본다ㅎ

3. fileZilla

https://filezilla-project.org/

다운로드를 하고 실행을 시키면 이러한 화면이 표시됩니다

4. sftp:Config 생성

다시 vscode로 돌아와서 fn+f1을 눌러 sftp:Config를 누르면 sftp.json파일이 생성됩니다. 본인의 닷홈 정보에 맞게 수정합니다.

호스트

호스팅 계정에 연결된 도메인을 입력해 주면 됩니다

("http://, https:// 제외)

사용자명, 비밀번호

호스팅 신청 시 입력하였던 FTP 아이디와 비밀번호를 입력합니다

[마이닷홈] > [호스팅관리]에서 호스팅 계정명과 FTP아이디를 확인할 수 있습니다

ftp 는 포트에 21을 넣어줍니다

5. filezilla에서 빠른 연결하기

위의 정보와 같게 윗줄을 입력한 뒤 빠른 연결을 누르면?

6. 호스팅 성공! 🐥

http://chamroro.dothome.co.kr/index.html