CursorAI + MCP ๋ก ์์ฐ์ฑ 100๋ฐฐ ๋ถ์คํธํ๊ธฐ (Sequential Thinking๊ณผ TalkToFigma) CursorAI์ MCP(Model Context Protocol)๋ ๊ฐ๋ฐ์์๊ฒ ๊ฐ๋ ฅํ ๋๊ตฌ๋ก ์ธ์์ด ์๋๋ฝ๋ค. CursorAI ์ ํฌ๊ฒ ๋๋๋๋ฐ, MCP ๋ฅผ ๊ฒฐํฉํ๋ฉด ๋ ์์ฒญ๋๋ค๋ ์ด์ผ๊ธฐ๋ฅผ ์ ํ๋ธ์์ ๋ณด๊ณ ๋ช๊ฐ์ง ํ์ฉํด๋ณด์๋ค. CursorAI์ MCP์ ์๊ฐCursorAI๋ ์ธ๊ณต์ง๋ฅ์ ํ์ฉํ์ฌ ์ฝ๋ ์์ฑ, ๋๋ฒ๊น , ์ต์ ํ ๋ฑ์ ์ง์ํ๋ ๋๊ตฌ๋ก, ๊ฐ๋ฐ์์ ์์ฐ์ฑ์ ํฌ๊ฒ ํฅ์์ํจ๋ค. MCP๋ ๋ค์ํ ํ๋ซํผ๊ณผ์ ํตํฉ์ ๊ฐ๋ฅํ๊ฒ ํ์ฌ, ๊ฐ๋ฐ์๊ฐ ์ฌ๋ฌ ๋๊ตฌ๋ฅผ ์ ๊ธฐ์ ์ผ๋ก ํ์ฉํ ์ ์๋๋ก ๋๋๋ค.๋ด๊ฐ ์ฌ์ฉํด๋ณธ MCP 1 - Sequential Thinking ๐ง Sequential Thinking์ ๋ณต์กํ ๋ฌธ์ ๋ฅผ ๋จ๊ณ๋ณ๋ก ์ ๊ทผํ์ฌ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ๋ก ์ผ๋ก, ๊ฐ๋ฐ ๊ณผ์ ์์์ ๋ ผ๋ฆฌ์ ์ฌ๊ณ ๋ฅผ ๊ฐํํ๋ค. ๋จ๊ณ๋ณ๋ก ๋ช ํํ๊ฒ .. Cursor AI ๋ฑ .. ์ฝ๋ฉํ ๋ AI ํด์ ์ฌ์ฉํ๋ฉฐ ๋๋ ๊ฐ์ธ์ ์ธ ์๊ฐ, ๋ถ์์ฉ AI ์ฝ๋ฉ์ ์ํ์ฑ์ค๋ ์ค์ ํ๋ก์ ํธ ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํ๋ฉด์ ๊นจ๋ฌ์ ์ค์ํ ์ ์ด ์์ต๋๋ค.์ฝ๋์ ๋ํ ๊น์ ์ดํด ์์ด AI๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋งค์ฐ ์ํํ ์ ์๋ค๋ ์ฌ์ค์ ๋๋ค.๊ธฐ์กด ์ฝ๋๋ ์ ๊ฐ ์ง์ ๊ธฐ๋ฅ์ ๊ตฌ์ํ๊ณ , ํ๋์ฉ ํจ์๋ฅผ ์์ฑํ, ๊ทธ์ผ๋ง๋ก '์ดํด๋๊ฐ ๋์ ์ฝ๋' ์์ต๋๋ค. ์ค๋ cursorAI ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๊ณ , ๊ธฐ์กด์ Redux ์ ์ฉ ๋ฒ์๋ฅผ ํ์ฅํ๋ฉด์ ์ฃผ์ํ๊ณ , ๋ค์๋ถํด ์ด๋ป๊ฒ ํด์ผํ ์ง ํ๊ณ ๊ฐ ํ์ํ ๊ฒ ๊ฐ์์ ์ด ๊ธ์ ์์ฑํ๊ฒ ๋์์ต๋๋ค. 1. ์ ์ํํ๊ฐ?์ฒซ๋ฒ์งธ๋ก ๊ธฐ๋ฅ ์์์ ์ํ์ด ํฝ๋๋ค. AI๊ฐ ์ฝ๋์ ์ ์ฒด์ ์ธ ๋งฅ๋ฝ์ ์๋ฒฝํ ์ดํดํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ฐ๋ณด๋ค ๋ง์์ต๋๋ค. ๊ทธ๋์ ๊ธฐ์กด ๊ธฐ๋ฅ์ ์๋๋ ๋ก์ง์ ๋ณด์กดํ์ง ๋ชปํ ๊ฒ์ ๋ค๋ฆ๊ฒ ๋ฐ๊ฒฌํ๊ธฐ๋ ํ์ต๋๋ค. ๋๋ฒ์งธ๋ก.. ๋ฆฌ์กํธ ์๋ฐ์คํฌ๋ฆฝํธ -> ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๊ธฐ! 1. ์ปดํฌ๋ํธ ์ ์ธ ๋ฐฉ์// ๊ธฐ์กด JSconst Dashboard = () => { // ...}// ๋ณํ๋ TSXconst Dashboard: React.FC = () => { // ...}React.FC (Function Component) ํ์ ์ ๋ช ์์ ์ผ๋ก ์ ์ธํ์ฌ TypeScript์๊ฒ ์ด ์ปดํฌ๋ํธ๊ฐ React ์ปดํฌ๋ํธ์์ ์๋ ค์ค๋ค์ด๋ ๊ฒ ํ๋ฉด ์ปดํฌ๋ํธ์ props ํ์ ์ ์๋์ผ๋ก ์ถ๋ก ํ ์ ์์ผ๋ฉฐ, React ๊ด๋ จ ํ์ ์ฒดํฌ๋ ๊ฐ๋ฅํ๋ค์ต์ React์์๋ React.FC ๋์ React.ComponentType์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ ์๋ค 2. Props ํ์ ์ ์// ๊ธฐ์กด JSconst CategoryEditor = ({ onClose }) => { // ...}// ๋ณํ๋ TSXinterfac.. ๐ Styled Components๋ก ๋ผ์ดํธ/๋คํฌ ๋ชจ๋ ์ ํํ๊ธฐ ์ค์ ํ๋ก์ ํธ์์๋ ์ฌ์ฉ์์๊ฒ ๋คํฌ ๋ชจ๋์ ๋ผ์ดํธ ๋ชจ๋๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์ค์ํ UX ์์ ์ค ํ๋์ด๋ค.styled-components์ ThemeProvider๋ฅผ ํ์ฉํ๋ฉด ์ ์ญ ํ ๋ง ์ ํ์ ๋งค์ฐ ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์ ์๋ค.โ 1. ํ ๋ง ๊ฐ์ฒด ์ ์ํ๊ธฐ// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};โ 2. App์์ ํ ๋ง ์ํ ๊ด๋ฆฌ์ฌ๋ฌ๊ฐ์ property๋ฅผ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ๋๊ฐ (๋คํฌ/๋ผ์ดํธ) ์ค์ ํจ์ผ๋ก์จ ๊ฐํธํ๊ฒ theme์ ๋ฐ๊ฟ ์ ์๋ค. // Ap.. Styled Components - ์ ๋๋ฉ์ด์ , ์ปดํฌ๋ํธ ์ ํ์, ์ค์ฒฉ ์คํ์ผ๋ง ์ด๋ฒ์ ๋๋ฌ์ด๋ณผ ๊ธฐ์ต์ .. keyframes ๋ const ๋ก ๋ฐ๋ก ๋นผ์ ๊ด๋ฆฌํ๋ ๊ฑฐ + styled component ์กฐ๊ฑด๋ฌธ์ฒ๋ผ ์ฐ๊ธฐ !! โ ํ์ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ๋จผ์ keyframes๋ฅผ ์ฌ์ฉํด ํ์ ํ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ํ๋ค.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu.. Styled Component์์ ์ปดํฌ๋ํธ ํ์ฅํ๊ธฐ ์๋ ์ ๋ฆฌ์กํธ ์ฒ์ ์ตํ๋ ๋ค ๊ณต๋ถํ๋ ๊ฒ ๊ฐ์๋ฐ, ํ๋ก์ ํธ๋ค์ ํ๋ค๋ณด๋ ๋น์ทํ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ๋ฌด์ํ๊ณ ๊ณ์ ํ๋ค๊ฐ .. '์ ์๋ ์ ์ด๊ฑฐ ๊ณต๋ถํ์๋๋ฐ .. ' ์ถ์ด์ ์ ๋ฆฌํ๊ฒ๋๋ค. ์ผ๋จ ๊ทธ ์ ์ styled component ๋ฅผ ์ฐ๋ ์ด์ ๋ ๊ธฐ์กด์ div๋ฅผ ๋ง๋ค๊ณ className ์ด๋ style์ ๋ถ์ฌํ๋ ์์ด์์ง๋ง,๋์ styled๋ฅผ ์ํฌํธ ํด์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ html ์์ ์ฌ์ฉํ๊ณ ์ถ์ ํ๊ทธ๋ฅผ ์ง์ ํ๊ณ , ๋ฐฑํฑ ์์ css์ฝ๋๋ฅผ ์ ์ด์ค๋ค. -> ์ปดํฌ๋ํธ ์ด๋ ๊ฒ ํ๊ฒ ๋๋ฉด ์คํ์ผ๋ง ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํจ์ผ๋ก์จ, ์ปดํฌ๋ํธ ํจ์ ์์ ์คํ์ผ์ ์ ์ ํ์๊ฐ ์๊ณ , ๊ฐ๋ ์ฑ์ด ์ข์์ง๋ค. ๋๋ ํผ์งํ or ๋ง์ด ์ฌ์ฉํ ๋งํ ์ปดํฌ๋ํธ๋ค์ ์คํ์ผ ์ปดํฌ๋ํธ๋ก ์ง์ ํ๊ณ , ๊ทธ ์์ ์์ํ ํ ์คํธ๋ ๋ฒ.. ๋ฆฌ์กํธ ํด๋๊ตฌ์กฐ์ ์ ์์ด ์์๊น ์ฐ๋ฆฌ๊ฐ ์ฝ๋ฉํ src ํด๋ ์ฌ์ค ๋ ธ๋ง๋์ฝ๋๋ฅผ ๋ฐ๋ผํ๊ธฐ ๋๋ฌธ์.. ๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ํ๋ก์ ํธ๋ ๊ทธ ์์์ ์ถฉ๋ถํ ์ปค๋ฒ๊ฐ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ํด๋๊ตฌ์กฐ์ ๋ํ ๊ณ ๋ฏผ์ ํ ํ์๊ฐ ์์์ง๋ง ๊ทธ๋๋ ํด๋ ์คํธ๋ญ์ณ์ ๊ด์ฌ์ด ๋ง์ ๋๋ ์ฐพ์๋ณด์๋ค! ํ๋ฌํฐ์ ๋ค๋ฅด๊ฒ, ๋๋ถ๋ถ ๊ฑฐ์ ํต์ผ๋ ํด๋ ์คํธ๋ญ์ณ๋ฅผ ๊ฐ์ถ์ด ์์ ์ ํ๋ ๋ชจ์ต์ ๋ณผ ์ ์์๋ค. ๊ทธ๋์ ์์ผ๋ก ๋ด๊ฐ ๋ณด๊ณ ๊ณ์ํด์ ์ฐธ๊ณ ํ ๋งํ ๋ด์ฉ์ ๊ฐ์ ธ์๋ดค๋ค ..! CRA์ ์ด๊ธฐ ํด๋๊ตฌ์กฐ my-app โโโ node_modules โโโ public โโโ src โโโ .gitignore โโโ package.json โโโ README.md node_modules ํ์ฌ ํ๋ก์ ํธ์ ํฌํจ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์ค์น๋์ด ์๋ ํด๋๋ก ๋ณดํต ๊น๊ณผ ๊ฐ์ ์ ์ฅ์์ ์ฌ๋ฆด ๋๋ ์ด ํด๋๋ฅผ ํจ๊ป ์ฌ๋ฆฌ.. ๊ฐ๋ฐ์๋๊ตฌ ์ผ๋ฌด์ฅ๊ฒ ์ฐ๊ธฐ โจ ๊ฐ๋ฐ์๋๊ตฌ ์คํํ๊ธฐ F12 Ctrl + Shift + i Elements : html/CSS ์ํ ํ์ธ Console : ์ฝ์ (๋ณ์ ์ ๋ณด๋ฅผ ํ์ธํ๊ณ ์ค๋ฅ ๋ฉ์์ง ํ์) Sources : ์คํฌ๋ฆฝํธ ๋๋ฒ๊น (break point ์ง์ ๋ฐ ๋ณ์ ๋ชจ๋ํฐ๋ง ๋ฑ) Network : ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ํ๋ ํต์ ์ํ Performance(์์ Timelineํจ๋) : ์ฑ๋ฅ ์ธก์ Memory(์์ Profiles ํจ๋) : ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ ํํ๋ฅผ ์์ฑํ๊ณ ๋์ ํ์. Application(์์ Resources ํจ๋) : ์ฟ ํค ๋ฐ ์คํ ๋ฆฌ์ง ๋ฑ์ ๋ด์ฉ ์์ง Audits : ํ์ด์ง๋ฅผ ๋ถ์ํ๊ณ ์ต์ ํ๋ฅผ ์ํ ํ ๋์ด Security : Mixed content ์ด์, ์ธ์ฆ์ ๋ฌธ์ ๋ฑ์ ๋๋ฒ๊น ๐ ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ ๋จ์ถํค ๋ชจ.. ๋ฐ์ํ ์น์์์ ์ปจํ ์ด๋ ํฌ๊ธฐ ๋ฐ์ํ ์น์ด๋ ๋ธ๋ผ์ฐ์ ๋์ด์ ๋ฐ๋ผ ์ต์ ํ๋ ์ฌ์ดํธ๋ฅผ ๋งํฉ๋๋ค. ์ถ๋ ฅ๋ฌผ๊ณผ๋ ๋ฌ๋ฆฌ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์ด ๋ค์ด๊ฐ๋ฉฐ, ์ฝ๋๋ก ๊ตฌํ๋๊ธฐ ๋๋ฌธ์ ๊ณ ์ ๊ฐ์ธ ๋์์ธ์ ์ก์์ค ๋ PC / Tablet / Mobile ์ด๋ฐ ์์ผ๋ก ์ต์ ํ๋ ์์์ผ๋ก ์ก์์ค์ผ ๋ฉ๋๋ค. PC const ProjectComponent=styled.div` .contentsbox{ width: 1140px; height: 100%; margin: 0px auto; display: flex; flex-direction: column; } ... ` ์ฐ์ ์ ํฌ๊ฐ ์ฌ์ฉํ ๋ฐฉ๋ฒ!! (์ค์ ์ฝ๋ ๊ฐ์ ธ์์ต๋๋ค) ์ ํฌ๋ ์ปจํ ์ด๋๋ฅผ 1140px๋ก ์ก์๊ณ , ์์ชฝ์ margin์ auto๋ก ์ฃผ์ด ์ผํฐ์ ๋์์ต๋๋ค! ๊ทธ๋ฆฌ๊ณ ์ ์ฒด width๋ฅผ 1280px ์ด์์ด๋ผ๊ณ .. ์ด์ 1 2 3 4 ๋ค์