<div id="readability-page-1" class="page"><div>
                <div id="SE-e0ea1468-c370-46b0-9a60-8f8dce84a6f1">
                                    <p id="SE-0dac387c-dcc8-4594-b983-705b98fd260d"><span id="SE-c165aebb-8371-4eaf-b8f0-8a7a05ec5b60">안녕하세요 멍개입니다.</span></p><p id="SE-e636bf99-9838-4956-bc0a-f057b4136e58"><span id="SE-c91285c7-9c47-4251-8f18-43bac7691054">​</span></p><p id="SE-b8a84ea1-779c-443d-b663-6c485a39ce06"><span id="SE-4148a888-ba1a-47f1-80bc-d9f69af6a111">이번 시간은 현재(2025-02-09) react의 최신버전들의 조합인 react19 + next15 + shadcn + tailwind4 레포를 소개합니다.</span></p><p id="SE-47fb1597-c6a9-4d31-ab10-549b5475cd90"><span id="SE-d1675604-d07c-46b3-a7bb-e6c6d2959e26">​</span></p><p id="SE-91c73683-8962-4ee1-81d7-bb7541b54a3a"><span id="SE-3d8ec7f6-d434-440b-a550-298b567bfa49"><a href="https://github.com/shadcn/app-tailwind-v4" data-linktype="text" data-linkdata="{&quot;id&quot;: &quot;SE-3d8ec7f6-d434-440b-a550-298b567bfa49&quot;, &quot;link&quot;: &quot;https://github.com/shadcn/app-tailwind-v4&quot;}" target="_blank">https://github.com/shadcn/app-tailwind-v4</a></span></p>
                            </div>                
                                <div id="SE-f63fce2a-5137-4dfa-a53c-b47d0cf1292a">
                                    <p>$ git clone https://github.com/shadcn/app-tailwind-v4</p>
                                </div>                <div id="SE-98ee3eef-d180-4db4-80d5-3ae31ff163e1">
                                    <p id="SE-8d0c2271-5535-4dec-a2f4-3b95df9d6724"><span id="SE-83ac761f-fa75-42a4-8e54-842451f2c3e7"><b>· install dependencies </b></span></p><p id="SE-11aceaff-31ba-4dd6-88dd-48ea001137c4"><span id="SE-da2c03cf-847e-4abc-ae07-de8f3e62cb85">설치 중 다음과 같은 에러가 발생합니다.</span></p><p id="SE-7d7f6050-8adf-4802-8f7b-cf7588d0e2c9"><span id="SE-3ef92f2c-f899-4fcb-9f8d-1dcf1f8c0cb5">​</span></p><p id="SE-e983651e-2ba7-466d-b4dc-b7d44785e6f1"><span id="SE-779ee557-5469-4e19-87be-8495c5996d5c">에러 내용을 살펴보면 cmdk@1.0.0은 react@^18.0.0 버전에 의존되어 있습니다.</span></p>
                            </div>                <div id="SE-5bf5f337-6887-4cc5-8df7-baac4ecf6839">
                                    <p>$ npm i
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: app-tailwind-v4@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from cmdk@1.0.0
npm error node_modules/cmdk
npm error   cmdk@"1.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/jeongtaepark/.npm/_logs/2025-02-09T02_48_06_100Z-eresolve-report.txt
npm notice
npm notice New major version of npm available! 10.9.2 -&gt; 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice To update run: npm install -g npm@11.1.0
npm notice
npm error A complete log of this run can be found in: /Users/jeongtaepark/.npm/_logs/2025-02-09T02_48_06_100Z-debug-0.log</p>
                                </div>                <div id="SE-a5598d85-e31b-4824-8896-ae88c62d0bd9">
                                    <p id="SE-1c8d5c8c-cb02-4c56-a3ea-5080941196da"><span id="SE-84db68b0-b545-4bbc-b4d2-80ea81240afc">완전한 해결책은 아니지만 --force 또는 --legacy-peer-deps를 이용하여 설치를 합니다.</span></p><p id="SE-391d0ea1-f7b5-43b6-93c2-3bab1908469d"><span id="SE-cce22db7-05ba-4eff-b21d-3e5244b10a4d">​</span></p>
                            </div>                <div id="SE-9030e74b-a84c-4c45-a076-103c071112cf">
                                    <p>$ npm i --legacy-peer-deps</p>
                                </div>                <div id="SE-85847259-c06f-4ce6-9651-93119cec8ecd">
                                    <p id="SE-f8118448-1202-43c6-ad94-62751eba30f5"><span id="SE-27764c05-3967-45f8-861d-daa6756eb61c">만약 해당 원인을 완전하게 해결하고 싶다면, cmdk를 사용하고 있는</span><span id="SE-575f4eca-8c3b-4d18-a805-e06f9c98fa43"><b> components/ui/command.tsx </b></span><span id="SE-8d651a2b-213f-4173-ba2c-35265b9b384b">사용부분을 제거하면 됩니다.</span></p><p id="SE-069611ee-10b9-4a0c-82e3-50c08ceed29f"><span id="SE-662aea35-ef8c-4bab-bf31-41c72770a3aa">​</span></p><p id="SE-b62a3306-6d66-43f7-983e-e7675e794486"><span id="SE-6c9f6f71-5bcd-48e1-b429-0f2c6a24e6eb"><b>· 실행</b></span></p>
                            </div>                <div id="SE-c9fc2fd1-1967-435c-9ee5-7cab4a03f0bd">
                                    <p>$ npm run dev

