์ธ๋„ค์ผ 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..