개발 환경을 구축해보자.
IDE 와 Node.JS 두가지를 설치해야 한다.
IDE VS Code 설치하기 ( MAC 과 Windows )
![](https://blog.kakaocdn.net/dn/eXJ2M5/btsHo5yCSWv/8IEENFfwE7H4M9n0C9B2g0/img.png)
개발환경은 IDE (Integrated Development Environment) 라는 어플리케이션을 사용한다.
여러가지의 개발자 툴을 결합하여 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리할 수 있는 환경을 제공하는 소프트웨어다. 마치 우리가 사용하는 맥가이버칼 과 같이 멀티툴의 느낌이다.
![](https://blog.kakaocdn.net/dn/kxKg9/btsHnIYsJaT/787tZOEwNNu8RKC1mKfXZ0/img.png)
![](https://blog.kakaocdn.net/dn/HeVI9/btsHn5eLOSD/0yj8cK8cOKk4fvBIE6vm5k/img.png)
글로벌 IDE 점유율을 조사해보았다. (2024년 기준)
VS, VSCode 가 최상위권을 점유하고 있고, 계속 상승세를 타고 있다.
또한 Windows OS 제조사인 MicroSoft 에서 개발하고 관리중인 오픈소스 IDE이다.
메모장처럼 아주 가볍지만(응?무겁던데?) 확장 프로그램을 통해 기능을 끝 없이 확장 가능한 만능 IDE다.
다운로드는 아래의 공식 홈페이지를 통해 다운로드 가능하다.
![](https://blog.kakaocdn.net/dn/HzMxE/btsHoqbWhBy/yDZ580BQrlZtrshqTnGfU0/img.png)
![](https://blog.kakaocdn.net/dn/djUnYE/btsHo3HySNx/KLgbzrOOL48rMwXjw5Qq91/img.png)
자신의 PC 운영체제와 아키텍처에 맞게 다운로드를 한다.
VS Code 설치방법 - 맥북
![](https://blog.kakaocdn.net/dn/bmVRf7/btsHost4vFB/KlrxCo1u37DbqDBIl4uKSK/img.png)
다운로드 받은 파일을 더블클릭하여 압축을 해제
![](https://blog.kakaocdn.net/dn/by4awk/btsHnt1pZ5K/gnUysyPVV0mH5huc2W1LBk/img.png)
Visual Studio Code파일을 더블클릭하여 실행
![](https://blog.kakaocdn.net/dn/2PlO4/btsHnHd9y6h/AXmMcjwhmwKBjpIRlD6Pdk/img.png)
위와 같은 메시지가 뜹니다. [Finder에서 보기]를 클릭합니다.
![](https://blog.kakaocdn.net/dn/rGwIk/btsHpKmWE0I/nDez7ezXOkDsZbKK1xHGpk/img.png)
Visual Studio Code를 우클릭하고, [열기]
![](https://blog.kakaocdn.net/dn/69zOm/btsHnVJ9IAK/RKgdXN9WEWefnB7E2jtFx1/img.png)
사진 설명을 입력하세요.
[열기]를 누르시면 설치가 끝! 이제부터 그냥 열 수 있다!
![](https://blog.kakaocdn.net/dn/pW6av/btsHpmNxj0r/H7Kcrl8PJHiSBvKOLmvkck/img.png)
VS Code 가 실행되었다.
조금 더 깔끔하게 하고자 한다면, 어플리케이션 폴더로 드래그 앤 드롭을 해준다.
VS Code 설치방법 - Windows
![](https://blog.kakaocdn.net/dn/dLmKdr/btsHou6uaNv/gztbVKUKNUGirxDODByfv0/img.png)
![](https://blog.kakaocdn.net/dn/c5jQcL/btsHnxpdeHF/bYnSo4HycAGm9KscbZ75e1/img.png)
![](https://blog.kakaocdn.net/dn/ZYGLQ/btsHoG6N7zx/s2YWP1JyIg92jlkyGAEkL0/img.png)
VS Code 와 마찬가지로, 자신이 사용하는 운영체제와 아키텍처에 맞게 다운로드 한다.
![](https://blog.kakaocdn.net/dn/w2uqX/btsHnclliYy/dbxk3TyWXnCo6Ied4LnD2K/img.png)
계속을 눌러준
![](https://blog.kakaocdn.net/dn/czYsJ7/btsHovYE3vd/ssrsy5N0E79gAlcjkHMDu0/img.jpg)
계속을 다시 한번 눌러준다.
![](https://blog.kakaocdn.net/dn/bPSCRm/btsHn6Y49uP/rqP6SkdBTMGUTQiZhPBLTk/img.jpg)
사진 설명을 입력하세요.
동의를 눌러준다
![](https://blog.kakaocdn.net/dn/bJ34wH/btsHpyUu4Hv/39UQzrpBLugjPKtuDc86v1/img.jpg)
사진 설명을 입력하세요.
다시 설치를 눌러준다
![](https://blog.kakaocdn.net/dn/DgdYb/btsHod4TOhc/xxAujE4JYivWag3pPlqSL0/img.png)
사진 설명을 입력하세요.
설치 완료!, 닫기를 누른다
![](https://blog.kakaocdn.net/dn/BcfmX/btsHmWiFTHK/2MyI7N9pKAULMr6lgTe9K0/img.png)
사진 설명을 입력하세요.
설치가 잘 되었는지 확인하기 위해 터미널을 열고 아래의 코드를 입력한다.
# 설치 되어있는 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 환경에서 벗어날 수 있습니다.