[JavaScript] 환경 세팅, console, 플로그인, node.js, 세미콜론, 주석

브라우저 콘솔창 설정

개발자 도구 열기

• 윈도우: Ctrl + Shift + i
• 맥: command + option + i\

콘솔 설정

• 👈 위치 왼쪽으로 이동
• 콘솔 Console 탭 열기
• 콘솔 비우기: Ctrl + L - 윈도우, 맥 모두

윈도우 한정 - 브라우저 스크롤바

엣지

• 주소창에 edge://flags 입력하여 접속
• scrollbar 검색
• Window style overlay scrollbars 찾아 Enabled로 변경

크롬

• 주소창에 chrome://flags 입력하여 접속
• scrollbar 검색
• Overlay scrollbars 찾아 Enabled로 변경

탭 사이즈 && 자동 줄바꿈 설정

1. VS Code 설정 창 열기
   • 윈도우: Ctrl + ,
   • 맥: Command + ,

 

1. Tab Size 항목 2로 설정

 

1. Word Wrap 항목 on으로 설정

 

1. Quote Style 항목 single로 설정

 

플러그인 설치

플러그인설명비고

Code Runner	현재 열려 있는 자바스크립트 파일 실행
Live Server	새로고침 없이 코딩 중인 웹 업데이트
Korean Language Pack	에디터 한글화
indent-rainbow	들여쓰기 색으로 구분
Bracket Pair Colorizer	여는 괄호와 닫는 괄호 짝 지어줌	⚠️ Deprecated - 내장 기능이 됨
One Dark Pro	에디터 색 테마	다른 테마도 많음
Material Icon Theme	탐색기 아이콘 테마	다른 테마도 많음

 

Node.js 설치

자바스크립트를 컴퓨터에서 실행할 수 있는 환경입니다.

• 👉 https://nodejs.org

 

윈도우의 경우 Git Bash가 설치되어 있지 않다면 설치 권장

• 👉 Git 설치
• 터미널 메뉴에서 새 터미널 열기
• 🔗 VS 코드 터미널을 Git Bash로 설정하기

 

 

Node.js의 REPL 사용해보기

• Read Eval Print Loop
• node로 자바스크립트 명령 입력 모드 진입 후 입력
• 모드 종료: ctrl + c 2회

 

3. Node.js 환경에서 .js파일로 실행하기

• VS Code에서 프로젝트 폴더 열람
• (원하는 파일명).js 파일 생성
• 코드 입력 후 저장
• node (파일명)로 실행
• Code Runner 확장 기능 사용
  • 윈도우: Ctrl + Alt + N
  • 맥: control + option + N

console이란 무엇인가요?

자바스크립트의 기능 ❌ - 환경의 기능 - 👇 맨 아래에 추가설명

• 브라우저: 🔗 Web API의 기능 중 하나
• Node.js: 🔗 디버깅을 위한 모듈 - 브라우저의 콘솔과 유사하게 동작
• 아래를 브라우저와 Node.js(REPL, 코드파일 실행)에서 각각 실행해보세요!
• console.log(this);

💡 소프트웨어 외적으로는 영향을 끼치지 않음 - 개발자용 기능

• 콘솔을 열어 확인하지 않는 이상 보이지 않음

 

자바스크립트 런타임 환경 runtime environment 이란?

자바스크립트 코드를 실행할 수 있는 소프트웨어

• 컴퓨터가 회사라면, 자바스크립트란 언어를 구사하는 직원
• 대표적으로 브라우저와 Node.js 등이 있음
• 콘솔 등은 자바스크립트 런타임 환경의 기능

주석 comment - 컴퓨터는 무시하는 메시지

👉 MDN 문서 보기

• 사람에게 보여줄 목적으로 작성
• 코드에 대한 설명, 추후 진행해야 할 사항 등...

console.log('Hello');

// 사뿐히 즈려밟고 가시옵소서

// console.log('나를 밟고 가라');

console.log('World');

• 윈도우: ctrl + /
• 맥: command + /

주석은 가능한 많이 달지 않는 것이 좋습니다.

• 주석이 많이 필요한 코드 : 나쁜 코드
• 주석 없이도 알아보기 쉬운 코드를 짤 것!

 

---

 

💡 자바스크립트와 세미콜론 ( ; )

• 필요성에 대해 다양한 의견
• 보통 회사에 따라서 세미콜론 여부를 결정한다.

세미콜론이 없더라도 js는 세미 인터프린터 언어(필요에 따라 컴파일 과정을 거치는 언어)이기 때문에 ASI가 ;을 자동생성한다.

IF, 세미콜론을 쓰지 않는다면 아래 두 가지를 유의 해야 한다.

 

1. 두 문장을 한 줄에 동시에 쓸 때는 세미콜론을 작성해야 한다.

ex) console.log();  console.log()

 

2. IIFE를 사용할 때는 세미콜로을 작성해야 한다.

--> 

ex) const x = y 

     ; (function() {} )