{"id":74,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=74"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"project-setup","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=74","title":{"rendered":"GOFLIX \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c\uc640 \uac1c\ubc1c\ud658\uacbd \uc124\uc815"},"content":{"rendered":"<blockquote>\n<p><strong>Tip<\/strong>: <strong>Gemini CLI\ub85c \uad6c\ud604\ud558\uae30 \u2014 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 &amp; \ud328\ud0a4\uc9c0 \uc124\uce58<\/strong><\/p>\n<ul>\n<li><strong>\ud504\ub86c\ud504\ud2b8:<\/strong> <code>gemini &quot;React 19 + Vite + Tailwind CSS 4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud574\uc918. \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uc740 [\ud504\ub85c\uc81d\ud2b8\uba85]\uc774\uc57c. react-router, axios, @fortawesome\/react-fontawesome, @fortawesome\/free-solid-svg-icons, swiper \ud328\ud0a4\uc9c0\ub3c4 \ud568\uaed8 \uc124\uce58\ud574\uc918. .env \ud30c\uc77c \uc608\uc2dc\uc640 vite.config.js\ub3c4 \uc791\uc131\ud574\uc918.&quot;<\/code>\n<ul>\n<li><strong>\uc0ac\uc6a9 \uac00\uc774\ub4dc:<\/strong> \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \ud3f4\ub354\ub85c \uc774\ub3d9\ud55c\ub2e4. <code>[\ud504\ub85c\uc81d\ud2b8\uba85]<\/code>\uc744 \uc6d0\ud558\ub294 \uc774\ub984\uc73c\ub85c \ubc14\uafbc \ub4a4 \uc2e4\ud589\ud55c\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/blockquote>\n<h2>1. GOFLIX \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c<\/h2>\n<p>\uc774\ubc88 \uc2dc\ub9ac\uc988\uc5d0\uc11c\ub294 <strong>GOFLEX<\/strong>\ub77c\ub294 \ub137\ud50c\ub9ad\uc2a4 \uc2a4\ud0c0\uc77c\uc758 \uc601\ud654 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158(\uc560\ud50c\ub9ac\ucf00\uc774\uc158)\uc744 \ucc98\uc74c\ubd80\ud130 \ub05d\uae4c\uc9c0 \uc9c1\uc811 \ub9cc\ub4e0\ub2e4. \uc644\uc131\ud558\uba74 \uc774\ub7f0 \uae30\ub2a5\uc774 \ub3d9\uc791\ud55c\ub2e4.<\/p>\n<ul>\n<li>TMDB API\uc5d0\uc11c \uc2e4\uc2dc\uac04 \uc601\ud654 \ub370\uc774\ud130\ub97c \uac00\uc838\uc640 \ud654\uba74\uc5d0 \ud45c\uc2dc<\/li>\n<li>\ud604\uc7ac \uc0c1\uc601\uc791, \uc778\uae30\uc791, \ucd5c\uace0 \ud3c9\uc810 \uc601\ud654\ub97c \uce74\ub4dc \ud615\ud0dc\ub85c \ub098\uc5f4<\/li>\n<li>\uc601\ud654\ub97c \ud074\ub9ad\ud558\uba74 \uc0c1\uc138 \uc815\ubcf4 + \uc608\uace0\ud3b8 \ubcf4\uae30<\/li>\n<li>\uce74\ud14c\uace0\ub9ac\ubcc4 \ubaa9\ub85d + \ud398\uc774\uc9c0\ub124\uc774\uc158<\/li>\n<li>AI \ucc57\ubd07\uacfc \ub300\ud654<\/li>\n<\/ul>\n<p>\uc644\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\uc220 \uc2a4\ud0dd(Tech Stack, \uae30\uc220 \uad6c\uc131)\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<blockquote>\n<p><strong>Tip<\/strong>: <strong>\ucef4\ud3ec\ub10c\ud2b8(Component)<\/strong>\ub780? \ub808\uace0 \ube14\ub85d\ucc98\ub7fc, \ud654\uba74\uc744 \uad6c\uc131\ud558\ub294 <strong>\uc791\uc740 \uc870\uac01<\/strong>\uc774\ub2e4. \ubc84\ud2bc \ud558\ub098, \uce74\ub4dc \ud558\ub098, \ud5e4\ub354 \ud558\ub098\uac00 \uac01\uac01 \ucef4\ud3ec\ub10c\ud2b8\uc774\ub2e4. \uc774 \uc870\uac01\ub4e4\uc744 \uc870\ub9bd\ud558\uba74 \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \uc644\uc131\ub41c\ub2e4.<\/p>\n<\/blockquote>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uae30\uc220<\/th>\n<th align=\"left\">\uc5ed\ud560<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">React 19 (\ub9ac\uc561\ud2b8)<\/td>\n<td align=\"left\">UI \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc131<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Vite (\ube44\ud2b8)<\/td>\n<td align=\"left\">\ube4c\ub4dc \ub3c4\uad6c, \uac1c\ubc1c \uc11c\ubc84<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Tailwind CSS 4 (\ud14c\uc77c\uc708\ub4dc)<\/td>\n<td align=\"left\">\uc720\ud2f8\ub9ac\ud2f0 \uae30\ubc18 \uc2a4\ud0c0\uc77c\ub9c1<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">React Router 7 (\ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130)<\/td>\n<td align=\"left\">\ud398\uc774\uc9c0 \uc774\ub3d9(\ub77c\uc6b0\ud305)<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Axios (\uc561\uc2dc\uc624\uc2a4)<\/td>\n<td align=\"left\">HTTP \uc694\uccad<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Font Awesome (\ud3f0\ud2b8\uc5b4\uc378)<\/td>\n<td align=\"left\">\uc544\uc774\ucf58<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Swiper (\uc2a4\uc640\uc774\ud37c)<\/td>\n<td align=\"left\">\uc2ac\ub77c\uc774\ub4dc\/\uce90\ub7ec\uc140<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>\uad00\ub828\ub9c1\ud06c<\/h2>\n<blockquote>\n<p><strong>Tip<\/strong>: &#8211; <a href=\"https:\/\/cbot-1-qcwd.onrender.com\/\" target=\"_blank\">\uad6c\ud604\ud654\uba74<\/a><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/qwerewqwerew\/movie-2026\" target=\"_blank\">\uae43\ud5c8\ube0c<\/a><\/li>\n<li><a href=\"https:\/\/coalacoding.com\/posts\/ai\/07_vibecoding-prompts\" target=\"_blank\">\ubc14\uc774\ube0c\ucf54\ub529 \ud504\ub86c\ud504\ud2b8<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/design\/UZwghlHc6hHoBgHlzkNo8s\/%EB%B0%94%EC%9D%B4%EB%B8%8C%EC%BD%94%EB%94%A9?node-id=3929-2393&#038;t=chkxHY2RESvRlu2Y-1\" target=\"_blank\">\ud53c\uadf8\ub9c8\ub514\uc790\uc778<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<h2>2. Node.js \uc124\uce58 \ud655\uc778<\/h2>\n<p>\ud130\ubbf8\ub110(Terminal, \uba85\ub839\ucc3d)\uc744 \uc5f4\uace0 \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud55c\ub2e4. \ubc84\uc804 \ubc88\ud638\uac00 \ucd9c\ub825\ub418\uba74 \uc774\ubbf8 \uc124\uce58\ub41c \uc0c1\ud0dc\uc774\ub2e4.<\/p>\n<pre><code class=\"language-bash\">node -v\nnpm -v\n<\/code><\/pre>\n<blockquote>\n<p><strong>Tip<\/strong>: Node.js\uac00 \uc124\uce58\ub418\uc5b4 \uc788\uc9c0 \uc54a\ub2e4\uba74 <a href=\"https:\/\/nodejs.org\">https:\/\/nodejs.org<\/a> \uc5d0\uc11c LTS \ubc84\uc804\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>3. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h2>\n<pre><code class=\"language-bash\">npm create vite@latest frontend -- --template react\ncd frontend\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\"><code>npm create vite@latest<\/code>\ub85c Vite \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \ub3c4\uad6c\ub97c \uc2e4\ud589\ud55c\ub2e4. <code>frontend<\/code>\ub294 \ud3f4\ub354 \uc774\ub984\uc774\uace0, <code>--template react<\/code>\ub294 React \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud558\uaca0\ub2e4\ub294 \ub73b\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">2<\/td>\n<td align=\"left\">\uc0dd\uc131\ub41c <code>frontend<\/code> \ud3f4\ub354 \uc548\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>4. \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc124\uce58<\/h2>\n<pre><code class=\"language-bash\">npm install axios react-router tailwindcss @tailwindcss\/vite @fortawesome\/fontawesome-svg-core @fortawesome\/free-solid-svg-icons @fortawesome\/react-fontawesome swiper\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\ud328\ud0a4\uc9c0<\/th>\n<th align=\"left\">\uc5ed\ud560<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>axios<\/code><\/td>\n<td align=\"left\">\uc11c\ubc84\uc5d0 HTTP \uc694\uccad\uc744 \ubcf4\ub0b4\ub294 \ub3c4\uad6c<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><code>react-router<\/code><\/td>\n<td align=\"left\">URL\uc5d0 \ub530\ub77c \ub2e4\ub978 \ud398\uc774\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ub77c\uc6b0\ud305 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><code>tailwindcss<\/code>, <code>@tailwindcss\/vite<\/code><\/td>\n<td align=\"left\">CSS\ub97c \ud074\ub798\uc2a4\uba85(class)\uc73c\ub85c \ube60\ub974\uac8c \uc791\uc131\ud558\ub294 \ub3c4\uad6c<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><code>@fortawesome\/*<\/code><\/td>\n<td align=\"left\">\uc544\uc774\ucf58\uc744 React \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc0ac\uc6a9\ud558\ub294 \ub3c4\uad6c<\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><code>swiper<\/code><\/td>\n<td align=\"left\">\ud130\uce58 \uc2ac\ub77c\uc774\ub4dc\/\uce90\ub7ec\uc140 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>5. Vite \uc124\uc815 \ud30c\uc77c \uc791\uc131<\/h2>\n<pre><code class=\"language-javascript\">import { defineConfig } from &quot;vite&quot;;\nimport react from &quot;@vitejs\/plugin-react&quot;;\nimport tailwindcss from &quot;@tailwindcss\/vite&quot;;\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n});\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\">Vite\uc758 \uc124\uc815 \ud568\uc218 <code>defineConfig<\/code>\ub97c \uac00\uc838\uc628\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">2<\/td>\n<td align=\"left\">React \ud50c\ub7ec\uadf8\uc778\uc744 \uac00\uc838\uc628\ub2e4. JSX \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">3<\/td>\n<td align=\"left\">Tailwind CSS \ud50c\ub7ec\uadf8\uc778\uc744 \uac00\uc838\uc628\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">5-7<\/td>\n<td align=\"left\"><code>plugins<\/code> \ubc30\uc5f4\uc5d0 React\uc640 Tailwind \ud50c\ub7ec\uadf8\uc778\uc744 \ub4f1\ub85d\ud55c\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>6. CSS \ucd08\uae30 \uc124\uc815<\/h2>\n<p><code>src\/index.css<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \uae30\uc874 \ub0b4\uc6a9\uc744 \ubaa8\ub450 \uc9c0\uc6b4 \ub4a4 \uc544\ub798\ub97c \uc791\uc131\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-css\">@import url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/orioncactus\/pretendard@v1.3.9\/dist\/web\/variable\/pretendardvariable.min.css&quot;);\n\n@import &quot;tailwindcss&quot;;\n\n@theme {\n  --font-sans: &quot;Pretendard Variable&quot;, sans-serif;\n}\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\">Pretendard(\ud504\ub9ac\ud150\ub2e4\ub4dc) \ud55c\uae00 \uc6f9\ud3f0\ud2b8\ub97c CDN(\uc528\ub514\uc5d4, \ucf58\ud150\uce20 \uc804\uc1a1 \ub124\ud2b8\uc6cc\ud06c)\uc5d0\uc11c \ubd88\ub7ec\uc628\ub2e4. \ud55c\uae00\uc774 \uc608\uc058\uac8c \ubcf4\uc774\ub824\uba74 \ud3f0\ud2b8\uac00 \ud544\uc694\ud558\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">3<\/td>\n<td align=\"left\">Tailwind CSS\uc758 \ubaa8\ub4e0 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub97c \ubd88\ub7ec\uc628\ub2e4. \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub780, <code>text-white<\/code>(\ud770 \uae00\uc790), <code>bg-black<\/code>(\uac80\uc815 \ubc30\uacbd)\ucc98\ub7fc <strong>\ud558\ub098\uc758 \uc5ed\ud560\ub9cc \ud558\ub294 \uc9e7\uc740 \ud074\ub798\uc2a4<\/strong>\uc774\ub2e4. CSS \ud30c\uc77c\uc744 \ub530\ub85c \ub9cc\ub4e4\uc9c0 \uc54a\uace0 HTML\uc5d0 \uc9c1\uc811 \ud074\ub798\uc2a4\ub97c \ubd99\uc5ec\uc11c \ub514\uc790\uc778\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">5-7<\/td>\n<td align=\"left\"><code>@theme<\/code>\uc73c\ub85c Tailwind\uc758 \uae30\ubcf8 \ud3f0\ud2b8\ub97c Pretendard\ub85c \ubcc0\uacbd\ud55c\ub2e4. \uc774 \uc124\uc815 \ud558\ub098\ub85c \ud504\ub85c\uc81d\ud2b8 \uc804\uccb4\uc758 \uae00\uaf34\uc774 \ud55c\uaebc\ubc88\uc5d0 \ubc14\ub010\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><Accordion title=\"@theme\uc774\ub780?\"><br \/>\nTailwind CSS 4\uc5d0\uc11c \ub3c4\uc785\ub41c \uc0c8\ub85c\uc6b4 \ud14c\ub9c8 \uc124\uc815 \ubc29\uc2dd\uc774\ub2e4. \uae30\uc874 `tailwind.config.js`\uc758 `theme.extend` \uc5ed\ud560\uc744 CSS \ud30c\uc77c \uc548\uc5d0\uc11c \uc9c1\uc811 \ucc98\ub9ac\ud55c\ub2e4. `&#8211;font-sans`\ub97c \uc124\uc815\ud558\uba74 `font-sans` \ud074\ub798\uc2a4\uc5d0 Pretendard \ud3f0\ud2b8\uac00 \uc790\ub3d9\uc73c\ub85c \uc801\uc6a9\ub41c\ub2e4.<br \/>\n<\/Accordion><\/p>\n<blockquote>\n<p><strong>Warning<\/strong>: \uae30\uc874\uc5d0 Vite\uac00 \uc790\ub3d9 \uc0dd\uc131\ud55c CSS \ucf54\ub4dc\ub294 \ubaa8\ub450 \uc0ad\uc81c\ud574\uc57c \ud55c\ub2e4. \ub0a8\uaca8\ub450\uba74 \uc2a4\ud0c0\uc77c\uc774 \ucda9\ub3cc\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>7. \ud3f4\ub354 \uad6c\uc870 \uc815\ub9ac<\/h2>\n<p><code>src<\/code> \ud3f4\ub354 \uc548\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n<pre><code>frontend\/\n\u251c\u2500\u2500 public\/\n\u2502   \u2514\u2500\u2500 video.mp4            \u2190 \ud788\uc5b4\ub85c \uc601\uc0c1 (\uc120\ud0dd)\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 api\/\n\u2502   \u2502   \u2514\u2500\u2500 axios.js         \u2190 API \ud1b5\uc2e0 \uc124\uc815\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 Card.jsx         \u2190 \uc601\ud654 \uce74\ub4dc\n\u2502   \u2502   \u251c\u2500\u2500 Category.jsx     \u2190 \uce74\ud14c\uace0\ub9ac\ubcc4 \ubaa9\ub85d\n\u2502   \u2502   \u251c\u2500\u2500 ErrorPage.jsx    \u2190 404 \uc5d0\ub7ec \ud398\uc774\uc9c0\n\u2502   \u2502   \u251c\u2500\u2500 Footer.jsx       \u2190 \ud558\ub2e8 \ud478\ud130\n\u2502   \u2502   \u251c\u2500\u2500 Header.jsx       \u2190 \uc0c1\ub2e8 \ud5e4\ub354 + \uac80\uc0c9\n\u2502   \u2502   \u251c\u2500\u2500 Home.jsx         \u2190 \uba54\uc778 \ud398\uc774\uc9c0\n\u2502   \u2502   \u251c\u2500\u2500 MovieDetail.jsx  \u2190 \uc601\ud654 \uc0c1\uc138\n\u2502   \u2502   \u251c\u2500\u2500 Section.jsx      \u2190 \uc601\ud654 \ubaa9\ub85d \uc139\uc158\n\u2502   \u2502   \u2514\u2500\u2500 UI.jsx           \u2190 \uacf5\ud1b5 UI \ucef4\ud3ec\ub10c\ud2b8\n\u2502   \u251c\u2500\u2500 App.jsx              \u2190 \ub808\uc774\uc544\uc6c3 + \ub370\uc774\ud130 \ub85c\ub529\n\u2502   \u251c\u2500\u2500 index.css            \u2190 Tailwind + \ud3f0\ud2b8 \uc124\uc815\n\u2502   \u2514\u2500\u2500 main.jsx             \u2190 React \uc571 \uc2dc\uc791\uc810\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 vite.config.js\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\n<blockquote>\n<p><strong>Info<\/strong>: <code>components<\/code>\uc640 <code>api<\/code> \ud3f4\ub354\ub294 \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c <code>mkdir src\/components src\/api<\/code> \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 \ub41c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>8. \uac1c\ubc1c \uc11c\ubc84 \uc2e4\ud589<\/h2>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<p>\ud130\ubbf8\ub110\uc5d0 <code>http:\/\/localhost:5173<\/code> \uac19\uc740 \uc8fc\uc18c\uac00 \ud45c\uc2dc\ub418\uba74 \uc131\uacf5\uc774\ub2e4.<\/p>\n<blockquote>\n<p><strong>Tip<\/strong>: \uac1c\ubc1c \uc11c\ubc84\ub97c \uc885\ub8cc\ud558\ub824\uba74 \ud130\ubbf8\ub110\uc5d0\uc11c <code>Ctrl + C<\/code>\ub97c \ub204\ub974\uba74 \ub41c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>9. TMDB API \ud0a4 \ubc1c\uae09<\/h2>\n<ol>\n<li><a href=\"https:\/\/www.themoviedb.org\">https:\/\/www.themoviedb.org<\/a> \uc5d0 \ud68c\uc6d0\uac00\uc785\ud55c\ub2e4.<\/li>\n<li>\ub85c\uadf8\uc778 \ud6c4 Settings(\uc124\uc815) \u2192 API \uba54\ub274\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/li>\n<li>API Key(API \ud0a4)\ub97c \ubcf5\uc0ac\ud55c\ub2e4.<\/li>\n<\/ol>\n<p>\ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 <code>.env<\/code> \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4 \uc800\uc7a5\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-text\">VITE_TMDB_API_KEY=\uc5ec\uae30\uc5d0_\ubc1c\uae09\ubc1b\uc740_\ud0a4\ub97c_\ubd99\uc5ec\ub123\uae30\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\"><code>VITE_<\/code> \uc811\ub450\uc0ac\uac00 \ubd99\uc5b4\uc57c Vite\uac00 \uc774 \uac12\uc744 \ucf54\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p><strong>Warning<\/strong>: <code>.env<\/code> \ud30c\uc77c\uc740 \ube44\ubc00 \uc815\ubcf4\uc774\ub2e4. <code>.gitignore<\/code>\uc5d0 <code>.env<\/code>\ub97c \ucd94\uac00\ud558\uc5ec GitHub\uc5d0 \uc62c\ub77c\uac00\uc9c0 \uc54a\ub3c4\ub85d \ubc18\ub4dc\uc2dc \ud655\uc778\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>10. \uc804\uccb4 \ucf54\ub4dc<\/h2>\n<h4>vite.config.js<\/h4>\n<pre><code class=\"language-javascript\">import { defineConfig } from &quot;vite&quot;;\nimport react from &quot;@vitejs\/plugin-react&quot;;\nimport tailwindcss from &quot;@tailwindcss\/vite&quot;;\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n});\n<\/code><\/pre>\n<h4>src\/index.css<\/h4>\n<pre><code class=\"language-css\">@import url(&quot;https:\/\/cdn.jsdelivr.net\/gh\/orioncactus\/pretendard@v1.3.9\/dist\/web\/variable\/pretendardvariable.min.css&quot;);\n\n@import &quot;tailwindcss&quot;;\n\n@theme {\n  --font-sans: &quot;Pretendard Variable&quot;, sans-serif;\n}\n<\/code><\/pre>\n<h4>index.html<\/h4>\n<pre><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;link rel=&quot;icon&quot; href=&quot;\/favicon.png&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;movie&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n    &lt;script type=&quot;module&quot; src=&quot;\/src\/main.jsx&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tip: Gemini CLI\ub85c \uad6c\ud604\ud558\uae30 \u2014 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 &amp; \ud328\ud0a4\uc9c0 \uc124\uce58 \ud504\ub86c\ud504\ud2b8: gemini &quot;React 19 + Vite + Tailwind CSS 4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud574\uc918. \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uc740 [\ud504\ub85c\uc81d\ud2b8\uba85]\uc774\uc57c. react-router, axios, @fortawesome\/react-fontawesome, @fortawesome\/free-solid-svg-icons, swiper \ud328\ud0a4\uc9c0\ub3c4 \ud568\uaed8 \uc124\uce58\ud574\uc918. .env \ud30c\uc77c \uc608\uc2dc\uc640 vite.config.js\ub3c4 \uc791\uc131\ud574\uc918.&quot; \uc0ac\uc6a9 \uac00\uc774\ub4dc: \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \ud3f4\ub354\ub85c \uc774\ub3d9\ud55c\ub2e4. [\ud504\ub85c\uc81d\ud2b8\uba85]\uc744 \uc6d0\ud558\ub294 \uc774\ub984\uc73c\ub85c \ubc14\uafbc \ub4a4 \uc2e4\ud589\ud55c\ub2e4. 1. GOFLIX \ud504\ub85c\uc81d\ud2b8 &#8230; <a title=\"GOFLIX \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c\uc640 \uac1c\ubc1c\ud658\uacbd \uc124\uc815\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=74\" aria-label=\"GOFLIX \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c\uc640 \uac1c\ubc1c\ud658\uacbd \uc124\uc815\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-react-movie-app"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=74"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":2243,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/74\/revisions\/2243"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}