[React] macOS에서 VS Code를 통한 React 환경 세팅

Step 1. Homebrew를 통해 Node.js 설치

Node.js 란

웹 브라우저 밖에서 JavaScript 코드를 실행할 수 있게 해주는 런타임(실행 환경)이다.

 

터미널에서 다음 명령어를 실행하여 Node.js를 설치한다.

brew install node

 

설치를 완료하면 다음 명령어를 통해 정상적으로 설치됐는지 확인한다.

node -v
npm -v

 

npm은 Node.js에서 사용하는 패키지 관리 도구이다. Node.js를 설치하면 자동으로 설치된다.

 

Step 2. 실습 폴더 생성

터미널에서 다음 명령어를 실행하여 실습 프로젝트를 생성하고 연다.

mkdir react-study && cd react-study

 

그리고 해당 폴더에서 vscode를 연다.

code .

 

Step 3. 유용한 VS Code 확장 프로그램 설치

1. ESLint

JavaScript 및 TypeScript 코드의 문법 오류, 잠재적 버그, 코딩 컨벤션 위반을 정적으로 분석하여 에디터에 표시하고 자동으로 교정해주는 확장 프로그램

 

2. Prettier - Code formatter

들여쓰기, 줄 바꿈, 따옴표 등 사전에 설정한 규칙에 따라 코드 서식을 일관되게 자동 정렬해 주는 확장 프로그램

 

3. Error Lens

코드 오류와 경고 메시지를 해당 코드 라인 끝에 인라인 텍스트와 배경색으로 즉시 출력하여 빠르게 문제를 인지하도록 돕는 확장 프로그램

 

확장 프로그램을 모두 설치했다면 Cmd + ,를 눌러 Settings를 열고 Format On Save를 검색하여 체크한다.

 

그 다음 Default Formatter를 검색하여 Formatter를 Prettier - Code formatter로 지정한다.

 

Step 4. 웹 브라우저 확장 프로그램 설치

https://chromewebstore.google.com/ 에서 React Developer Tools를 설치한다.

 

설치 한 다음 브라우저를 재시작한 후에 개발자 도구(F12, Cmd+Option+I)를 확인해 보면

Components 탭과 Profiler 탭이 생긴 것을 볼 수 있다.

 

Step 4. 실습 프로젝트 생성

터미널에서 다음 명령어를 입력하여 프로젝트 생성을 시작한다.

npm create vite@latest

 

대화형으로 물어보는 질문에는 다음과 같이 대답한다.

 

프로젝트 생성이 완료되면 다음 명령어를 입력하여 생성한 프로젝트 폴더에 진입한다.

cd lab

 

그리고 다음 명령어들을 실행하여 로컬 환경에서 웹 서버를 구동한다.

npm install
npm run dev

npm install  : 프로젝트 구동에 필요한 외부 라이브러리 및 도구 등의 의존성 패키지를 다운로드하여 설치
npm run dev : 로컬 서버 구동

 

 

Step 5. 웹 브라우저를 통해 확인해 보자.

터미널에 뜨는 http://localhost:5173/ 를 Cmd+좌클릭 하여 열거나 브라우저에 입력하여 접속한다.

정상적으로 로컬 환경에서 웹 서버가 구동중인 것을 볼 수 있다.

 

이제 src/App.jsx를 열고 아무 글자나 바꿔서 저장했을 때, 새로고침 없이 브라우저가 즉시 바뀌는지 확인해 보자.

예를 들어, 지금 출력되는 Get started 문구를 Hello, World! 로 변경해 보자.

변경 후 저장하면

터미널에 위와 같이 변경된 파일과 시간이 출력되고

 

브라우저를 확인해 보면

즉각적으로 변경 사항이 반영된 것을 볼 수 있다.

 

개발 서버가 파일 변경을 감지해 웹소켓으로 전달하면, HMR(Hot Module Replacement)과 React Fast Refresh가 새로고침 없이 변경된 컴포넌트 모듈만 브라우저 메모리에서 실시간으로 교체하기 때문에 결과적으로 새로고침없이 브라우저에 즉각적으로 반영된다.