Ch 2. VS Code

🎯이번 챕터는

vscode에 관한 내용이었다. 몇개는 이미 알고 있기도 한 내용이었지만

상당히 유용하고 실용적인 내용들이 가득했다.

전에 vscode 설정때문에 2일정도 날린경험이 있어서인지

이번 내용이 매우 크게 다가왔다. 

이번 내용을 잘 습득해서 생산성을 늘려야 한다.

---

⭕01. 설치 및 실행

📌강의 정리

• vscode라는 코딩을 위한 에디터를 설치해볼 것이다.
• vscode를 구글에서 검색해서 첫번째 링크를 들어가서 설치하면된다.
• IDE가 아닌 code를 다운받아야한다.
• mac이라면 그대로 mac을 받으면 되고 운영체가 다르다면
  우측 상단의 다운로드에서 맞는 운영체제로 받으면 된다.
• 바탕화면에 starter라는 폴더를 만들고 vscode를 실행시켜보자.
• mac에서는 cmd, window에서는 ctrl을 누른상태에서 스크롤을 바꿔주면 화면크기가 바뀐다.
• welcome탭이 필요없으면 체크헤제하고 탭을 끄면된다.
• 윈도우에서는 쉬프트,컨트롤,p키를 누르면 위에 추가하고픈 기능이 사용된다.
• mac에서의 cmd는 window에서 컨트롤이다.
• 아래의 상태바가 보라색이면 아무런 프로젝트가 진행되지 않았다는 뜻이다.
• 왼쪽 상단에서 아까 만들었던 빈 폴더를 열어주면 아래의 상태바가 푸른색으로 변한다.
• 폴더 단위로 열어야 vscode가 프로젝트가 열렸다라고 생각한다. 폴더단위이다.
• 파일을 열어서 진행할 생각을 하지 마라

 

📌느낀점

기초적인 vscode에 대해서 알아봤다.

전에 파일을 vscode로 열어서 json파일들이 제대로 작동하지 않아

애먹었던 기억이 다시 떠올랐다.

매일 쓰는 vscode이지만 당연한것을 다시 들으니까 깊숙히 기억에 남고 확실해지는 느낌이다.

---

⭕02. 파일 생성과 삭제

📌강의 정리

• 폴더 내부에다가 새로운 파일과 폴더를 만들어 볼것이다.
• 옆에영역이 사이드바이다.
• 4개의 아이콘이 있는데 첫번째가 파일만들기이다.
• index.html을 만들어보자. 파일을만들때는 소문자로 만들자.
• 만들기를 완료하면 오른쪽에 index.html이 만들어진것이다.
• 이제 바탕화면에서 폴더를 들어가면 index.html이 만들어진것을 알 수 있다.
• 이제 이 starter라는 폴더가 프로젝트가 되는것이다.
• 명심할것은 파일을 따로따로 여는 것이아닌 폴더 단위 프로젝트 단위로 열어야 한다는 것이다.
• vscode에서 첫번째 입력으로 !를 입력하면 두개의 매뉴가 나오는데
  첫번째 활성에서 엔터를 하면 html 기본 구조를 얻을 수 있다.
• 여기서 ctrl+a나 전체 드래그 후 삭제할 수도 있다.
• 왼쪽 사이드바에서 main.css를 만들어보자.
• 우리의 프로젝트에는 html과 css를 추가한 것이다.
• 만약 우리가 만든 이 파일들이 필요없다 느껴지면 바탕화면에서 삭제도 할수 있지만
  vscode내에서도 delete를 이용해서 삭제할 수 있다.
• vscode내에서 삭제하면 실제 파일도 삭제된다.

 

📌느낀점

기초적인 내용이었다.

폴더단위로 개발을 하는 것을 체화해야한다.

---

⭕03. 한글화

📌강의 정리

