-vscode 단축키
vscode로 효율적인 마크업을 할 수 있는 단축키( emmet )를 안내해드리겠습니다. 따로 설정하지 않아도 vscode 단축키는 기본으로 설정되어 있습니다.
- 선택한 영역을 주석 처리합니다: 컨트롤+/
- 들여쓰기와 내어쓰기를 합니다: 탭, 시프트+탭
- HTML DTD 기본양식을 빠르게 입력합니다: ! 누르고 탭
- 빠르게 태그를 생성합니다: p, a, img등의 태그 이름 입력 후 탭
- 선택된 영역을 위 또는 아래로 복사해줍니다: 시프트+알트+방향키
- 여러 열을 한꺼번에 수정할 수 있습니다: 시프트+알트+드래그 또는 마우스 휠 드래그
- 부모 자식 태그를 한번에 만들 수 있습니다: ul>li*3과 같이 부모 자식 될 태그를 입력 후 탭
- 클래스, 아이디와 함께 태그를 생성합니다: div.mydiv, div#mydiv 입력 후 탭
새로운 vscode 단축키를 등록하려면, 파일 > 기본 설정 > 바로 가기 키 또는 파일 > 기본 설정 > 바로가기 키 > Emmet 검색 >Emmet 약어로 래핑에서 등록할 수 있습니다.
-visual studio code live server (가상 서버) 설치하기
vscode live server는 코딩을 하면서 내용이 실시간으로 적용되는 모습을 확인할 수 있게 도와줍니다. vscode를 이미 설치하거나 사용할 예정이라면, vscode 프로그램 내에 설치할 수 있는 확장프로그램으로 간편하게 가상서버를 실행할 수 있습니다.
- vscode를 설치하고, 컨트롤+시프트+X를 눌러 확장프로그램을 켭니다.
- 검색창에 live server를 검색하고, 설치 버튼을 누르면 설치가 완료됩니다.
- 일일이 저장 버튼을 누르지 않고 바로 확인할 수 있도록, 파일 > 자동저장을 클릭합니다.
이제 코딩한 내용을 실시간으로 볼 수 있습니다.
- HTML 문서를 하나 만들고, 우클릭해서 open with liveserver를 클릭합니다.
- 웹 브라우저가 열리면서 가상의 웹 서버 페이지가 열립니다.
- p 태그 등에 텍스트를 입력해보면 바로 적용되는 것을 확인할 수 있습니다.
vscode live server로 실시간 코딩을 모니터링할 수 있는 것은 좋지만, 가상 서버이기 때문에 작업물이 저장되어 있는 내 컴퓨터에서만 확인이 가능하다는 단점이 있습니다. 따라서 visual studio code live server는 작업할 때만 사용하고, 다른 사람들이 볼 수 있도록 웹서버라는 공간에 작업한 파일을 업로드해야 합니다.
웹서버를 제공하는 업체는 많지만 대표적으로 닷홈, 카페24가 있습니다. 닷홈은 무료호스팅을 제공하고 있고, 초보자가 사용하기에 용량이 충분하기 때문에 닷홈에서 작업하다가 원하는 업체에서 호스팅이나 도메인을 구매하시면 되겠습니다. 그럼 웹서버에 파일을 올려서 확인해볼까요?
-FTP 프로그램으로 웹서버에 작업물 올리기
FTP라는 파일 전송 프로토콜이 있습니다. 어렵지 않습니다. 네이버 클라우드나 구글 드라이브에 파일을 올린다고 생각하면 간단합니다. 단지 파일을 올리려면 FTP파일 전송을 해주는 프로그램을 설치해주면 됩니다. 대표적으로 알드라이브, 파일질라가 있으며, 둘 다 무료로 제공되고 있습니다. 원하는 프로그램으로 설치하고 내 사이트에 접속해 파일을 올리면 됩니다. 이제 다른 사람들도 내 작업물을 볼 수 있습니다.
FTP 프로그램( 알드라이브 또는 파일질라 )를 설치합니다.
실행하면 나타나는 로그인 창에 아래의 내용을 입력합니다.
호스트: 본인의 사이트 주소
포트: 21
암호화: Use plain FTP
아이디: 닷홈 또는 카페24의 아이디
비밀번호 : 닷홈 또는 카페24의 비밀번호
연결 버튼을 눌러 연결합니다.
“html” 폴더 안에 작업한 파일을 드래그해서 업로드합니다.
웹서버를 제공하는 업체는 많지만 대표적으로 닷홈, 카페24가 있습니다. 닷홈은 무료호스팅을 제공하고 있고, 초보자가 사용하기에 용량이 충분하기 때문에 닷홈에서 작업하다가 원하는 업체에서 호스팅이나 도메인을 구매하시면 되겠습니다. 그럼 웹서버에 파일을 올려서 확인해볼까요?
-FTP 프로그램으로 웹서버에 작업물 올리기
FTP라는 파일 전송 프로토콜이 있습니다. 어렵지 않습니다. 네이버 클라우드나 구글 드라이브에 파일을 올린다고 생각하면 간단합니다. 단지 파일을 올리려면 FTP파일 전송을 해주는 프로그램을 설치해주면 됩니다. 대표적으로 알드라이브, 파일질라가 있으며, 둘 다 무료로 제공되고 있습니다. 원하는 프로그램으로 설치하고 내 사이트에 접속해 파일을 올리면 됩니다. 이제 다른 사람들도 내 작업물을 볼 수 있습니다.
FTP 프로그램( 알드라이브 또는 파일질라 )를 설치합니다.
실행하면 나타나는 로그인 창에 아래의 내용을 입력합니다.
호스트: 본인의 사이트 주소
포트: 21
암호화: Use plain FTP
아이디: 닷홈 또는 카페24의 아이디
비밀번호 : 닷홈 또는 카페24의 비밀번호
연결 버튼을 눌러 연결합니다.
“html” 폴더 안에 작업한 파일을 드래그해서 업로드합니다.
작업한 파일을 업로드 하지 않고, 서버에 바로 적용&저장시키고 싶은 경우?
-FTP 프로그램과 vscode 연동하기( 서버에 자동 업로드 )
위에 vscode live server 확장프로그램을 설치한 것처럼, FTP 프로그램을 켜지 않아도 vscode와 연동하는 ftp simple이라는 확장프로그램이 있습니다. 이동하면서 작업하거나, 작업한 내용을 바로 서버에 적용시키려고 할 때 유용하게 사용할 수 있습니다. 따로 업로드할 필요가 없는 것이죠.
vscode를 열고 왼쪽 아이콘 맨 밑의 확장프로그램 탭에서 ftp simple을 검색해 설치합니다.
F1키를 누르고 ftp simple config를 검색합니다. ftp simple config. json문서가 열리면 아래의 내용을 입력합니다.
"name": "아무 이름",
"host": "http://www를 제외한 내 사이트 주소",
"port": 21,
"type": "ftp",
"username": "닷홈 또는 카페24의 아이디",
"password": "닷홈 또는 카페24의 비밀번호",
"path": "/html",
"autosave": true,
"confirm": false
다시 F1키를 누르고 ftp-simple: remote directly open to workspace를 검색해 클릭합니다.
ftp simple config 파일에서 설정한 이름을 누르고, 작업물이 있는 폴더를 선택해서 엽니다.
문서에서 텍스트 등을 변경하고, 사이트를 새로고침하면 변경된 내용을 확인할 수 있습니다.
따로 업로드하지 않아도 내 사이트에 바로 적용되는 것이 편하기는 하지만, visual studio code live server 처럼 자동저장이 바로 반영되지는 않습니다. 그리고 작업물이 서버에 직접 저장되기 때문에 좀 더 주의해야 합니다. 다음은 주의사항입니다.
로컬과 서버의 작업물 내용이 뒤섞일 수 있습니다. 내컴퓨터에 파일을 최신으로 유지하려면, 서버에서 바로 수정한 내용을 따로 FTP 프로그램에서 다운받아서 덮어씌워야 합니다.
작업영역(파일이 저장된 폴더를 나타내는 부분)이 로컬에서 웹서버로 바뀝니다. ftp simple을 닫고 다시 로컬로 돌아오려면 다음과 같이 합니다.
파일 > 작업 영역 닫기를 눌러 빠져나옵니다.
파일 > 작업영역에 폴더추가를 눌러, 로컬 컴퓨터 작업 폴더를 엽니다.
이처럼 작업공간이 분산되면 혼동이 올 수 있습니다. 따라서 가상서버 또는 ftp simple 중에 하나를 주요 작업공간으로 선택해야 헷갈리지 않습니다. 작업공간이 분산되어도 백업과 버전 관리를 할 수 있는 Git이라는 프로그램도 있습니다. Git 사용에 대해서도 나중에 안내해드리겠습니다.
그 밖에 문서의 들여쓰기와 내어쓰기를 자동정렬해주는 Beautify라는 확장프로그램도 있습니다. vscode 단축키 등록을 통해 사용하면, 자동정렬이 필요할 때 빠르게 정리를 할 수 있습니다.
-Beautify 사용법
vscode를 열고 확장프로그램 탭에서 Beautify을 검색해 설치합니다.
파일 > 기본 설정 > 바로가기 키 > beautify selection 검색
beautify selection 더블클릭 > 원하는 단축키 입력 후 엔터.
삐뚤빼뚤한 문서에서 단축키를 눌러 정렬되는 것을 확인합니다.
HTML 문서의 경우 부모 자식 관계에 맞게 태그가 자동정렬됩니다.
CSS 문서의 경우도 중괄호 단위로 정렬되지만, 그만큼 스크롤을 많이 내려야 합니다. 저는 한줄로 길게 쓰는 것을 선호해서 CSS 문서에서는 사용하지는 않습니다. 취향에 따라 사용하시면 되겠습니다.
vscode 단축키 및 vscode live server와 ftp 프로그램 그리고 편하게 사용할 수 있는 확장프로그램들을 소개해드렸습니다. 누군가는 환경설정이 중요하지 않다고 생각할 수도 있지만, 초보일수록 작업물을 빠르고 작성하고 확인하는게 중요하다고 생각합니다. 더 많은 단축키와 확장프로그램들이 있지만 제생각엔 visual studio code live server와 단축키 정도면 충분하지 않나 싶습니다. 괄호를 하나하나 쳐가며 코딩한다고 생각하면 정말 진이 다 빠질거에요. 기본 환경설정도 했으니 이제 신나게 코딩하세요!
'웹, 게임 제작' 카테고리의 다른 글
| html 태그 자주 쓰이는 태그 순위 (0) | 2021.08.19 |
|---|---|
| css inline, block, inline-block element (0) | 2021.08.19 |
| Phaser 기본세팅과 플랫포머 튜토리얼 (0) | 2021.02.26 |
| 생활코딩_WEB2 JS요약 (0) | 2021.02.16 |
| 생활코딩_WEB1 요약 (0) | 2021.02.15 |
댓글