
์๋
ํ์ธ์, FreAiner (ํ๋ฆฌ์์ด์์ด๋) Harris์
๋๋ค.
๋ง๋์ ๋ฐ๊ฐ์์!
์ ๋ Cursor AI ์ฝ๋ ์๋ํฐ๋ฅผ ํ์ฉํด ๋ค์ํ ์น๊ณผ ์ฑ์ ์ ์ํ๊ณ ์ถ์ํ๋ฉฐ ์ ๊ฟ์ ์คํํด ๋๊ฐ๊ณ ์์ต๋๋ค. ์ฌ์ค, ์ ๋ ์ฒ์ ์์ํ ๋๋ ์ฝ๋ฉ์ ๋ํ ์ง์์ด ๊ฑฐ์ ์์์ต๋๋ค. ํ์ง๋ง Cursor๋ฅผ ํตํด ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ, ์ ๊ฐ์ ์ฌ๋๋ ์ถฉ๋ถํ ์น๊ณผ ์ฑ์ ๋ง๋ค์ด ์์ ๋ง์ ์๋น์ค๋ฅผ ์ ๊ณตํ ์ ์๋ค๋ ํ์ ์ ๊ฐ์ง๊ฒ ๋์์ต๋๋ค.
์ด๋ฐ ๊ฒฝํ์ ๋ฐํ์ผ๋ก, ์ ์ฒ๋ผ ์ฝ๋ฉ์ด ์์ํ ๋ถ๋ค๋ ์ฝ๊ฒ ๋ฐ๋ผ ํ ์ ์๋๋ก ๋์๋๋ฆฌ๊ณ ์ถ์ต๋๋ค. ๊ทธ๋์ ์ ๋ ์ฌ๋ฌ๋ถ์ ์ฒซ๊ฑธ์์ ํจ๊ปํ๋ฉฐ, ๋ณต์กํ ๊ธฐ์ ์ ์ฝ๊ฒ ์ค๋ช ํ๊ณ , Cursor๋ฅผ ์ถฉ๋ถํ ์ตํ์ ์ค์ ์๋น์ค๋ก ๋ฐ์ ์ํฌ ์ ์๋๋ก ๋๊ณ ์์ต๋๋ค.
์ ์ ์ธํ๋ฐ ๊ฐ์์์๋ ์ ์ ๊ฐ์ ๋๋์ด์์ ์ถ๋ฐํด, ์ดํดํ๊ธฐ ์ด๋ ค์ ๋ ๋ถ๋ถ๋ค์ ์น์ ํ๊ฒ ์ค๋ช ๋๋ฆฌ๊ณ ์ ํฉ๋๋ค. ์ฌ๋ฌ๋ถ์ด ๋ง๋ฅ๋จ๋ฆฐ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๊ณ , Cursor๋ฅผ ํตํด ์ค์ง์ ์ธ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์ด๋ด๋ ๋ฐ ๋์์ ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๊ฐ์ด ๊ฟ์ ์คํํด ๋๊ฐ๊ธธ ๊ธฐ๋ํฉ๋๋ค!
์ ๋ถํ๋๋ ค์!
๐ ์ปค์ 4000ํ ํ์งํ ํธ๊ตฌing
๐ต Cursor๋ก ์ฑ/์น ๊ฐ๋ฐํด์ ๋๋ฒ๋์ค
๐ป ์์ผ๋ก๋ 'AI'๋ฅผ ์ ์จ์ผํ๋ ์๋๊ฐ ์จ๋ค
๐ ๐ Cursor ๊ฟํ ๋ชจ์ ๋ฐ๊ณ ๋ด ์ฑ ๋ง๋ค๊ธฐ
https://linktr.ee/freAiner
Courses
Reviews
yeongjae80669468
ยท
Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)- Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)
moonctp244879
ยท
Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)nocturn5159470
ยท
Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)liverpool
ยท
Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)Don't know coding? No problem! Starting your development journey with CursorAI (Web/Beginner)
Posts
Q&A
ํ๋ก์ ํธ ์์ฑ ์๋ฌ
React 19 ๋ฒ์ ์ ํ์ฌ Create React App(CRA)์์ ์ง์๋์ง ์๋ ๋ฒ์ ์ด๋ผ์, CRA๊ฐ ์์กดํ๊ณ ์๋ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ถฉ๋์ด ๋ฐ์ํฉ๋๋ค. (์ค๋ฅ ๋ฉ์์ง๋ @testing-library/react๊ฐ react@^18.0.0์ ์๊ตฌํ๋ค๊ณ ์๋ดํ๊ณ ์์ฃ .)์์ง ์ ์ ๋ฆด๋ฆฌ์ค๊ฐ ๋์ง ์์๊ฑฐ๋(2024-12 ์์ ) ์์ ์ ์ผ๋ก ์ง์๋์ง ์๋ React ๋ฒ์ ์ ์ฌ์ฉํ์๋ ค๋ฉด, ์ง์ ๋ค๋ฅธ ๋น๋ ํด(์: Vite, Webpack ๋ฑ)๋ก ์ค์ ์ ๊ตฌ์ฑํด์ค์ผ ํฉ๋๋ค. CRA๋ก ์งํํ์ค ๋์๋ React 18 ๋ฒ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฐ์ฅ ๊ฐ๋จํ๊ณ ์์ ์ ์ธ ๋ฐฉ๋ฒ์ ๋๋ค.1. React 18๋ก ๋ฒ์ ๋ค์ด๊ทธ๋ ์ด๋ ํ CRA ์ฌ์ฉํ๊ธฐํ๋ก์ ํธ ํด๋๊ฐ ๋น์ด์๋ ์ํ์ธ์ง ํ์ธํฉ๋๋ค. ์ด๋ฏธ ์์ฑ๋ CRA ํ๋ก์ ํธ๊ฐ ์๋ค๋ฉด ํด๋๋ฅผ ์ ๋ฆฌํ๊ฑฐ๋ ์ญ์ ํ ์งํํ๋ ๊ฒ์ด ๊น๋ํฉ๋๋ค.์๋ ๋ช ๋ น์ด๋ก CRA(Typescript ํ ํ๋ฆฟ)๋ฅผ ์์ฑํ๋ฉด์, React ๋ฒ์ ์ 18.2.0์ผ๋ก ๋ช ์ํด์ค๋๋ค:# npx create-react-app . --template typescript ๋ฅผ ๋จผ์ ์คํํ๋ฉด # ๊ธฐ๋ณธ์ ์ผ๋ก react@18.2, react-dom@18.2 ๋ฑ์ ์ค์นํฉ๋๋ค. # ํน์๋ ๋ฒ์ ์ด ๊ผฌ์์ ๊ฒฝ์ฐ๋ฅผ ๋๋นํด ์๋์ฒ๋ผ ์๋์ผ๋ก ๋ฒ์ ์ ์ง์ ํฉ๋๋ค. npx create-react-app . --template typescript npm install react@18.2.0 react-dom@18.2.0 ์ดํ Tailwind ํจํค์ง๋ค์ ์ค์นํ๊ณ ์ด๊ธฐ ์ค์ ํ์ผ์ ์์ฑํฉ๋๋ค:npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ์ ์์ ์ผ๋ก ์ค์น๋์๋ค๋ฉด, package.json์์ react์ react-dom ๋ฒ์ ์ด 18.2.0์ผ๋ก ๋์ด ์์ด์ผ ํฉ๋๋ค.์ฐธ๊ณ --force ๋ --legacy-peer-deps ์ฌ์ฉํ๊ธฐnpm install --force ๋๋ npm install --legacy-peer-deps๋ฅผ ์ฌ์ฉํ๋ฉด ์์กด์ฑ ์ถฉ๋์ ๋ฌด์ํ๊ณ ์ค์น๋ฅผ ๊ฐํํ ์ ์์ต๋๋ค. ํ์ง๋ง, ํด๊ฒฐ๋์ง ์์ ํ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ ๋ฒ์ ์ถฉ๋์ด ๊ทธ๋๋ก ๋จ๊ธฐ ๋๋ฌธ์ ์ดํ์ ์์์น ๋ชปํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.๋ฐ๋ผ์, CRA์ ํจ๊ป ์ ๋๋ก ๋์ํ๋ ์์ ๋ฒ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.2. Vite๋ก ํ๋ก์ ํธ ๊ตฌ์ฑํ๊ธฐ (๊ถ์ฅ)React 19 ๋ฒ์ ์ ๊ผญ ์ฌ์ฉํด์ผ ํ๊ฑฐ๋, ๋น๋ ์๋/์ด๊ธฐ ์ค์ ๋ฑ์์ ์ข ๋ ์ ์ฐํ๊ฒ ๊ตฌ์ฑํ๊ณ ์ถ์ผ์๋ค๋ฉด Vite๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ถ์ฅํฉ๋๋ค. ๋ค๋ง ๊ฐ์ ๋ด์ฉ๊ณผ ๋ฌ๋ผ์ ์ฝ๊ฐ์ ์ฐจ์ด๋ ์์ ์ ์์ต๋๋ค.ํ๋ก์ ํธ ํด๋๋ฅผ ์ค๋นํ๊ณ , ํฐ๋ฏธ๋์์ ์๋ ๋ช ๋ น์ ์คํํฉ๋๋ค:npm create vite@latest # yarn, pnpm ๋ฑ์ ์ฐ์ ๋ ๋ฉ๋๋ค. # ์ดํ, ํ๋ก์ ํธ ์ด๋ฆ ์ง์ ํ๊ณ , # "React", "TypeScript" ํ ํ๋ฆฟ์ ์ ํ ์์ฑ๋ ํด๋(์: my-vite-app)๋ก ์ด๋ํ ๋ค:cd my-vite-app npm install ํ์ํ React ๋ฒ์ ์ ๋ช ์ํ์ฌ ์ค์นํฉ๋๋ค(์: 19.0.0):npm install react@19.0.0 react-dom@19.0.0 ๋ง์ฝ ์์ง React 19๊ฐ ์ ์ ๋ฐฐํฌ๋์ง ์์๋ค๋ฉด, ์ํ/๋ฒ ํ/RC ๋ฒ์ ์ ์ฌ์ฉํด์ผ ํ๊ณ , ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ด์ ๋ง์ถฐ ํธํ ๋ฒ์ ์ ์ฐพ์์ผ ํ๋ฏ๋ก, ์์ ์ฑ์ด ์กฐ๊ธ ๋จ์ด์ง ์ ์์ต๋๋ค.Tailwind ์ค์ :npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ์ดํ tailwind.config.js, src/index.css ๋ฑ์ Tailwind ์ค์ ์ ์ถ๊ฐํฉ๋๋ค.Create React App ๋ช ๋ น์ด๋ฅผ ๊ณ์ ์ฌ์ฉํ์ ๋ค๋ฉด React 18์ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ถ์ฅ๋ฉ๋๋ค.React 19 ๋ฑ์ ์ต์ ๊ฐ๋ฐ ๋ฒ์ ์ ์ฌ์ฉํ๋ ค๋ฉด, CRA๊ฐ ์๋ Vite, Webpack ๋ฑ ์ง์ ๋น๋ ํด ์ค์ ์ ํด์ฃผ๋ ํธ์ด ์๋ฌ๋ฅผ ์ต์ํํ ์ ์์ต๋๋ค.์ ๋ฐฉ๋ฒ๋๋ก ํด ๋ณด์๋ฉด์ ๋ฌธ์ ๊ฐ ์๊ธฐ๋ฉด, ์ค๋ฅ ๋ฉ์์ง์ ํจ๊ป ๋ค์ ์ง๋ฌธํด ์ฃผ์ธ์!
- 0
- 1
- 374
Q&A
๋ ธ์ ๋งํฌ๊ฐ ์๋ค๊ณ ๋์์
๋จผ์ ๋ถํธ์ ๋ผ์ณ ๋๋ ค ์ฃ์กํฉ๋๋ค. ๋งํฌ๋ฅผ ์์ ํ์ผ๋ ๋ค์ ํ ๋ฒ ์ ์ ๋ถํ๋๋ฆฝ๋๋ค.
- 0
- 2
- 383
Q&A
ํ๋ก์ ํธ ์์ฑ ๋ช ๋ น์ด ์ ๋ ฅ ํ ์๋ฌ
npm ์ด ์ค์น๊ฐ ์๋์ด์๋๊ฒ ๊ฐ์๋ฐ ํ์ธ ๋ถํ๋๋ฆฝ๋๋ค.
- 0
- 2
- 275
Q&A
insert๋ฒํผ์ด ์๋์ค๋๋ฐ ๋ญ๊ฐ ๋ฌธ์ ์ผ๊น์?
์ ์ํฉ์ PowerShell์์ && ์ฐ์ฐ์๊ฐ ์ ๋๋ก ์๋ํ์ง ์๋ ๊ฒฝ์ฐ๋ก ๋ณด์ ๋๋ค. PowerShell์ Linux๋ macOS์ Bash์ ๋ค๋ฅด๊ฒ && ์ฐ์ฐ์๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ง ์์ต๋๋ค. ๋์ , ๋ช ๋ น์ด๋ฅผ ๊ฐ๊ฐ ์คํํ๊ฑฐ๋ ๋ณ๋์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ๋ค์ ๋๋ค. 1. ๋ช ๋ น์ด ๋ถ๋ฆฌ ์คํ PowerShell์์ && ๋์ ๊ฐ ๋ช ๋ น์ด๋ฅผ ๋ฐ๋ก ์คํํ์ธ์. npx create-react-app . --template typescriptnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p 2. ํ ์ค๋ก ์คํํ๋ ๋ฐฉ๋ฒ (PowerShell ์ ์ฉ) PowerShell์์ ์ฌ๋ฌ ๋ช ๋ น์ด๋ฅผ ์ฐ๊ฒฐํ๋ ค๋ฉด ;๋ฅผ ์ฌ์ฉํ์ธ์. npx create-react-app . --template typescript; npm install -D tailwindcss postcss autoprefixer; npx tailwindcss init -p 3. OneDrive ๊ฒฝ๋ก ๋ฌธ์ ํด๊ฒฐ OneDrive ๊ฒฝ๋ก์์ ์์ ํ ๋, ํ์ผ ๋๊ธฐํ ๋ฌธ์ ๋ก ์ธํด ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด ๊ฒฝ์ฐ, ๋ค๋ฅธ ๋ก์ปฌ ๋๋ ํ ๋ฆฌ์์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.3.1. ์๋ก์ด ๋ก์ปฌ ํด๋ ์์ฑ: mkdir C:\Projects\PomodoroAppcd C:\Projects\PomodoroApp 3.2. ์๋ก์ด ๋๋ ํ ๋ฆฌ์์ ๋ค์ ์คํ: npx create-react-app . --template typescriptnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p 4. PowerShell ๋์ ๋ค๋ฅธ ํฐ๋ฏธ๋ ์ฌ์ฉ Git Bash ๋๋ Windows Terminal์ ์ฌ์ฉํ๋ ๊ฒ๋ ์ข์ต๋๋ค. Git Bash๋ Linux ์คํ์ผ ๋ช ๋ น์ด๋ฅผ ์ง์ํ๋ฏ๋ก && ์ฐ์ฐ์๋ ๋ฌธ์ ์์ด ์๋ํฉ๋๋ค.4.1. Git Bash ๋ค์ด๋ก๋: Git for Windows4.2. Git Bash์์ ์คํ: npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p 5. ์ถ๊ฐ ํ: ๊ถ์ฅ ์ฌํญ โข Node.js ๋ฒ์ ํ์ธ: Node.js ๋ฒ์ ์ด ์ต์ ์ธ์ง ํ์ธํ์ธ์. node -vnpm -v ์ต์ ๋ฒ์ ์ด ์๋๋ผ๋ฉด Node.js ๊ณต์ ์ฌ์ดํธ์์ ์ ๋ฐ์ดํธํ์ธ์. โข OneDrive ์ฌ์ฉ ์ง์: ํ๋ก์ ํธ ํด๋๋ฅผ ๋ก์ปฌ ๋๋ ํ ๋ฆฌ๋ก ์ด๋ํ๋ฉด ์ฌ๋ฌ ๋ฌธ์ ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค. ์ ๋ฐฉ๋ฒ ์ค ํ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๋ค ๋ค์ ์๋ํด ๋ณด์ธ์! ๐
- 0
- 1
- 224
Q&A
์ค์ต ๊ฐ์์์ node.js์ค์น๋ฒ
์๋ ํ์ธ์! ๋ต๋ณ์ด ๋ฆ์ด ์ฃ์กํฉ๋๋ค. ์์ ์๋ฃ ์น์ ์ ์ ๊ณต ๋ '์ปค์ ๋ฐ์ด๋ธ ์น์ฌ์ดํธ' ์ 1๋ฒ ํ ๊ธ ํญ๋ชฉ์ ๋๋ฅด์๋ฉด node.js ์ค์น ๋ฐฉ๋ฒ ๋ฌธ์์ ๋์์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
- 0
- 2
- 297