자바스크립트 개발 환경 설정. Node.js 설치부터 VS Code 확장 프로그램까지 - 자바스크립트 #2

자바스크립트를 배우기 시작하려면, 먼저 자바스크립트를 실행할 수 있는 개발 환경을 설정하는 것입니다. 이 과정은 크게 두 부분으로 나눌 수 있습니다. 바로 자바스크립트 엔진 설치와 코드 편집기 설정입니다.

자바스크립트 개발 환경 설정

 

자바스크립트 개발 환경

  자바스크립트 엔진 설치

자바스크립트 코드는 브라우저에서 바로 실행할 수 있지만, 더 강력한 개발 환경을 위해 Node.js를 설치하는 것을 권장합니다. Node.js는 자바스크립트 런타임으로, 브라우저 외부에서 자바스크립트를 실행할 수 있게 해줍니다.

Node.js 설치

1) Node.js 다운로드

• Node.js 공식 웹사이트에 접속하여 운영 체제에 맞는 최신 LTS(Long Term Support) 버전을 다운로드합니다.

2) 설치

• 다운로드한 설치 파일을 실행하고, 안내에 따라 설치를 진행합니다. 설치가 완료되면, 명령 프롬프트나 터미널에서 node -v 명령어를 입력하여 설치가 제대로 되었는지 확인합니다. 설치가 성공적으로 이루어졌다면 Node.js의 버전 번호가 출력됩니다.

$ node -v v14.17.0

 

3) npm 확인

• Node.js와 함께 설치되는 npm(Node Package Manager)은 자바스크립트 패키지 매니저로, 다양한 라이브러리와 도구를 쉽게 설치할 수 있게 해줍니다. 터미널에서 npm -v 명령어를 입력하여 npm이 제대로 설치되었는지 확인합니다.

$ npm -v 6.14.13

 

Node.js가 필요한 이유

Node.js는 자바스크립트 런타임 환경으로, 브라우저 외부에서 자바스크립트를 실행할 수 있게 해줍니다. 자바스크립트를 학습하거나 웹 개발을 할 때 Node.js가 필요한 이유는 여러 가지가 있습니다.

반응형

1) 서버 사이드 개발

• Node.js는 서버 사이드 자바스크립트를 가능하게 합니다. 이를 통해 자바스크립트로 서버를 구축하고, 데이터베이스와 상호작용하며, 클라이언트 요청을 처리할 수 있습니다. Node.js는 비동기 이벤트 기반 아키텍처 덕분에 고성능, 확장성 높은 서버 애플리케이션을 개발할 수 있습니다.

2) 통합된 개발 환경

• Node.js를 사용하면 브라우저와 서버에서 동일한 언어(자바스크립트)를 사용할 수 있어 개발자가 양쪽 환경을 쉽게 오갈 수 있습니다. 이는 코드 재사용성과 생산성을 높여줍니다.

3) 패키지 매니저 (npm)

• Node.js에는 npm(Node Package Manager)이라는 강력한 패키지 매니저가 포함되어 있습니다. npm을 통해 수많은 오픈 소스 라이브러리와 도구를 쉽게 설치하고 관리할 수 있습니다. 이를 통해 개발 시간을 절약하고, 커뮤니티에서 검증된 코드를 활용할 수 있습니다.

4) 로컬 개발 환경

• Node.js는 브라우저 없이도 자바스크립트 코드를 실행할 수 있어 로컬 개발 환경에서 자바스크립트를 테스트하고 디버깅하는 데 유용합니다. 이를 통해 코드 변경 사항을 빠르게 확인하고 수정할 수 있습니다.

5) 프론트엔드 빌드 도구

• Node.js는 웹팩(Webpack), 바벨(Babel)과 같은 프론트엔드 빌드 도구를 실행하는 데 사용됩니다. 이러한 도구들은 모던 자바스크립트 개발 환경에서 매우 중요하며, 코드 번들링, 트랜스파일링, 최적화 등을 도와줍니다.

6) 다양한 프레임워크 지원

• Node.js는 다양한 프레임워크(예: Express.js, Koa.js)를 통해 웹 애플리케이션 개발을 용이하게 합니다. 이러한 프레임워크들은 서버 설정, 라우팅, 미들웨어 관리 등을 간편하게 해줍니다.

  코드 편집기 설정

자바스크립트를 작성하고 실행하기 위해서는 코드 편집기가 필요합니다. 다양한 편집기가 있지만, 여기서는 Visual Studio Code(이하 VS Code)를 사용하여 설정하는 방법을 설명합니다.

 

VS Code 설치

1) VS Code 다운로드

• VS Code 공식 웹사이트에 접속하여 운영 체제에 맞는 설치 파일을 다운로드합니다.

2. 설치

• 다운로드한 설치 파일을 실행하고, 안내에 따라 설치를 진행합니다.

VS Code 설정

1) 확장 프로그램 설치

• 자바스크립트 개발을 더 편리하게 해주는 확장 프로그램을 설치합니다. VS Code를 실행한 후, 사이드바의 확장 프로그램 아이콘을 클릭하고 아래의 확장 프로그램을 검색하여 설치합니다.
• ESLint: 자바스크립트 코드의 품질을 검사해주는 도구입니다.
• Prettier: 코드 포맷터로, 일관된 코드 스타일을 유지할 수 있게 도와줍니다.
• Live Server: 간단한 개발 서버를 제공하여, 변경된 내용을 브라우저에서 실시간으로 확인할 수 있습니다.

2) 터미널 사용

• VS Code 내장 터미널을 사용하여 Node.js 명령어를 실행할 수 있습니다. 상단 메뉴에서 Terminal > New Terminal을 선택하여 터미널을 엽니다.

간단한 프로젝트 생성

• 폴더 생성: 자바스크립트 프로젝트를 저장할 폴더를 생성합니다. 예를 들어, my-js-project라는 폴더를 만듭니다.
• VS Code에서 폴더 열기: VS Code에서 File > Open Folder를 선택하고, 생성한 폴더를 엽니다.
• 파일 생성: index.js라는 파일을 생성하고, 아래와 같이 간단한 자바스크립트 코드를 작성합니다.

console.log('Hello, JavaScript!');

• 코드 실행: VS Code 터미널에서 node index.js 명령어를 입력하여 작성한 코드를 실행합니다. 터미널에 Hello, JavaScript!가 출력되는 것을 확인할 수 있습니다.

$ node index.js Hello, JavaScript!

이렇게 자바스크립트 설치와 개발 환경 설정을 완료했습니다. 이제 자바스크립트를 학습할 준비가 되었습니다. 다음 장에서는 자바스크립트의 변수와 상수에 대해 알아보겠습니다.