드림코딩 자바스크립트 입문편 강의 노트

드림코딩 아카데미

아카데미 로드맵: 로드맵 보러가기

아카데미에서 공부하기: 아카데미 강의 보러 가기

노트 설명

자바스크립트 재생 리스트 영상을 보시려면 아래 링크를 클릭하세요 ↙

자바스크립트 기초 강의 (ES5+) 영상 목록 리스트

각 영상마다 어떤 파일을 쓰는지 안내해 드렸어요. 노트만 보시는것 보다는 꼭 한번은 강의를 보시고 직접 손으로 코딩해보시는걸 추천해 드려요 📒

---

자주 받는 질문

1. 엘리의 비쥬얼 스튜디오 셋팅이 궁금해요

비쥬얼 스튜디오 설치 & 익스텐션

• 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

Emmet 영상 제일 마지막에 익스텐션 하나더

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

주석 코드 색상 엘리와 똑같이 바꾸기

2. 왜 저는 모든 문자열이 다 출력 되나요?

console.log('${variable}');

위와 같이 그냥 싱글 따옴표로 작성하시면 안되요. Template String을 사용하기 위해서는 키보드 물결 모양에 있는 백틱 기호를 쓰셔야 해요.

// '이게 아니라 `이거예요
console.log(`${variable}`);

3. 저도 이모티콘 쓰고 싶어요!

이모지는 유니코드중 하나로 어느 운영체제에서 쓰실 수 있어요. 맥북: control + command + space 윈도우에서는 키보드 윈도우 + ; 누르면 만들수 있어요. 만약 쓰시는 운영체제에서 단축키가 없다면 여기에서 복사해서 쓰실 수 있어요 https://getemoji.com/

4. VS Code에서 폰트 뭐예요?

제 VS Code 설정에 설정된 폰트는 아래와 같아요:

Menlo, Monaco, 'Curier New', monospace