[React] react 설치와 에디터 세팅(VScode)

 

일단 react를 설치하기 위해선 기본적으로 node가 필요하니 node 부터 설치해야 한다.

 

https://nodejs.org/ko

Node.js

18버전 이상으로 설치

 

실제로 리액트는 UI를 구성할 때 필요, 최신의 자바스크립트 문법을 모든 브라우저가 읽고 해석할 수 있는 과거의 문법으로 변환시켜주는 Babel, 작성한 자바스크립트 파일을 분석하여 분할하고 합쳐주는 역할을 하는 WebPack 또한 필요하다.

 

최신버전 부터는 babel과 webpack이 같이 설치되니 신경쓸 필요는 없고 알고있으면 된다.

 

cmd 열어서 전역으로 리액트를 설치해 준다

명령어는

 

npx create-react-app 프로젝트명

 

이러면 기본적인 react 세팅은 끝났다.

 

public 과 src 폴더중 나머지는 필요없고

해당 파일만 남겨놓으면 된다.

 

 

@@ 에디터 세팅

- vscode

 

react를 더욱 편리하게 사용할 수 있게 에디터를 세팅해야겠다.

 

# 에디터 확장기능 목록

 

 

# setting.json 설정

 

 

vscode 하단에 설정에 들어간다.

{
	"editor.wordWrap": "on",
	"editor.fontFamily": "D2Coding ligature",
	"editor.fontLigatures": true,
	"editor.mouseWheelZoom": true,
	"editor.lineNumbers": "on",
	"editor.minimap.enabled": false,
	"editor.colorDecorators": true,
	"editor.codeLens": false,
	"liveServer.settings.donotShowInfoMsg": true,
	"workbench.iconTheme": "vscode-icons",
	"vsicons.dontShowNewVersionMessage": true,
	"liveServer.settings.CustomBrowser": "chrome",
	"liveServer.settings.donotVerifyTags": true,
	"editor.tabSize": 2,
	"prettier.tabWidth": 2,
	"prettier.useTabs": true,
	"emmet.includeLanguages": {
		"javascript": "javascriptreact"
	},
	"[html]": {
		"editor.defaultFormatter": "vscode.html-language-features"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"javascript.updateImportsOnFileMove.enabled": "always",
	"prettier.vueIndentScriptAndStyle": true,
	"prettier.jsxSingleQuote": true,
	"prettier.singleQuote": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"prettier.quoteProps": "consistent",
	"editor.codeActionsOnSave": {},
	"editor.formatOnSave": true,
	"workbench.startupEditor": "none",
	"prettier.printWidth": 200,
	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "css"],
	"workbench.colorTheme": "Default Light+",
	"window.zoomLevel": 1
}

위 코드를 넣어준다.