모던 자바스크립트 딥다이브 3장 - 자바스크립트 개발 환경과 실행 방법

 

 

 

---

 

 

자바스크립트 실행 환경

 

모든 브라우저는 자바스크립트 엔진을 내장하고 있다.

또한 Node.js도 자바스크립트 엔진을 내장하고 있다.

= 자바스크립트는 브라우저 + 노드 환경에서 실행할 수 있다.

 

단, 브라우저와 노드는 용도가 서로 다르다.

브라우저는 -> 웹페이지를 화면에 렌더링 이라면,

노드 -> 브라우저 외부에서 자바스크립트 실행 환경 제공 이 목적이다.

따라서 브라우저와 노드는 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.

(브라우저는 DOM API 기본 제공, 노드는 제공X 등...)

---

웹 브라우저

 

다양한 웹 브라우저에서 크롬이 시장 점유율이 가장 높고, 많이 쓰인다. (하지만 난 웨일,,,~)

---

개발자 도구

 

브라우저에 기본 내장되어 있으므로 별도로 설치할 필요가 없고,

윈도우에서 F12 단축키로 바로 열린다.

 

기능은,,, 많다

기능	설명	활용 사례
Elements	DOM 구조 및 CSS 수정	레이아웃 디버깅, 실시간 스타일 변경
Console	JavaScript 코드 실행 및 디버깅	오류 확인, 로그 확인
Network	네트워크 요청/응답 추적	API 호출 확인, 로딩 속도 분석
Sources	소스 코드 보기 및 디버깅	중단점 설정, 코드 흐름 추적
Performance	성능 분석	렌더링 시간 최적화
Application	스토리지 및 리소스 관리	쿠키, 캐시, 로컬스토리지 확인
Security	보안 설정 확인	SSL 인증서 확인, 취약점 점검
Lighthouse	품질 점수 제공	성능, SEO, 접근성 개선
Device Mode	반응형 디자인 테스트	다양한 화면 크기에서 UI 확인

 

간단하게 정리해도 요정도

---

콘솔은 위에도 정리되어있지만,

가장 많이 쓰이는 패널로, 실행 결과 확인 및 에러 확인 등등... 굉장히 여러 부분에서 많이 쓰인다.

대표사진 삭제

사진 설명을 입력하세요.

뭐 이렇게 계산도 하고요... 껄껄

---

브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있지만

프로젝트 규모가 커지면 다양한 프레임워크, 라이브러리를 도입시키거나 도구를 사용할 필요가 생기면서

Node.js 와 npm이 필요하게 됐다.

 

노드는

https://nodejs.org/ko

여기서 lts 버전을 다운받으면 되고,

 

내는 노드 버전을 쉽게 관리하고 싶어요...

내는 다양한 노드 버전을 사용하고 싶어요...

하면 노드 nvm 이란 도구를 검색해 설치하면 된다.

 

노드 홈페이지와 다르게 깃허브에 올라와서 설치 방법이 조금 헷갈릴 수 있는데

검색하면 아주 친절하게 설명해주는 글들이 많다... 따봉

---

그다음은 vs code 설치 방법을 설명하고 있다

https://code.visualstudio.com/

깔고 한국어 번역 등 기본적인 확장 플러그인을 검색해 추가하면 이제 최강이 된다,,,