[React] React Env
React ํ๊ฒฝ์ค์
- VS Code: https://visualstudio.microsoft.com/ko/downloads/
- Node JS: https://nodejs.org/ko/
- git: https://git-scm.com/downloads
- yarn: Node.js 16.10 ์ด์์ธ ๊ฒฝ์ฐ ํฐ๋ฏธ๋์์ corepack enable ๋ช ๋ น์ด๋ก ์ค์น
๋ฆฌ์กํธ ๊ฐ๋ฐ ์ฐธ๊ณ ์ฌ์ดํธ
React ๊ณต์ ์ฌ์ดํธ:ย https://reactjs.org/
React ๋ฒ ํ ๋ฌธ์:ย https://beta.reactjs.org/
Create React App:ย https://create-react-app.dev/
ํ๋ก์ ํธ ์์ฑ
-
yarn create react-app ํ๋ก์ ํธ๋ช
(Babel, Webpack๋ฑ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ํ ํ์ผ ์ค์น์ ์ค์ ์ด ๋๋ค.) -
terminal ์์ code . ์ผ๋ก VS Code ์คํ
-
terminal ๋๋ VS Code์ terminal ์์ yarn start ๋ก ๋ฆฌ์กํธ ํ๋ก์ ํธ ์คํํ์ธ
ํ๋ก์ ํธ ๊ตฌ์กฐ
- .yarn, node_modules, .pnp.cjs, .pnp.loader.mjs, yarn.lock ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ด๋ จ ํ์ผ๋ก ๊ฑด๋๋ฆด ์ผ์ด ๊ฑฐ์ ์์!
- public: Static ๋ฆฌ์์ค๋ค์ด ์๋ ํด๋
- src: Dynamic ์์ค๋ค์ด ์ ์ฅ๋๋ ํด๋
- package.json: ํ๋ก์ ํธ์ ๊ด๋ จ ์ ๋ณด๊ฐ ์๋ ํ์ผ
์ถ๊ฐ Extension
- Chrome Web Store
React Developer Tools: ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ๋ฆฌ์กํธ ๊ตฌ์กฐ๋ฅผ ๋ณด์ฌ์ค - VS Code
Auto Import: ๋ค๋ฅธ ํ์ผ Import ์ ์๋์ผ๋ก ์์ฑ
Material Theme: ํ ๋ง์ ์ฉ
Material Icon Theme: ํ๋ก์ ํธ์ ํ์ผ ๋ฐ ํด๋ ์์ด์ฝ ํ ๋ง
Prittier - Code formatter: ์ฝ๋๋ฅผ ํฌ๋งทํ
CSS Modules: PostCSS ๊ด๋ จ
IntelliSense for CSS class names in HTML
HTML to CSS autocompletion
HTML CSS Support
CSS Peek
Auto Rename Tag Simple React Snippets - ํค์๋๋ก ๋ฆฌ์กํธ ์ฝ๋ ์์ฑ
Leave a comment