본문 바로가기

카테고리 없음

개발환경 설치하기 - VS Code / Node.JS 맥북과 윈도우

 

개발 환경을 구축해보자.

IDE 와 Node.JS 두가지를 설치해야 한다.

 

IDE VS Code 설치하기 ( MAC 과 Windows )

개발환경은 IDE (Integrated Development Environment) 라는 어플리케이션을 사용한다.

여러가지의 개발자 툴을 결합하여 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리할 수 있는 환경을 제공하는 소프트웨어다. 마치 우리가 사용하는 맥가이버칼 과 같이 멀티툴의 느낌이다.

 

글로벌 IDE 점유율을 조사해보았다. (2024년 기준)

VS, VSCode 가 최상위권을 점유하고 있고, 계속 상승세를 타고 있다.

또한 Windows OS 제조사인 MicroSoft 에서 개발하고 관리중인 오픈소스 IDE이다.

메모장처럼 아주 가볍지만(응?무겁던데?) 확장 프로그램을 통해 기능을 끝 없이 확장 가능한 만능 IDE다.

 

 

다운로드는 아래의 공식 홈페이지를 통해 다운로드 가능하다.

https://code.visualstudio.com/download

 

자신의 PC 운영체제와 아키텍처에 맞게 다운로드를 한다.

 

 

VS Code 설치방법 - 맥북

다운로드 받은 파일을 더블클릭하여 압축을 해제

 

 

Visual Studio Code파일을 더블클릭하여 실행

 

위와 같은 메시지가 뜹니다. [Finder에서 보기]를 클릭합니다.

 

Visual Studio Code를 우클릭하고, [열기]

 

사진 삭제

사진 설명을 입력하세요.

 

[열기]를 누르시면 설치가 끝! 이제부터 그냥 열 수 있다!

 

VS Code 가 실행되었다.

조금 더 깔끔하게 하고자 한다면, 어플리케이션 폴더로 드래그 앤 드롭을 해준다.

 

VS Code 설치방법 - Windows

방법은 그냥 Next 누르면 끝

 

 

다운로드는 아래의 공식 홈페이지를 통해 다운로드 가능하다.

Node.JS 설치하기

https://nodejs.org/ko/

VS Code 와 마찬가지로, 자신이 사용하는 운영체제와 아키텍처에 맞게 다운로드 한다.

 

 

계속을 눌러준

 

 

계속을 다시 한번 눌러준다.

 

사진 삭제

사진 설명을 입력하세요.

동의를 눌러준다

 

사진 삭제

사진 설명을 입력하세요.

다시 설치를 눌러준다

 

사진 삭제

사진 설명을 입력하세요.

설치 완료!, 닫기를 누른다

 

사진 삭제

사진 설명을 입력하세요.

설치가 잘 되었는지 확인하기 위해 터미널을 열고 아래의 코드를 입력한다.

# 설치 되어있는 Node.js의 버전을 조회합니다.
node -v
# 설치 되어있는 npm (Node Package Manager)의 버전을 조회합니다.
npm -v
 
 

 

Node.js의 REPL 환경

 

- REPL 환경이란?

- 일반적으로 "REPL 환경" 이라 함은 아래와 같이 설명할 수 있습니다.

> 입력 받은 코드를 읽어(Read)들여 메모리에 저장하고, 평가(Evaluate)된 값을 출력(Print)합니다.

특정 신호를 입력받기 전까지 위의 과정을 반복(Loop)합니다.

>

- 쉽게 말하자면, 사용자가 입력한 코드의 결과를 즉시 확인할 수 있기 때문에 간단한 코드 문법을 테스트하는데 아주 적합한 개발 환경으로 볼 수 있습니다.

- 예를 들어, Node.js REPL 환경에서 console.log("Hello World")와 같은 코드를 입력하면 즉시 “Hello World”라는 결과를 출력받을 수 있습니다.

- Node.js는 REPL 환경을 제공하고 있으며, 우리는 그것을 쉽게 이용할 수 있습니다.

 

 

 

- 웹 브라우저의 콘솔(Console)과의 차이

 

웹 브라우저의 개발자 도구 콘솔도 REPL 환경이지만 Node.js REPL 환경과는 약간의 차이가 있습니다. 웹 브라우저의 콘솔은 Node.js가 제공하는 여러 API와 라이브러리를 사용할 수 없지만, 대신 웹 브라우저의 API를 이용하여 DOM(Document Object Model)을 제어할 수 있습니다.

 

즉, 웹 브라우저에서 사용자가 직접 HTML 요소를 생성하거나 변경하는 등의 작업을 할 수 있습니다.

 

Node.js REPL 환경은 백엔드 서버(Server)의 코드를 테스트하거나 실험해보는 데에 더 적합하고, 웹 브라우저 콘솔은 클라이언트(Client)의 코드를 작성하거나 테스트 하는데에 더 적합합니다.

 

 

REPL 환경을 어떻게 이용할까요?

Windows

커맨드 창 또는 Git Bash를 켜고, node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

 

Linux/macOS

터미널을 켜고 node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

 

VS Code

상단의 New Terminal을 클릭하거나 아래의 단축키를 입력하여 터미널을 열 수 있습니다.

1. 터미널을 켜고 node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

 

Ctrl + C를 두번 누르거나, Ctrl + D를 한번 누르면 REPL 환경에서 벗어날 수 있습니다.