# 오늘 한 일

• Visual Studio Code 설치
  (+ 업무효율을 높여주는 추천 익스텐션)

1) Material icon theme

- 사이드바의 아이콘을 직관적으로 변경

2) Prettier

- (알아보기 쉽게) code를 스타일링

3) bracket pair colorizer2

- (알아보기 쉽게) 괄호를 색상별로 정리

4) Indent-rainbow

- (알아보기 쉽게) 들여쓰기를 색상별로 정리 

5) Auto rename tag

- close tag를 자동으로 작성

6) CSS PEEK

7) HTML CSS SUPPORT

8) LIVE SERVER

  - 실시간으로 코드의 내용을 화면에 표시

9) html to css autocompletion

참고: 추천 익스텐션

• node js 설치
  - installer: 웨이터. 나에게 맞는 음식을 찾아서 가져다주기 때문에 먹기만 하면 된다.
  - binary: 음식 그 자체. 나에게 맞는 음식을 내가 찾아먹어야 한다.
  - source code: 원자재와 레시피. 나에게 맞는 음식을 직접 만들어 먹어야 한다.

참고: Quora

• Babel이란
  - 자바스크립트 상위버전과 하위버전을 호환시켜주는 컴파일러

• Emmet 사용방법

1) 태그 자동완성 ex) div>(header>ul>li*2)+footer>div

    <div>
      <header>
        <ul>
          <li></li>
          <li></li> 
        </ul>
      </header>  
      <footer>
        <div></div>
      </footer>
    </div>
    
2) 숫자 자동완성 ex) p.class${item $} *5

    <p class="class1">item 1</p>
    <p class="class2">item 2</p>
    <p class="class3">item 3</p>
    <p class="class4">item 4</p>
    <p class="class5">item 5</p>
    
3) 임의의 글자 자동완성 ex) p>lorem4
	
    <p>Lorem ipsum dolor sit</p>
    

참고: Emmet사용법

• VSC 단축어 (맥os 기준)
  - toggle sidebar: (cmd) + (b)
  - 파일열기: (cmd) + (p)
  - 터미널: (control) + (`)
  - 동일단어 동시 선택: (cmd) + (d)

참고: 단축어

내일 할 일

• 위코드 사전 스터디
• 자바스크립트 강의듣기