• vscode를 한글화 하는 과정을 살펴보자.
• 사이드바 옆에 액티비티바가 있다.
• 거기서 익스텐션스가 있는데 플러그인이다.
• 그것을 클릭하면 검색할 수 있는 곳이 있다.
• 확장기능을 설치할 것인데 ‘korean’을 검색하면 제일먼저나오는것이 마소에서 만든 플러그인이다.
• install을 하면 vscode를 재부팅할것인지 묻는다.
• 이후 재부팅하면 한글화가 된다.
• vscode는 기본적인 기능만 제공하고 플러그인을 통해 확장해가며 사용할 수 있다.

 

📌느낀점

한글화 과정이었다.

한글화해야하나 고민이 된다..

일단 하지말다가 해야될것 같으면 그때 해야겠다.

---

⭕04. 정리된 코드 만들기(Beautify)

📌강의 정리

• index.html에서 !를 이용해서 기본 구조를 만든다.
• 이후 body를 찾아 클릭하면 바디라는 영역이 시작되는 부분과 끝나는 부분을 알 수 있다.
• div를 쓰면 밑에 emmet 을 통해 div라는 태그를 자동으로 완성할 수 있다.
• 이 태그 안에 Hello world를 써서 5개 만들어보자.
• 이 5개의 코드가 어지럽게 되어 있다 가정해보자 깔끔하지 않다.
• 깔끔하지 않으면 더 많은 노력이 필요하고 가독성이 떨어진다.
• 깔끔하게 정리하는 확장기능이 있다. beautify이다.
• 꽃모양의 아이콘인데 이 확장기능은 코드를 깔끔하게 만들어준다.
• 세개의 탭에서 기능기여도를 보면 명령탭에서 hooky가 있다 먼저 복사를 해둔다.
• 이제 쉬프트컨트롤p로 바로가기를 들어가서 hookyQR.beautfy를 들어가면 키바인딩을 할 수 있다.
• 뷰티파이셀렉션의 키바인딩으로 단축키를 alt+ctrl+l키로 설정해준다.
• 지저분한 코드를 다 드래그하고 아까의 단축키를 사용하면 자동으로 정리해준다.

 

📌느낀점

정말 실용적인 내용이었다.

코딩을 하다보면 분명 깔끔하지 못하게 코드를 작성하는 경우가 꽤 많다.
그럴 경우 오늘 강의 내용을 적용하면 손쉽게 해결할 수 있다.

잘 사용해야겠다.

---

⭕05. 태그 이름을 한 번에 변경(Auto Rename Tag)

📌강의 정리

• .vscode라는 폴더를 볼 수가 있다.
• 이것은 현재 프로젝트의 vscode설정 정보가 들어있는 폴더이다.
• 삭제해도 상관없지만 vscode로 프로젝트를 켜면 다시 생성되니, 일반적으론 무시하면된다.
• 보통 이름이 .로 시작하는 파일이나 폴더는 숨김 전용 파일,폴더이다.
• vscode에서 폴더를 열면 어떻게 vscode를 사용하고 있는지 정리되어있는 폴더이다.
• 무시하면된다.
• 아까 작성했던 div를 span으로 바꿔주고자 한다.
• 모든 div를 span으로 바꿔주고 싶다.
• 이때의 확장기능는 auto를 검색하면 첫번째 auto rename tag가 있다.
• 설치하고 다시 div를 span으로 바꾸면 뒤의 내용도 자동으로 바뀐다.

 

📌느낀점

지금까지는 확장기능이 뭔가 초기 설정을 바꾸는 것 같아

거부감이 들었었지만 auto rename 까지 써보니 최신기능은 신뢰되면 바로바로 쓰는 것이 맞는 것 같다.

너무 편하다.

---

⭕06. 브라우저에 출력(Live Server)

📌강의 정리

