📚 [모던 자바스크립트 Deep Dive] 3장 자바스크립트 개발 환경과 실행 방법
📝 3.1 자바스크립트 실행 환경
모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있지만 둘의 용도는 다르다.
브라우저 ⇒ HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는것이 목적
Node.js ⇒ 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적
📝 3.2 웹 브라우저
웹 브라우저 중 크롬은 ECMAScript 사양을 준수하는 것은 물론이고 시장 점유율이 가장 높다.
-
개발자 도구
- 크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구이며 브라우저에 기본 내장되어 있으므로 별도로 설치할 필요가 없다.
-
콘솔
- 자바스크립트 코드에서 에러가 발생했을 때 가장 우선적으로 살펴봐야 할 곳이다.
- 구현 단계에서 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해
console.log메서드를 사용하는 경우가 많다.
-
브라우저에서 자바스크립트 실행
- 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.
-
디버깅
- 디버깅은 먼저 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것이다.
📝 3.3 Node.js
클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다.
프로젝트 규모가 커짐에 따라 프레임워크 또는 라이브러리는 도입하거나 여러 가지 도구를 사용할 필요가 있는데, 이때 Node.js와 npm이 필요하다.
Node.js
자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행환경이다.
npm(node package manager)
자바스크립트 패키지 매니저로 Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.
📕 Next.js
📝 useRouter
❗ useRouter 사용 시 주의사항 ❗
import { useRouter } from "next/router";는 12버전에서 사용하던 것
import { useRouter } from "next/navigation";를 사용해야한다!!!
useRouter()는 push를 사용하여 원하는 경로로 이동할 수 있다.
📝 환경변수
개발할 때 사용하는 API 주소와 실서버에 사용하는 API 주소가 다를 때 별도로 관리하면 편하다.
.env.local 파일을 만들어 아래와 같은 정보를 작성하여 사용하면된다.
환경변수에는 패스워드와 같이 기밀이 중요한 데이터가 포함 될 가능성이 높다.
기밀정보까지 클라이언트에 노출이 되면 유출이 될 수 있기때문에 환경변수는 Server Component에서만 접속이 가능하다.
웹 브라우저를 위한 환경변수를 사용하고 싶다면 NEXT_PUBLIC_을 접두사로 붙여야 한다.
