002. 작업 환경 설정

리액트 작업 환경 설정

1. Node.js 설치

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.

Node.js가 있어야 웹 브라우저가 아닌 환경에서도 자바스크립트를 사용하여 연산할 수 있다.

Node.js의 등장으로 자바스크립트는 웹 개발을 너머 웹 서버, 모바일 앱, 데스크톱 앱까지 개발할 수 있게 되었다.

React.js가 Node.js로 만들어진 것은 아니지만, React.js는 프레임워크가 아닌 라이브러리로, 다른 라이브러리와 함께 사용되는 경우가 많은데 그 라이브러리들이 Node.js를 사용하기 때문에 설치하는 것이다.

Node.js를 설치해야 Node.js 패키지 매니저 도구인 npm이 설치된다. npm에는 패키지가 100만 개 이상이 저장되어 있다.

Node.js 웹 사이트를 검색 후 가서 설치하면 된다. macOS에서는 nvm 설치도 고려해보면 좋다.

Node.js의 대항마 yarn도 있다. yarn이 더 빠르고 효율적인 캐싱이 가능하다고 하니 참고해도 좋다. 하지만 안 쓴다고 개발을 못하는 것은 아니니 선택사항이다.

2. 에디터 설치

보통 VSCode를 많이 사용한다. macOS는 Homebrew를 통해서 설치하여야 하고 애플 실리콘 칩셋의 경우 설치 방법이 조금 까다로울 수 있다. 별도로 다룬 내용을 참고해서 설치하도록 한다.

VSCode는 다양한 Extension을 활용하는 것이 좋다.

본인에게 맞는 Extension 리스트를 적는다.

• Code Spell Checker : 오타방지
• Error Lens : 코드 라인에서 에러를 알려줌. 특히 괄호나 세미콜론 누락 등.
• Korean Language Pack
• Live Server : HTML만 작성 시 실시간으로 변화되는 모습을 웹 브라우저에 반영시켜줌.
• TabOut : 자동완성되는 괄호 탭으로 빠져 나가기.
• Prettier : 코드 스타일을 자동으로 정리해주는 formatter.
• ESLint : 자바스크립트 문법 및 코드 스타일 검사해주는 도구.

3. Git 설치

Git은 형상 관리 도구로 프로젝트 버전을 관리하고 협업 시 핵심적인 역할을 함. 버전 관리에 용이하므로, 분야를 막론하고 개발자라면 별도로 배워야 함.

구글 등 포털사이트에 git-scm을 검색해서 본인의 OS에 맞는 git을 설치한다.

4. (macOS의 경우) VSCode나 터미널의 가독성이 초기설정 자체는 윈도우에 비해 떨어지므로 초보자는 zsh를 별도로 설치.

5. 리액트 프로젝트 setup

create-react-app (CRA) 방식과 vite를 이용하는 방식이 있는데, 가장 자료가 많은 것은 CRA이고 ChatGPT 등에게 질문해도 CRA 위주로 답변해주지만, 파일을 js를 사용하느냐 jsx를 사용하느냐 정도의 차이만 체감이 되긴 하나, 속도가 빠른 vite를 이용하도록 한다.

VSCode에서 터미널을 열고 npm create vite@latest를 입력하면 리액트 패키지가 셋업된다.

이후 GitHub에 올릴 때는 파일 개수와 용량이 커 node_modules 파일(리액트 패키지 파일) 자체는 .gitignore에 자동으로 등록되니, 프로젝트를 클론받을 때는 npm install을 입력해서 의존성을 모두 설치해주도록 한다.