[Spring boot + React.js + MySQL 무작정 따라하기] (2) 개발툴 설치(Visual Studio Code, node.js)

개발툴의 선택지는 크게 세가지였습니다. 

• IntelliJ - 강력한 기능, 자동 코드생성의 편의성, 유료
• Eclipse - 10여년을 쓴 익숙함, 무료, 무거움
• Visual Studio Code - 적당한 편리함, 가벼움, 무료

개인적인 코멘트에서도 느끼실 수 있겠지만, Visual Studio Code(이하 vscode)가 최선의 선택이라고 생각했습니다. IntelliJ가 제일 낫다는 평가였지만, 아직 돈을 쓰고 싶지는 않았습니다. Eclipse는 제일 익숙한 툴이긴 하지만, 원하는 설정을 만들기에는 너무 복잡할 것 같았습니다. 결론은 뭐 특별한 근거도 이유도 없습니다.

 

1) Visual Studio Code

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

파일을 받아서 원하는 곳에 설치하시면 됩니다. 어짜피 workspace는 따로 설정할 수 있으니 큰 문제는 없습니다.

기본 설치 후 실행 화면

 

한국어 언어팩을 설치합니다. 물론 선택사항입니다. 저는 아무래도 툴을 익히는데 도움이 되지 싶어서 설치했습니다.

한국어 언어팩 설치

설치 완료 후 [Restart Now]를 눌러 툴 재시작

한국어 언어팩 설치 후 화면

일단 여기까지 설치가 되었다면 성공입니다. 

 

2) node.js

https://nodejs.org/en/download/

 

node.js로 backend를 만들지 않음에도 불구하고 설치는 했습니다. 설치 안해도 된다고 생각했는데, 차후에 react 설치시에 문제가 생겼습니다. npm 명령어를 실행하기 위해 필요한 듯 합니다. 자세한 건 잘 모르겠습니다.

설치는 installer 버전과 binary 버전이 있는데 큰 차이는 없어보입니다. 저는 installer 버전을 사용했습니다. 

 

 

OS와 상황에 맞게 다운로드. 일반적으로는 이미지에 선택된 것으로.

설치 과정의 이미지는 생략합니다. 

설치 후 설치폴더를 확인 했을때 아래와 같으면 정상적으로 설치되었다고 보아도 무방합니다.

설치폴더 확인

위의 폴더를 path에 추가합니다.

• [제어판] - [시스템] - [고급시스템 설정] - [고급] 탭 - [환경변수] - PATH 에 추가

Windows10 기준 예

 

터미널에서 위와 같이 실행하여 정상 출력되면 설정 완료.

 

[파일] - [작업영역에 폴더 추가] 한 후 터미널로 해당 작업폴더에 접근한다.

아래와 같이 터미널에서 [node -v], [npm -v] 명령어를 입력했을때 아래와 같이 출력되면 정상

 

---

이 이후의 작업은 하지 않아도 무방합니다.

그냥 재미삼아 해볼 분들만 따라하세요.

 

터미널에서 아래와 같이 npm init -y 를 입력합니다.

실행 후에 package.json 파일이 생성됩니다.

 

실행 후 package.json 파일 생성

해당 폴더에서 app.js라는 이름의 새 파일을 작성하고

테스트 소스코드를 작성한다.

 

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Node.js\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

 

[실행] - [디버깅 시작] 하면 디버그 콘솔에 아래와 같이 console.log의 내용이 찍히고,

브라우저로 접근했을때 res.end 의 내용이 출력되면 정상.

메뉴 위치와 [디버깅 시작] 후 디버그 콘솔 화면

디버그 콘솔의 제일 아랫 줄에 표시 된 대로 브라우저에 접속

(위 화면 기준으로 Server running at http://127.0.0.1:3000/)

브라우저로 URL 접근 시 출력화면