🐢 초반부는 천천히...
1. 브라우저 설치
☢️ 익스플로러 사용하지 말 것!
- 웹 표준 지키는 브라우저 중심 강의
- 자바스크립트의 모던 기능들 활용
-
🍿 관련 얄코영상
| 브라우저 | 설명 | 다운로드 |
|---|---|---|
| Google Chrome | 가장 널리 쓰이는 브라우저 | 👉 바로가기 |
| Microsoft Edge | 크로미움 기반, 더 가벼움 | 👉 바로가기 |
2. ⭐ 브라우저 콘솔창 설정
개발자 도구 열기
- 윈도우:
Ctrl+Shift+i - 맥:
command+option+i
콘솔 설정
- 👈 위치 왼쪽으로 이동
- 콘솔 Console 탭 열기
- 필요시 ⚙️ 버튼 클릭하여 색상 테마 조정 - 강의는 다크 테마로 진행
{ x: new Set([1, 2, 3]) }
// ⚠️ 아래 코드를 돌렸을 때 횟수(3)가 표시되어야 함
// 일부 테마에서는 안 보임 (Dark+ default 권장)
[1, 1, 1].forEach(i => console.log(i));
- 콘솔 비우기:
Ctrl+L- 윈도우, 맥 모두
3. 윈도우 한정 - 브라우저 스크롤바
엣지
- 주소창에
edge://flags입력하여 접속 scrollbar검색Window style overlay scrollbars찾아Enabled로 변경
크롬
- 주소창에
chrome://flags입력하여 접속 scrollbar검색Overlay scrollbars찾아Enabled로 변경
4. VS Code 설치
가장 인기있는 코드 에디터 중 하나입니다.
탭 사이즈 && 자동 줄바꿈 설정
-
VS Code 설정 창 열기
- 윈도우:
Ctrl+ , - 맥:
Command+ ,
- 윈도우:
Tab Size항목 2로 설정
Word Wrap항목 on으로 설정
Quote Style항목 single로 설정
플러그인 설치
| 플러그인 | 설명 | 비고 |
|---|---|---|
| Code Runner | 현재 열려 있는 자바스크립트 파일 실행 | |
| Live Server | 새로고침 없이 코딩 중인 웹 업데이트 | |
| Korean Language Pack | 에디터 한글화 | |
| indent-rainbow | 들여쓰기 색으로 구분 | |
| Bracket Pair Colorizer | 여는 괄호와 닫는 괄호 짝 지어줌 | ⚠️ Deprecated - 내장 기능이 됨 |
| One Dark Pro | 에디터 색 테마 | 다른 테마도 많음 |
| Material Icon Theme | 탐색기 아이콘 테마 | 다른 테마도 많음 |
5. Node.js 설치
자바스크립트를 컴퓨터에서 실행할 수 있는 환경입니다.
윈도우의 경우 Git Bash가 설치되어 있지 않다면 설치 권장
- 👉 Git 설치
터미널메뉴에서 새 터미널 열기- 🔗 VS 코드 터미널을 Git Bash로 설정하기