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๊ฐ ์ฝ๋์ ์ ์ฒด์ ์ธ ๋งฅ๋ฝ์ ์๋ฒฝํ ์ดํดํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ฐ๋ณด๋ค ๋ง์๋ค. ๊ทธ๋์ ๊ธฐ์กด ๊ธฐ๋ฅ์ ์๋๋ ๋ก์ง์ ๋ณด์กดํ์ง ๋ชปํ ๊ฒ์ ๋ค๋ฆ๊ฒ ๋ฐ๊ฒฌํ๊ธฐ๋ ํ๋ค. ๋๋ฒ์งธ๋ก ์์๋ ๊ธฐ๋ฅ์ ์์์ฑ๋ ๊ฒ์ด .. ๐ 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 ๋ง์ด ์ฌ์ฉํ ๋งํ ์ปดํฌ๋ํธ๋ค์ ์คํ์ผ ์ปดํฌ๋ํธ๋ก ์ง์ ํ๊ณ , ๊ทธ ์์ ์์ํ ํ ์คํธ๋ ๋ฒ.. Firebase ๋ณด์๊ท์น ์์ : ํ์ด์ด๋ฒ ์ด์ค์ ์์ ํ์ง ์์ ๊ท์น์ด ์์ต๋๋ค ๋ฉ์ผ ์ฌ ๊ฒฝ์ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ ํ๋ฒ ๋ณด์๊ท์น ๋ณด์ ๊ท์น ์์ํ๊ธฐ | Firestore | Google Cloud ๋ณด์ ๊ท์น ์์ํ๊ธฐ | Firestore | Google Cloud ์๊ฒฌ ๋ณด๋ด๊ธฐ ์ปฌ๋ ์ ์ ์ฌ์ฉํด ์ ๋ฆฌํ๊ธฐ ๋ด ํ๊ฒฝ์ค์ ์ ๊ธฐ์ค์ผ๋ก ์ฝํ ์ธ ๋ฅผ ์ ์ฅํ๊ณ ๋ถ๋ฅํ์ธ์. ๋ณด์ ๊ท์น ์์ํ๊ธฐ Firestore ๋ณด์ ๊ท์น์ ์ฌ์ฉํ๋ฉด ์ธํ๋ผ๋ฅผ ๊ด๋ฆฌํ๊ฑฐ๋ ์๋ฒ ์ธก ์ธ์ฆ ๋ฐ ์น์ธ cloud.google.com ์ ๋ง ์ง๊ธ์ง๊ธํ๊ฒ ์ด๋ฉ์ผ์ ๋ณด๋ด ๊ดด๋กญํ๋ firebase ๋ณด์๊ท์น์ ์์ ํ์ต๋๋ค (๊ณ์ ๊ฒฝ๊ณ ํ๋๊น ๋ถ์ํ์ด ๐ฅฒ ๊ฒฝ๊ณ ๊ฐ์ฌํฉ๋๋ค ๊ตฌ๊ธ์จ) 1. ๋ณด์๊ท์น ๋ฒ์ ์์ฑ rules_version = '2'; ๊ธฐ์กด์ rules_version = '1' ์ ์์ผ๋ ์นด๋๋ฅผ ์ฌ์ฉํ ๋ ํ ๊ฐ ํน์ ๋ ๊ฐ ์ด์์ path๋ฅผ ํฌํจํ๊ณ ์์ด์ผํ๊ธฐ ๋๋ฌธ์ ์์ .. React validation ๋ฆฌ์กํธ ์ ํจ์ฑ ๊ฒ์ฌ Formik VS REACT Hook form https://nyeongnyeong.tistory.com/299 [React] Form Validation (Formik VS React Hook Form) Validation ์ด๋? ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ถํ๊ธฐ ์ ์ ์์์ด ์ฌ๋ฐ๋ฅธ์ง ํ์ธํ๋ ๊ณผ์ ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ๋ฅผ ๋ชฉ์ ์ง๋ก ๋ณด๋ด๊ธฐ ์ ์, ์ฌ๋ฐ๋ฅผ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๋์ง ์ ํจ์ฑ์ ์ฒดํฌํด์ฃผ๋ ๊ฒ. Client Validation rea nyeongnyeong.tistory.com react iframe์ ์ํด ํด๋ฆญ ์๋๋ ๋ฌธ์ ํด๊ฒฐ https://www.inflearn.com/questions/404668/react-%EC%A0%80%EC%9E%A5-%EC%8B%9C-iframe-%EA%B0%95%EC%A0%9C-%EC%9E%AC%EC%83%9D%EC%84%B1-%EB%AC%B8%EC%A0%9C react ์ ์ฅ ์ iframe ๊ฐ์ ์ฌ์์ฑ ๋ฌธ์ - ์ธํ๋ฐ | ์ง๋ฌธ & ๋ต๋ณ create react app์ ํตํด ํ๋ก์ ํธ๋ฅผ ์งํ ์ค์ ๋๋ค. ์๋ ์ปดํจํฐ์์๋ ํ๋ก์ ํธ๊ฐ ์ ์์ ์ผ๋ก ์๋ ๋์๋๋ฐ, ๋ค๋ฅธ ์ปดํจํฐ์์ git clone์ ๋ฐ์ npm install ํ npm start ์งํํ๋, 1. Cannot read pro... www.inflearn.com ๋ฆฌ์กํธ ํ์ ์ฐฝ/๋ชจ๋ฌ/๋ค์ด์ผ๋ก๊ทธ ๊ตฌํํ๊ธฐ, ์ญ์ ๋ฒํผ ๊ตฌํ, ๊ตฌ์กฐ๋ถํดํ ๋น https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React] Portal, Render์ ์ฐจ์ด์ , ํ์ฉ๋ฐฉ์ ์์๋ณด๊ธฐ!์ต๊ทผ Kakao Map Api๋ฅผ React Component ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ฐ๋ฐ์ ์งํํ๋ฉฐ ์์ฃผ ์ฌ์ฉํ๊ฒ ๋ ReactDom์ Portal ๊ธฐ๋ฅ์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ๋ฉด์ Render์ ์ด๋ ํ ์ฐจ์ด์ ์ด ์๋์ง ๊ทธ๋ฆฌ๊ณ ํ์ฉ๋ฐฉ์์ ๋ํด์ ์ ๋ฆฌ ํดjaeseokim.dev Portalcreate๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํ ๋๋ navbar ์์ ์๋ login butt.. ์ด์ 1 2 3 ๋ค์