• 작성하고 있는 내용을 브라우저에 출력해보고자 한다.
• 비록 별거없지만 지금 이 index.html도 프로젝트다.
• 탭을 보면 흰색 동그라미가 있는데 이는 저장이 안되고 수정되는 중이라는 뜻이다.
• 저장은 정말 필수적이고 중요한 내용이다.
• main.css를 만들어서 div {} 를 만들어보자.
• 흰색동그라미가 나온다 이제 ctrl s 를 써서 main.css를 저장하면 사라진다.
• 하지만 이것은 단일 파일 저장이라 index는 수정중인데
• 프로젝트단위로 저장하는 것은 ctrl alt s이다.
• 이것을 사용하면 모든 파일이 동시에 같이 저장된다.
• 이번에는 확장기능에 live server를 설치하면 아래쪽 하단에 go live가 생긴다.
• 우클릭하면 오픈 위드 라이브서버가 생기는데 이것을 사용하면 (html에서만 가능)
• 브라우저가 열리며 아까의 html에서의 hello world5개를 볼수가 있다.
• 개발을 위해 임시로 로컬(여러분의 컴퓨터 환경)서버를 오픈하는것이며
  실제 호스팅(사용자들이 접근 가능한) 서버에 업로드해야 한다.

 

📌느낀점

프로젝트 단위로 저장하는 것은 꽤나 실용적일 것 같다.

그 외의 라이브 서버는 이미 알고 있었고 이게 개발을 위해 로컬에 오픈하는것이며 따라서

실제 업로드시에는 호스팅서버에 업로드해야한다는 것을 알게 되었다.

---

⭕07. 단축키 & 공백2로 만들기

📌강의 정리

• 이번에는 단축키에 대해서 알아보자.
• 왼쪽에는 기본적인 프로젝트의 구조가 나오는데
• ctrl b 를 하면 이 사이드 바를 열었다 닫았다 할 수 있다.
• ctrl p 를 하면 파일이나 기호를 빠르게 열어 탐색할 수 있다.
• ctrl shift p 를 하면 모든 명령을 검색할 수 있는 검색창이 열린다.
• ctrl w 를 하면 바로 가기 키(편집기, 현재 탭)를 닫을 수 있다.
• ctrl f 는 특정 코드를 찾을 수 있다.
• 이때의 위 아래 화살표를 누르면 이전,다음으로 찾을 수 있다.
• ctrl h 는 찾기에서 바꾸기를 할 수 있다.
• alt (up키보드 위화살표) 를 하면 해당 코드를 위로 옮길수 있다.
• alt shift down을 하면 복사하며 아래로 붙여넣기 할 수 있다.
• ctrl z를 하면 되돌리기 할 수 있다.
• 커서를 h1의 맨 앞에서 tab키를 누르면 들여쓰기가 된다.
• 이때 얇게 선이 표시되는데 이게 띄어쓰기 4개이다.
• 이것은 아래쪽 공백:4 를 통해 알 수 있고 이는 다시 클릭해서 바꿀 수 있다.
• 권장 공백은 2이다.
• 영어로는 인덴트라한다 공백을
• 왼쪽으로 내어쓰기 아웃덴트는 shift tab을 하면된다.
• 들여쓰기 된것을 쉬프트 탭을 하면 기존의 공백으로 내어쓰기 된다.
• main.css도 공백을 사용한 들여쓰기에서 2로바꿔준다.
• color: red를 추가했다 가정하자 이때 공백을 수정해주려면
  컨트롤 알트 엘키를 이용하면 4개의 공백이 2개의 공백으로 바뀐다.
• head와 body사이의 공백은 뷰티파이에서 만들어주는것이므로 잘 고려해봄직하다.
• 컨트롤 페이지업을 하면 왼쪽 탭으로 이동할 수 있다. 유용하게 사용할 수 있다.
• 컨트롤 \를 하면 분할된 창에서 작업할 수 있다. 탭에서 우클릭하면
  분할의 상세한 다른 선택지들을 볼 수 있다.
• 컨트롤 b를 누르면 사이드바가 사라진다.
• 단축키를 외워도 좋지만 우클릭 메뉴에서 찾아서 써도 좋다.

 

📌느낀점

알고있던것보다 모르던 단축키가 훨씬 많았다.

그리고 알고있으면 분명 생산성이 훨씬 증가할 것이다.

잘 익혀서 나의 코딩 생산성을 더 증가 시켜야겠다.