์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- JS #ํ๋ก์ ํธ
- setTimeout()
- webpack
- addEventListener
- ๋๊ธฐ
- sql
- slow and steady
- json
- promise
- Project
- Import
- callback
- async
- database
- eport
- object
- Porject
- js
- ajax
- execCommand
- db
- mysql
- https://m.blog.naver.com/tt2t2am1118/221010125300
- prj
- ๋น๋๊ธฐ
- await
- ์ฐธ๊ณ ๋ธ๋ก๊ทธ
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- ๊ฒ์
- ํผํ
- Today
- Total
C-log
๐ง์ธ๋ถ ํจํค์ง๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ : npm install ๋ณธ๋ฌธ
๐ง์ธ๋ถ ํจํค์ง๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ : npm install
4:Bee 2024. 6. 17. 17:35์ด๋ฒ ์์ ์๊ฐ์์๋ ์ธ๋ถ ํจํค์ง๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๊ดํด์ ๋ฐฐ์ธ ๊ฒ์ด๋ค.
CDN
CDN์ ์ ์ ์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆด ์ค์น ๋ฐ ๋ค์ด๋ก๋ํ๋ ๋ฐฉ๋ฒ์ด ์๋๋ค. ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํจํค์ง๋ฅผ html์์ ๋ก๋ฉํด์ ๊ฐ๋จํ๊ฒ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ด๋ค.
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
ํ์ง๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ง์์ ์ผ๋ก ๊ด๋ฆฌ๋๊ณ ์ ๋ฐ์ดํธ๊ฐ ๋๋ค. ๊ฐ์์์ ๋ณด์ฌ์ฃผ๋ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฒ์ ์ 16๋ฒ์ ์ด๋ค. ์์ CDN์ 18๋ฒ์ ์ด๋ค. ๋ณ๊ฒฝ๋ ๋ฒ์ ์ด ์์ ๋ ๋ง๋ค ์๋์ ์ผ๋ก CDN์ ๊ณ์ํด์ ๋ณ๊ฒฝํด์ค์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋ค. ์ด๋ฅผ ํด๊ฒฐ ํ๊ธฐ ์ํด์ ์ฐ๋ฆฐ NPM์ ํตํด์ ํจํค์ง๋ฅผ ๊ด๋ฆฌํ๋ค.
::CMD
npm install react
NPM์ ํตํด์ ์ค์น๊ฐ ์๋ฃ๋๋ค๋ฉด ์๋์ ๊ฐ์ด package.jsonํ์ผ์ devDependencies์ ์ด๋ฌํ ํ์์ผ๋ก ์ ์ฅ์ด ๋ ๊ฒ์ด๋ค.
"devDependencies": {
"react": "^18.0.0"
}
"^18.0.0"์ "^" ์บ๋ฟ์ ๋ฌด์์ธ๊ฐ.
NPM์ ์ ์์ ๋ฒ์ ์ ๋ฐ๋ฅด๋ฉฐ ์๋ ํจํค์ง ๋ฒ์ ์ ๊ด๋ฆฌํ๋ค.
์ ์์ ๋ฒ์ ์ ์ฃผ(Major Version) ,๋ถ(Minor Version) ,์(Patch Version) ์ธ ๊ฐ์ง ์ซ์๋ฅผ ์กฐํฉํด์ ๋ฒ์ ์ ๊ด๋ฆฌํ๋ค.
- ์ฃผ ๋ฒ์ (Major Version) : ๊ธฐ์กด ๋ฒ์ ๊ณผ ํธํ๋์ง ์๊ฒ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ
- ๋ถ ๋ฒ์ (Minor Version) : ๊ธฐ์กด ๋ฒ์ ๊ณผ ํธํ๋๋ฉด์ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๊ฒฝ์ฐ
- ์ ๋ฒ์ (Patch Version) : ๊ธฐ์กด ๋ฒ์ ๊ณผ ํธํ๋๋ฉด์ ๋ฒ๊ทธ๋ฅผ ์์ ํ ๊ฒฝ์ฐ
๋ฒ์ ๋ฒ์ : ํธํธ(~)์ ์บ๋ฟ(^)
- ํธํธ(~) : ํธํธ๋ ๋ง์ด๋ ๋ฒ์ ์ด ๋ช ์๋์ด ์์ผ๋ฉด ํจ์น๋ฒ์ ์ ๋ณ๊ฒฝํ๋ค.
- ์บ๋ฟ (^) : ์บ๋ฟ์ ์ ์๋ฒ์ ์ ๋ง์ด๋์ ํจ์น ๋ฒ์ ์ ๋ณ๊ฒฝํ๋ค.
Install์ ๊ดํด์
์ฐ๋ฆฌ๋ ๋ณดํต npm install ~ ์ ํ๋ฉด์ ํ๋ก์ ํธ์ ํ์ํ ํน์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฅผ ์ค์นํ๋ ๋ฐฉ์๊ณผ ๋ฐฉ๋ฒ๋ค๋ก๋ง ํ์ฉ์ ํด์๋ค. ์ด ์์ ์์๋ package.json ํ์ผ์ ํ์ฉํด์ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋ฒ์ ์ ๋ฒ์๋ถํฐ ์ค์ ๋ค๊น์ง ์ปค์คํ ํ๊ณ ์กฐ์ ํ๋ ๊ฒ์ด ์ฃผ๋ ๋ชฉ์ ์ด๋ค. ๋ฐ๋ผ์ ์ฐ๋ฆฌ๋ package.json์ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๋ ์ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฒ์ ๋ฒ์๋ค์ ๋ช ์์ ์ผ๋ก package.json์ ์ง์ ์ค์ ํ๊ณ npm install, npm i๋ง์ ํตํด์ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ๋ค์ ์ค์นํ๊ณ ์์ฉ ํ ์ ์๋ ๊ฒ์ด๋ค. ์ฆ, install์ package.jsonํ์ผ์ ์์กดํด์ ํจํค์ง๋ค์ ๊ด๋ฆฌํ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ์ด๋ฅผ ์์กด์ฑ ๊ด๋ฆฌ๋ผ๊ณ ํ๋ค. ๋ฐ๋ผ์ ๊ฐ๋ฐ์๋ ๊ธฐ์กด ๊ธฐํ, ๊ด๋ก์ , ์ต๊ด์ ๋ฐฉ์์ install์ ๊ฐ๋ ์ด ์๋๋ผ package.json์ ํตํด์ ์ง์ ์ปค์คํ ์ ํ ์ ์๋ค๋ ๊ฒ์ด๋ค.
'โ๏ธReact > ๐งFront-Dev-Environment' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐งWebpack : Loader (0) | 2024.06.23 |
---|---|
๐งWebpack : Entry (0) | 2024.06.21 |
๐งWebpack : module (1) | 2024.06.17 |
๐งํ๋ก์ ํธ ์์ฑ : NPM&yarn(yarn-berry) (1) | 2024.06.17 |
๐ง์์ ์ ์์ (0) | 2024.06.16 |