antonio
@codewithantonio
Students
602
Reviews
17
Course Rating
4.0
์๋ ํ์ธ์, ์ ๋ ์ํํธ์จ์ด ์์ง๋์ด Antonio์ ๋๋ค. 7๋ ์ด์์ ๊ฐ๋ฐ ๊ฒฝ๋ ฅ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, ํ๋ก๊ทธ๋๋ฐ ์ธ๊ณ์ ๋งค๋ฃ๋์ด ์ด ๋ถ์ผ์์ ์ผํ ์ ์๋ค๋ ๊ฒ์ ํฐ ํ์ด์ผ๋ก ์๊ฐํฉ๋๋ค.
๊ทธ๋์ ๋ค์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๊ธฐ์ ์ ๋ค๋ฃจ๋ ๊ฒฝํ์ ํตํด ๊ฐ๋ฐ์๋ก์ ๋ง์ ์ฑ์ฅ์ ์ด๋ฃฐ ์ ์์์ต๋๋ค. ์ง๊ธ๊น์ง ์์ ์ง์๊ณผ ๊ฒฝํ๋ ์์คํ์ง๋ง, ์ ๋ ์ฌ์ ํ ๋ฐฐ์ฐ๊ณ ์ฑ์ฅํ๋ ๋ฐ์ ํฐ ์ด์ ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
์ด๋ฌํ ๊ฒฝํ๊ณผ ์ด์ ์ ๋ฐํ์ผ๋ก, ํ๋ก๊ทธ๋๋ฐ์ ๋ํ ์ ์ ์ ๋๋๊ณ ํจ๊ป ๋ฐฐ์ฐ๋ฉฐ ์ฑ์ฅํ๊ธฐ ์ํด "Code With Antonio" ์ ํ๋ธ ์ฑ๋๊ณผ ํ์ต ํ๋ซํผ์ ์ด์ํ๊ณ ์์ต๋๋ค. ์ ๊ฐ ๋ง๋ ํํ ๋ฆฌ์ผ๊ณผ ์ธ์ฌ์ดํธ๊ฐ ๋ง์ ๋ถ๋ค๊ป ๋์์ด ๋๊ณ , ํ๋ก๊ทธ๋๋ฐ ์ปค๋ฎค๋ํฐ์ ๊ธ์ ์ ์ธ ๊ธฐ์ฌ๋ฅผ ํ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๐บ ์ ํ๋ธ
๐ ํ์ต ํ๋ซํผ
Courses
Reviews
- Building a Real-World AI SaaS Full-Stack: Creating a Video Chat App
- Complete Real-world YouTube Clone Development with Next.js 15
- Complete Real-world YouTube Clone Development with Next.js 15
- Complete Real-world YouTube Clone Development with Next.js 15
- Complete Real-world YouTube Clone Development with Next.js 15
Posts
Q&A
ErrorBoundary component ๋ฅผ server component ์์ ์ฌ์ฉํ๋๊ฒ
Thank you for the thoughtful question!You're right that ErrorBoundary from react-error-boundary is a client component, and by default, React Server Components (RSC) cannot include client-only logic directly. However, it's important to understand how the two can safely interoperate.When a client component like ErrorBoundary is used to wrap another client component (for example, a component using useSuspenseQuery) inside a server component, React's rendering model ensures that this works correctly as long as the server component does not execute client-only logic itself.In the course, ErrorBoundary is used inside a server component, but it's wrapping a child component that uses useSuspenseQuery, which itself is a client component. This means:The server component acts as a wrapper, but delegates actual rendering and logic to the client boundary and childReact will automatically split the boundary at the client component, so only the client-side parts (ErrorBoundary and its children) run in the browserThis is safe and valid React behavior. It is essentially the same as rendering a client component from a server component, which is a common pattern in Next.jsThe same rules apply to as well. Although itself is a built-in React component, if it is used to wrap a client-side component that triggers data fetching (like one using useSuspenseQuery), the behavior is consistent. It will be rendered on the client, and it is completely valid for it to appear in a server component's tree as long as it wraps client logic.So to clarify:โ What would not be allowed is calling client-only hooks or performing lifecycle logic directly inside the server componentโ But rendering a client component (like ErrorBoundary or ) from a server component is perfectly fine, as long as the logic stays on the client sideHope that clears it up!Translation (I used ChatGPT):์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค!react-error-boundary์ ErrorBoundary๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ด๊ธฐ ๋๋ฌธ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฒ ์ปดํฌ๋ํธ(RSC) ์์์ ์ง์ ํด๋ผ์ด์ธํธ ์ ์ฉ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ ๋๋ ๊ฒ์ผ๋ก ์๊ณ ๊ณ์ ์ ์ ๋ง์ต๋๋ค. ํ์ง๋ง React์์๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ์๋ฒ ์ปดํฌ๋ํธ ์์์ ๋ ๋๋ง๋ง ํ๋ ๊ฒ์ ๊ด์ฐฎ์ต๋๋ค.์ด๋ฒ ๊ฐ์์์๋ ErrorBoundary๊ฐ ์๋ฒ ์ปดํฌ๋ํธ ์์ ์์ง๋ง, ์ค์ ๋ก๋ useSuspenseQuery๋ฅผ ์ฌ์ฉํ๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ wrappingํ๋ ํํ์ ๋๋ค. ์ด ๊ฒฝ์ฐ:์๋ฒ ์ปดํฌ๋ํธ๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ๋ ๋ฉํผ ์ญํ ๋ง ํฉ๋๋คReact๋ ์ด ๊ตฌ์กฐ๋ฅผ ์๋์ผ๋ก ์ธ์ํ๊ณ , ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ถํฐ๋ ํด๋ผ์ด์ธํธ ์ ์ฉ ๋ฒ๋ค๋ก ๋ถ๋ฆฌํ์ฌ ์ฒ๋ฆฌํฉ๋๋ค์ฆ, ์๋ฒ ์ปดํฌ๋ํธ์์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง๋ง ํ๊ณ ํด๋ผ์ด์ธํธ ์ ์ฉ ํ ์ด๋ ๊ธฐ๋ฅ์ ์ง์ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด, ์ด๋ ์์ ํ ์ ํจํ ํจํด์ ๋๋ค์ด์ ๋์ผํ ๊ท์น์ ์๋ ์ ์ฉ๋ฉ๋๋ค. ์์ฒด๋ React ๋ด์ฅ ์ปดํฌ๋ํธ์ด์ง๋ง, ๋ง์ฝ ํด๋ผ์ด์ธํธ์์ ์คํ๋๋ ๋ก์ง(์: useSuspenseQuery)์ ํฌํจํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ๊ณ ์๋ค๋ฉด, ์ด ์ญ์ ์๋ฒ ์ปดํฌ๋ํธ ํธ๋ฆฌ ์์ ์ฌ์ฉ๋์ด๋ ๋ฌธ์ ์์ต๋๋ค. React๊ฐ ์๋์ผ๋ก ํด๋ผ์ด์ธํธ ๋ฒ๋ค๋ก ๋ถ๋ฆฌํด์ ์ฒ๋ฆฌํฉ๋๋ค.โ ์์ฝํ๋ฉด:โ ์๋ฒ ์ปดํฌ๋ํธ์์ ํด๋ผ์ด์ธํธ ์ ์ฉ ํ ์ด๋ ๋ผ์ดํ์ฌ์ดํด ๊ธฐ๋ฅ์ ์ง์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ธ์งโ ํ์ง๋ง ErrorBoundary, ๊ฐ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๊ฒ ์์ฒด๋ ๋ฌธ์ ์์ต๋๋ค (ํด๋ผ์ด์ธํธ ๋ก์ง๋ง ์คํ๋๋ ํ)๋์์ด ๋์๊ธธ ๋ฐ๋๋๋ค!
- 1
- 2
- 151
Q&A
์นํ ๋๊ธฐํ ์๋ฌ
Thanks a lot for sharing this! ๐I havenโt been able to reproduce the issue on my side yet, but I really appreciate you taking the time to point it out. Iโll definitely keep an eye on it in case others run into the same problem. If I find anything concrete, Iโll update here for future learners.Translation (I used ChatGPT):๊ณต์ ํด์ฃผ์ ์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค! ๐์์ง ์ ํ๊ฒฝ์์๋ ํด๋น ๋ฌธ์ ๊ฐ ์ฌํ๋์ง ์์์ง๋ง, ์ด๋ ๊ฒ ์๋ ค์ฃผ์ ์ ์ ๋ง ๊ฐ์ฌ๋๋ฆฝ๋๋ค.๋ค๋ฅธ ์๊ฐ์๋ถ๋ค๊ป๋ ๋ฐ์ํ ์ ์๋ ๋ถ๋ถ์ด๋ผ ๊ณ์ ์ฃผ์ ๊น๊ฒ ์ง์ผ๋ณด๊ฒ ์ต๋๋ค.ํ์คํ ๋ด์ฉ์ ํ์ธํ๊ฒ ๋๋ฉด ์ด ๊ธ์ ์ ๋ฐ์ดํธํ๋๋ก ํ๊ฒ ์ต๋๋ค.
- 1
- 1
- 197
Q&A
์ด ๊ฐ์๋ฅผ ์๊ฐํ๋ ค๋ฉด React์ javascript๋ง ์๊ณ ์์ผ๋ฉด ๋๋์?
Hi! Thanks so much for picking up the course ๐I approach the tutorial assuming you don't know too much at the start โ so youโll see that I explain things as we go, step by step. That said, there are a few slightly more advanced concepts, like prefetching in server components, which might feel tricky if you're completely new to Next.js.For that reason, I do recommend having a basic understanding of Next.js, just enough to be familiar with things like pages, components, and layouts โ but you definitely donโt need to master it before starting.If you're already studying React now, you're on the right path. Youโll be fine!Translation (I used ChatGPT)์๋ ํ์ธ์! ๊ฐ์๋ฅผ ์๊ฐํด ์ฃผ์ ์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค ๐์ด ๊ฐ์๋ ์ฒ์๋ถํฐ ๋ง์ ๊ฑธ ์๊ณ ์๋ค๊ณ ๊ฐ์ ํ์ง ์๊ณ ์งํ๋๊ธฐ ๋๋ฌธ์, ๋จ๊ณ๋ณ๋ก ํ๋ํ๋ ์ค๋ช ํด๋๋ฆฌ๋ฉด์ ๊ฐ์ด ๋ง๋ค์ด๊ฐ๋๋ค.๋ค๋ง, ์๋ฒ ์ปดํฌ๋ํธ์์ prefetching ๊ฐ์ ์ฝ๊ฐ์ ๊ณ ๊ธ ๊ฐ๋ ๋ ๋ฑ์ฅํ๊ธฐ ๋๋ฌธ์, Next.js์ ๋ํ ์์ฃผ ๊ธฐ๋ณธ์ ์ธ ์ดํด๋ ๋ฏธ๋ฆฌ ๊ฐ์ถ๊ณ ๊ณ์๋ ๊ฑธ ์ถ์ฒ๋๋ฆฝ๋๋ค.๊ผญ ๋ง์คํฐํ ํ์๋ ์๊ณ , ํ์ด์ง๋ ์ปดํฌ๋ํธ, ๋ ์ด์์ ๊ฐ์ Next.js์ ๊ธฐ์ด๋ง ์๊ณ ์์ด๋ ์ถฉ๋ถํฉ๋๋ค.์ง๊ธ React ๊ณต๋ถ ์ค์ด์๋ผ๋ฉด ์์ฃผ ์ํ๊ณ ๊ณ์๋ ๊ฑฐ์์. ๊ฑฑ์ ํ์ง ๋ง์๊ณ ๋ฐ๋ผ์ค์๋ฉด ๋ฉ๋๋ค!
- 1
- 1
- 259
Q&A
bunx ๋ก ํ๋ก์ ํธ ์์ฑ ํ tailwind.config.ts ํ์ผ์ด ์์ฑ๋์ง ์์์ต๋๋ค.
Hi there!First of all, thank you so much for taking the course ๐ I'm the instructor of the tutorial, and in it, I use create-next-app@15.1.6.Because of that version, Tailwind CSS is initialized as v3, which automatically creates the tailwind.config.ts file. Starting with Tailwind v4, that file is no longer required for basic usage โ so it's totally normal that you donโt see it when using a newer version like 15.3.3.If you want to follow the tutorial as smoothly as possible, I recommend using the same version as me (15.1.6). That way, your setup will match mine exactly, and youโll avoid unexpected differences.That said, using the latest versions is totally fine too โ just be aware it might lead to small differences like the missing config file. If you do go with the newer versions (Tailwind v4, etc.), make sure you're also using the latest version of shadcn/ui and other related packages to avoid compatibility issues.Also, during the tutorial, I manually edit the tailwind.config.ts file. If you're using Tailwind v4 and donโt have that file, you can safely skip those edits โ v4 handles a lot of those configurations automatically behind the scenes.Thanks again for following the course! ๐โโTranslation (I used ChatGPT):์๋ ํ์ธ์!๋จผ์ ์ ๊ฐ์๋ฅผ ์๊ฐํด ์ฃผ์ ์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค ๐ ์ ๋ ์ด ํํ ๋ฆฌ์ผ์ ๊ฐ์ฌ์ ๋๋ค.๊ฐ์์์๋ create-next-app@15.1.6 ๋ฒ์ ์ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ, ์ด ๋ฒ์ ์์๋ Tailwind CSS๊ฐ v3์ผ๋ก ์ค์น๋์ด tailwind.config.ts ํ์ผ์ด ์๋์ผ๋ก ์์ฑ๋ฉ๋๋ค.Tailwind v4๋ถํฐ๋ ๊ธฐ๋ณธ์ ์ธ ์ค์ ์ ์ด ํ์ผ์ด ๋ ์ด์ ํ์ํ์ง ์๊ธฐ ๋๋ฌธ์, ์ ๋ฒ์ (์: 15.3.3)์ ์ฌ์ฉํ ๊ฒฝ์ฐ ํด๋น ํ์ผ์ด ์๋ ๊ฒ์ด ์ ์์ ๋๋ค.ํํ ๋ฆฌ์ผ์ ์ต๋ํ ์ํํ๊ฒ ๋ฐ๋ผ๊ฐ๊ณ ์ถ์ผ์๋ค๋ฉด ์ ๊ฐ ์ฌ์ฉํ๋ ๋์ผํ ๋ฒ์ (15.1.6)์ ์ฌ์ฉํ๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค. ๊ทธ๋ฌ๋ฉด ๊ฐ์์ ๋์ผํ ํ๊ฒฝ์ด ๊ตฌ์ฑ๋์ด ํผ๋์ด ์ ์ต๋๋ค.๋ฌผ๋ก , ์ต์ ๋ฒ์ ์ ์ฌ์ฉํด๋ ๊ด์ฐฎ์ต๋๋ค. ๋ค๋ง tailwind.config.ts ํ์ผ์ด ์๋ ๊ฒ์ฒ๋ผ ์ฝ๊ฐ์ ์ฐจ์ด๋ก ์ธํด ํผ๋์ด ์๊ธธ ์ ์์ต๋๋ค. ์ต์ Tailwind v4๋ฅผ ์ฌ์ฉํ์ ๋ค๋ฉด, shadcn/ui ๋ฐ ๋ค๋ฅธ ๊ด๋ จ ํจํค์ง๋ค๋ ์ต์ ๋ฒ์ ์ผ๋ก ํจ๊ป ์ฌ์ฉํ์๋ ๊ฒ์ ๊ถ์ฅ๋๋ฆฝ๋๋ค. ๊ทธ๋์ผ ํธํ์ฑ ๋ฌธ์ ๊ฐ ์ค์ด๋ญ๋๋ค.๋ํ ๊ฐ์ ์ค๊ฐ์ ์ ๊ฐ tailwind.config.ts ํ์ผ์ ์์ ํ๋ ์ฅ๋ฉด์ด ๋์ฌ ํ ๋ฐ์, ๋ง์ฝ Tailwind v4๋ฅผ ์ฌ์ฉ ์ค์ด๊ณ ํด๋น ํ์ผ์ด ์๋ค๋ฉด, ๊ทธ ๋ถ๋ถ์ ๊ทธ๋ฅ ๊ฑด๋๋ฐ์ ๋ ๋ฉ๋๋ค. Tailwind v4๋ ์ด์ ์ ์๋์ผ๋ก ํ๋ ์ค์ ๋ค์ ์๋์ผ๋ก ์ฒ๋ฆฌํด์ฃผ๊ธฐ ๋๋ฌธ์ ๋๋ค.๋ค์ ํ ๋ฒ ๊ฐ์๋ฅผ ๋ค์ด์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฌ๋ฉฐ ๐โโ
- 1
- 2
- 337




