[React] 개발 환경 설치하기 + VS Code 플러그인

NVM, Nodejs, NPM

nvm과 npm의 차이점은 아래 글을 참고했다. 

https://lynmp.com/ko/article/tb585d114096490055

nvm 과 npm 구별하기 - LYNMP

• nvm : nodejs를 설치해주고 버전 관리를 해주는 프로그램이다.
• Nodejs : 웹 브라우저가 아닌 컴퓨터(또는 서버)에서 자바스크립트를 실행할 수 있게 해주는 것이다.
• npm은 nodejs와 함께 설치된다.

앱 생성하기 creat-react-app

리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구이다. 만약 create-react-app이 없다면 필요한 패키지들을 일일이 찾아서 package.json에 추가해야한다. 

npx create-react-app [프로젝트 이름]

앱 구동하기 npm start

npm start

---

VS Code 플러그인 설치하기

1. Reactjs code snippets
   • 리액트에서 자주 사용하는 코드 뭉치를 자동으로 완성해주는 것이다.
   • rcc 라고 입력하면 자동으로 코드가 생성된다. 
   • rsc 라고 입력하면 함수형 컴포넌트를 생성한다.
2. Prettier
   • 코드 스타일을 자동으로 변환해주는 formatter
   • 작은 따옴표 설정, 저장 시 자동으로 변경하기 설정