얼렁뚱땅

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

React

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

당당익명 2021. 9. 10. 17:24

NVM, Nodejs, NPM

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

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

 

nvm 과 npm 구별하기 - LYNMP

사용을 하면서도 가끔가다 둘의 차이가 뭐였더라? 하는 의문을 갖게되는 nvm 과 npm. 아마도 알파벳 하나의 차이 때문이라고, 비영어권 사용자의 애환이라고 변명을 하는것도 슬슬 졸업을 해야겠

lynmp.com

  • 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
    • 작은 따옴표 설정, 저장 시 자동으로 변경하기 설정

 

'React' 카테고리의 다른 글

[React] property 프로퍼티  (0) 2021.09.15
[React] JSX, Component  (0) 2021.09.15
[React] 리액트 개념  (0) 2021.09.10