아카데미 로드맵: 로드맵 보러가기
아카데미에서 공부하기: 아카데미 강의 보러 가기
자바스크립트 재생 리스트 영상을 보시려면 아래 링크를 클릭하세요 ↙
각 영상마다 어떤 파일을 쓰는지 안내해 드렸어요. 노트만 보시는것 보다는 꼭 한번은 강의를 보시고 직접 손으로 코딩해보시는걸 추천해 드려요 📒
- Command Palette: win:Ctrl+Shift+p / mac: Cmd+Shift+p
- Extensions:
- Material Theme
- Material Icon Theme
- Prettier - Code formatter: win:Ctrl+, / mac:Cmd+, : Tab 2 Space: 2
- Bracket Pair Colorizer
- Indent Rainbow
- Auto Rename Tag: 앞의 html Tag를 변환하면
- CSS Peek: win:Ctrl+click / mac: Cmd+click: 정의된 CSS 클래스로 점프
- HTML CSS Support: 클래스 명을 변경하면 관련된 것 모두 변경
- Live Server: Open with Live Server를 커멘드에서 실행
- Markdown Preview: VS Code에 자체적으로 설치됨
- HTML, CSS, JavaScript Test Site: jsbin.com, jsfiddle.net, codesandbox.io
HTML Code를 빨리 작성하기(jsbin.com)
- HTML 양식 작성: !
- div 태그 작성: div + Tab
- div. 또는 div#
- .myClass
- 부모, 자식, 형제 노드: div>ul>li, 형제: div>ul+ol
- HTML to CSS atocompletion Extension: CSS 파일에서 HTML에 정의된 클래스를 자동으로 recommend
console.log('${variable}');위와 같이 그냥 싱글 따옴표로 작성하시면 안되요. Template String을 사용하기 위해서는 키보드 물결 모양에 있는 백틱 기호를 쓰셔야 해요.
// '이게 아니라 `이거예요
console.log(`${variable}`);이모지는 유니코드중 하나로 어느 운영체제에서 쓰실 수 있어요. 맥북: control + command + space 윈도우에서는 키보드 윈도우 + ; 누르면 만들수 있어요. 만약 쓰시는 운영체제에서 단축키가 없다면 여기에서 복사해서 쓰실 수 있어요 https://getemoji.com/
제 VS Code 설정에 설정된 폰트는 아래와 같아요:
Menlo, Monaco, 'Curier New', monospace
