[PM/PO 강의] 2. VS Code 살펴 보기
사용 방법 익혀보기
개요
1. 디렉토리(폴더)
- 폴더 이름은 '소문자'를 권장
- '폴더'가 프로젝트의 단위임. 항상 '폴더'를 열어서코딩 V 시작하면 됨
2. 상태바 색상
- 보라색: 아무 것도 열려 있지 않을 때
- 파란색: 프로젝트(폴더 단위) 열렸을 때
3. 파일 생성하기
- '파일 추가' 아이콘 클릭 후 파일명 + .확장자명 입력하면 파일이 생성된다.
- 파일, 폴더를 탐색기 외에 VS 코드에서 손쉽게 관리 가능 (추가, 삭제 등)
4. HTML 구조 자동 완성
- 느낌표 + 엔터 또는 탭 키 누르면 프론트 개발 시작을 위해서 필요한 내용이 자동 입력된다.
5. 한글화
- Extensions (plugin에 해당) 클릭하여, 'korean langauge pack for visual studio code by Microsoft' 다운로드
정리된 코드 만들기
1. index.html 파일 생성
- 참고로 .vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더. 삭제해도 무방하나 VS Code로 프로젝트 열면 다시 생성되므로 무시하면 된다. 보통 이름이 .으로 시작하는 파일/폴더는 '숨김 전용'이다.
2. <body> 영역에 아래와 같이 입력
- div 입력 후 + emmet 기능 엔터/탭
- <div></div>와 같이 div 관련 태그가 자동으로 작성됨
3. 지저분한 코드를 정리하는 방법
- 'Beautify' Extension 설치
- 기능 기여도 탭에서 명령 > 이름 'hookyQR.beautify' 복사
- Code > 기본 설정 > '바로 가기 키' (또는 ctrl + shift + p에서 검색)
- 'hookyQR.beautify' 검색해서 'Beutify selection' 메뉴를 더블 클릭 > 원하는 단축키를 입력 > alt + ctl + l(L) > 엔터 클릭 (바인딩 완료)
- 지저분한 코드 부분 블록 설정한 다음 해당 단축키 입력하면 자동으로 정리됨!
- 처음부터 꼼꼼하고 깔끔하게 작성할 것!
ㅇ
개념
1. 태그
- 열린 태그, 종료 태그가 한 쌍이다.
- 'Auto Rename Tag' extension 다운 받으면 하나의 태그 바꾸면 나머지 태그 자동으로 바뀜
2. 프로젝트 저장
- 파일 단일 저장보다는 모두 저장을 사용할 것 (alt + ctrl + s)h
- 파일 이름 우측 '흰 동그라미' 표시는 아직 저장하지 않았다는 의미임
3. 프로젝트를 브라우저에 출력하기
- activity bar > extension 'live server - Ritwick day' 확장 기능 설치
- index.html 돌아가 보면 우측 하단 파란 상태바에 'go live' 메뉴 생성되어 있을 것
- 이와 동일하게 이 파일에서 우클릭하면 'Open with Live Server' 메뉴 생성 (HTML 파일에서 동작)
라이브 서버
개발을 위해 임시로 로컬(나의 컴퓨터 환경) 서버를 오픈하는 것. 실제 제품은 실제 호스팅(사용자들이 접근 가능한) 서버에 업로드해야 함.
단축키
사이드 bar 여닫기 = Ctrl + b
빠른 열기 = ctrl + p\
에디터의 모드 명령 표시 = ctrl + shift + p
모두 바꾸기 = ctrl + h
줄 이동 = alt + up/down (위치 옮겨 줌)
한 줄 복사 = alt + shift + up/down
* 들여쓰기(indent)는 2를 권장 = '공백을 사용한 들여쓰기'에서 수정