&gt; app-tailwind-v4@0.1.0 dev
&gt; next dev --turbopack

   ▲ Next.js 15.1.0 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://221.155.152.93:3000</p>
                                </div>                <div id="SE-30f500f3-b8ad-455d-9de4-6b4d01b10452">
                            <p id="SE-db47c959-bd1a-40df-b94c-ebecb8764e31"><span id="SE-e0b78970-7137-4c67-b8a5-6b13406b497d">http://localhost:3000으로 접속하면 다음과 같이 페이지에 접속할 수 있습니다.</span></p>
                        </div>                <div id="SE-aa485178-5c92-4f63-8d27-a8d3cb223a5b">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-aa485178-5c92-4f63-8d27-a8d3cb223a5b&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfNzEg/MDAxNzM5MDcwNTE4NjA2.YS9X2pmPoDuGuIOi0DnWH91fWb4XAxP5zNFdMXYavy8g.8yMWhLBK-w1B-ISAiALHcGTcDwMLpNg8ivMeQoNyPQEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-09_12.08.29.png&quot;, &quot;originalWidth&quot; : &quot;2059&quot;, &quot;originalHeight&quot; : &quot;1399&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfNzEg/MDAxNzM5MDcwNTE4NjA2.YS9X2pmPoDuGuIOi0DnWH91fWb4XAxP5zNFdMXYavy8g.8yMWhLBK-w1B-ISAiALHcGTcDwMLpNg8ivMeQoNyPQEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-09_12.08.29.png?type=w800" data-width="693" data-height="470" alt="">
                                    </a>
                                </p>
                        </div>
                                <div id="SE-49559b25-5de0-4a66-b7b7-61091ca5b4fb">
                                    <p>$ npm run build

&gt; app-tailwind-v4@0.1.0 build
&gt; next build

   ▲ Next.js 15.1.0

   Creating an optimized production build ...
(node:20081) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:20125) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    252 kB          357 kB
└ ○ /_not-found                          986 B           107 kB
+ First Load JS shared by all            106 kB
  ├ chunks/4bd1b696-81120b694c455950.js  53 kB
  ├ chunks/517-32ec1f938cca5290.js       50.7 kB
  └ other shared chunks (total)          1.96 kB


○  (Static)  prerendered as static content</p>
                                </div>                <div id="SE-d7fa86f0-1752-48d1-b293-d8ce92bd66a6">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d7fa86f0-1752-48d1-b293-d8ce92bd66a6&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfMTMg/MDAxNzM5MDcwNjI5MTE3.B6SYE8PklfLdsO_JWu1ltPBdr6CJ7wBgClUUg0T_c2Ug.12v2VKk6hi00dF_TrmoeGGAQPPzP7WiK_4KSU1FE6-kg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-09_12.10.19.png&quot;, &quot;originalWidth&quot; : &quot;1090&quot;, &quot;originalHeight&quot; : &quot;779&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfMTMg/MDAxNzM5MDcwNjI5MTE3.B6SYE8PklfLdsO_JWu1ltPBdr6CJ7wBgClUUg0T_c2Ug.12v2VKk6hi00dF_TrmoeGGAQPPzP7WiK_4KSU1FE6-kg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-09_12.10.19.png?type=w800" data-width="693" data-height="495" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-29720eef-28fd-4614-91ba-43f59485fe75">
                                    <p>$ npm run start

&gt; app-tailwind-v4@0.1.0 start
&gt; next start

   ▲ Next.js 15.1.0
   - Local:        http://localhost:3000
   - Network:      http://127.0.0.1:3000

 ✓ Starting...
 ✓ Ready in 663ms</p>
                                </div>                <div id="SE-0575446c-29e0-4b9a-b1a3-e205986000f3">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-0575446c-29e0-4b9a-b1a3-e205986000f3&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfMTUx/MDAxNzM5MDczMDM4OTIx.FxTmhg4PWAkr1ail9ci-4wkLr2PIACsF2NMoBwb1xckg.2IX54J0DUpAdIlLZymIrLcXxDnRTu7ADq6x_2QOexjUg.PNG/SE-0575446c-29e0-4b9a-b1a3-e205986000f3.png&quot;, &quot;originalWidth&quot; : &quot;1338&quot;, &quot;originalHeight&quot; : &quot;869&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTAyMDlfMTUx/MDAxNzM5MDczMDM4OTIx.FxTmhg4PWAkr1ail9ci-4wkLr2PIACsF2NMoBwb1xckg.2IX54J0DUpAdIlLZymIrLcXxDnRTu7ADq6x_2QOexjUg.PNG/SE-0575446c-29e0-4b9a-b1a3-e205986000f3.png?type=w800" data-width="693" data-height="450" alt="">
                                    </a>
                                </p>
                        </div>
                    </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 이번 시간은 현재(2025-02-09) react의 최신버전들의 조합인 react19 + next15 + shadcn + tailwind4 레포를 소개합니다. https://github.com/shadcn/app-tailwind-v4 · clone · install dependencies 설치 중 다음과 같은 에러가 발생합니다. 에러 내용을 살펴보면 cmdk@1.0.0은 react@^18.0.0 버전에 의존되어 있습니다. 완전한 해결책은 아니지만 --force 또는 --legacy-peer-deps를 이용하여 설치를 합니다. 만약 해당 원인을 완전하게 해결하고 싶다면, cmdk를 사용하고 있는 components/ui/command.tsx 사용부분을 제거하면 됩니다. · 실행 http://localhost:3000으로 접속하면 다음과 같이 페이지에 접속할 수 있.......

[react] react19 + next15 + shadcn + tailwind4 최신버전 조합

댓글