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 ๋ง์ด ์ฌ์ฉํ ๋งํ ์ปดํฌ๋ํธ๋ค์ ์คํ์ผ ์ปดํฌ๋ํธ๋ก ์ง์ ํ๊ณ , ๊ทธ ์์ ์์ํ ํ ์คํธ๋ ๋ฒ.. ์๋ฐ์คํฌ๋ฆฝํธ์์์ BFS์ DFS 1. BFS (Breadth-First Search)BFS๋ ์์ ๋ ธ๋์์๋ถํฐ ๊ฐ๊น์ด ๋ ธ๋๋ถํฐ ์ฐจ๋ก๋ก ๋ฐฉ๋ฌธํ๋ ์๊ณ ๋ฆฌ์ฆ์ ๋๋ค.๋ณดํต ํ(Queue, FIFO: First-In, First-Out)๋ฅผ ์ฌ์ฉํฉ๋๋ค.์ต๋จ ๊ฒฝ๋ก, ๋ ๋ฒจ ์ํ ๋ฑ์ ์ ์ฉํฉ๋๋ค.function bfsWithVisited(start, getNeighbors) { const queue = [start]; const visited = new Set(); visited.add(start); console.log("์ด๊ธฐ visited:", Array.from(visited)); while (queue.length > 0) { const current = queue.shift(); // ํ์์ ๊ฐ์ฅ ์์ ์.. 17. ๋์ ํ๋ก๊ทธ๋๋ฐ (Dynamic Programming) Codility Lesson ํ๊ตญ์ด ์ ๋ฆฌ๋ณธ (JavaScript ver.) ๋์ ํ๋ก๊ทธ๋๋ฐ(Dynamic Programming)์ด๋?๋์ ํ๋ก๊ทธ๋๋ฐ(DP)์ ์์ ๋ฌธ์ ๋ค์ ํด๋ฅผ ํ์ฉํ์ฌ ๋ ํฐ ๋ฌธ์ ์ ํด๋ฅผ ๊ตฌํ๋ ์๊ณ ๋ฆฌ์ฆ ๊ธฐ๋ฒ ์ด๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ฌธ์ ๋ฅผ ์ฌ๋ฌ ์์ ๋ถ๋ถ ๋ฌธ์ ๋ก ๋๋๊ณ , ์ค๋ณต ๊ณ์ฐ์ ์ค์ด๊ธฐ ์ํด ๊ฒฐ๊ณผ๋ฅผ ์ ์ฅ(memoization) ํ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉ๋๋ค.๋์ ํ๋ก๊ทธ๋๋ฐ์ด ํจ๊ณผ์ ์ธ ๊ฒฝ์ฐ:์ต์ ๋ถ๋ถ ๊ตฌ์กฐ(Optimal Substructure): ํฐ ๋ฌธ์ ์ ์ต์ ํด๊ฐ ์์ ๋ถ๋ถ ๋ฌธ์ ์ ์ต์ ํด๋ก ๊ตฌ์ฑ๋ ์ ์์์ค๋ณต ๋ถ๋ถ ๋ฌธ์ (Overlapping Subproblems): ๋์ผํ ์์ ๋ฌธ์ ๋ฅผ ์ฌ๋ฌ ๋ฒ ํด๊ฒฐํด์ผ ํ๋ ๊ฒฝ์ฐ๋ํ์ ์ธ DP ๋ฌธ์ :์ต๋จ ๊ฒฝ๋ก ๋ฌธ์ (Floyd-Warshall, Bellman-Ford)๋ฐฐ๋ญ ๋ฌธ์ (Knapsack Problem)๋์ ๊ฑฐ์ค๋ฆ๋ ๋ฌธ์ (Coi.. 16. ํ์์ ์๊ณ ๋ฆฌ์ฆ (Greedy Algorithms) Codility Lesson ํ๊ตญ์ด ์ ๋ฆฌ๋ณธ (JavaScript ver.) ํ์์ ์๊ณ ๋ฆฌ์ฆ(Greedy Algorithm)์ด๋?ํ์์ ์๊ณ ๋ฆฌ์ฆ์ ๊ฐ ๋จ๊ณ์์ ๊ฐ์ฅ ์ต์ ์ ์ ํ์ ํ๋ ๋ฐฉ์์ผ๋ก ์ต์ ํด๋ฅผ ์ฐพ๋ ๋ฐฉ๋ฒ ์ด๋ค. ์ ์ฒด ์ต์ ํด๋ฅผ ๊ณ ๋ คํ์ง ์๊ณ , ๋งค ์๊ฐ ์ต์ ์ ์ ํ์ ํ๊ธฐ ๋๋ฌธ์ ๊ตฌํ์ด ๊ฐ๋จํ์ง๋ง, ํญ์ ์ต์ ํด๋ฅผ ๋ณด์ฅํ๋ ๊ฒ์ ์๋๋ค.ํ์์ ์๊ณ ๋ฆฌ์ฆ์ด ์ ์ฉ๋ ์ ์๋ ๋ํ์ ์ธ ๋ฌธ์ ๋ค:๋์ ๊ฑฐ์ค๋ฆ๋ ๋ฌธ์ (Coin Change Problem)ํ์์ค ๋ฐฐ์ ๋ฌธ์ (Activity Selection Problem)๋ฐฐ๋ญ ๋ฌธ์ (Knapsack Problem)์์ ์ค์ผ์ค๋ง ๋ฌธ์ (Activity Selection)์ต์ ์ ์ฅ ํธ๋ฆฌ (MST, Minimum Spanning Tree)ํํ๋ง ์ฝ๋ฉ (Huffman Coding)ํ์ ์๊ณ ๋ฆฌ์ฆ์ ํน์ง๋น ๋ฅธ ์คํ ์๊ฐ: O(n log n) ๋๋ O(.. ์ด์ 1 2 3 4 ยทยทยท 10 ๋ค์