diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml new file mode 100644 index 000000000..87f03a660 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -0,0 +1,116 @@ +name: "๐Ÿ“„ Suggest new framework" +description: "I am a framework author applying to be included as a recommended framework." +title: "[Framework]: " +labels: ["type: framework"] +body: + - type: markdown + attributes: + value: | + ## Apply to be included as a recommended React framework + + _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._ + + Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. + + While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). + + To be included, frameworks must meet the following criteria: + + - **Free & open-source**: must be open source and free to use. + - **Well maintained**. must be actively maintained, providing bug fixes and improvements. + - **Active community**: must have a sufficiently large and active community to support users. + - **Clear onboarding**: must have clear install steps to install the React version of the framework. + - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. + - **Self-hosting option**: must support an option to self-host applications without losing access to features. + - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. + - **User experience**. must provide built-in support for common problems like routing and data-fetching. + - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with Reactโ€™s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time. + + Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below. + - type: input + attributes: + label: Name + description: | + What is the name of your framework? + validations: + required: true + - type: input + attributes: + label: Homepage + description: | + What is the URL of your homepage? + validations: + required: true + - type: input + attributes: + label: Install instructions + description: | + What is the URL of your getting started guide? + validations: + required: true + - type: dropdown + attributes: + label: Is your framework open source? + description: | + We only recommend free and open source frameworks. + options: + - 'No' + - 'Yes' + validations: + required: true + - type: textarea + attributes: + label: Well maintained + description: | + Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples. + validations: + required: true + - type: textarea + attributes: + label: Active community + description: | + Please describe your community. Include the size of your community, and links to community resources. + validations: + required: true + - type: textarea + attributes: + label: Clear onboarding + description: | + Please describe how a user can install your framework with React. Include links to any relevant documentation. + validations: + required: true + - type: textarea + attributes: + label: Ecosystem compatibility + description: | + Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework. + validations: + required: true + - type: textarea + attributes: + label: Self-hosting option + description: | + Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework. + validations: + required: true + - type: textarea + attributes: + label: Developer Experience + description: | + Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh. + validations: + required: true + - type: textarea + attributes: + label: User Experience + description: | + Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR. + validations: + required: true + - type: textarea + attributes: + label: Compatible with our future vision for React + description: | + Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components. + validations: + required: true diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js index f56f14b61..c819624ba 100644 --- a/plugins/remark-smartypants.js +++ b/plugins/remark-smartypants.js @@ -14,12 +14,24 @@ const visit = require('unist-util-visit'); const retext = require('retext'); const smartypants = require('retext-smartypants'); -function check(parent) { +function check(node, parent) { + if (node.data?.skipSmartyPants) return false; if (parent.tagName === 'script') return false; if (parent.tagName === 'style') return false; return true; } +function markSkip(node) { + if (!node) return; + node.data ??= {}; + node.data.skipSmartyPants = true; + if (Array.isArray(node.children)) { + for (const child of node.children) { + markSkip(child); + } + } +} + module.exports = function (options) { const processor = retext().use(smartypants, { ...options, @@ -43,8 +55,14 @@ module.exports = function (options) { let startIndex = 0; const textOrInlineCodeNodes = []; + visit(tree, 'mdxJsxFlowElement', (node) => { + if (['TerminalBlock'].includes(node.name)) { + markSkip(node); // Mark all children to skip smarty pants + } + }); + visit(tree, ['text', 'inlineCode'], (node, _, parent) => { - if (check(parent)) { + if (check(node, parent)) { if (node.type === 'text') allText += node.value; // for the case when inlineCode contains just one part of quote: `foo'bar` else allText += 'A'.repeat(node.value.length); diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 2148fd7f2..3f9a52f98 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -297,8 +297,13 @@ export function HomeContent() { ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ +======= + href="/learn/creating-a-react-app"> + Get started with a framework +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index f9a0766e4..a4c1e3e23 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { -
- - {message} -
+ + + {message} + + ); } diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index dcc29aab1..913b822d2 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -31,7 +31,11 @@ RSC๋Š” ์„œ๋ฒ„ ์ค‘์‹ฌ์˜ ๋ฉ€ํ‹ฐ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฐ„๋‹จํ•œ "์š”์ฒญ ์ด์ œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐFetching๊ฐ€ ์–ด๋Š ์ •๋„ ์ž˜ ์ •๋ฆฌ๋˜์—ˆ์œผ๋ฏ€๋กœ ๋‹ค๋ฅธ ๋ฐฉํ–ฅ์„ ์‚ดํŽด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ณ€๊ฒฝ์„ ์‹คํ–‰ํ•˜๊ณ  ํผ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ๊ฒฝ๊ณ„๋ฅผ ๋„˜์–ด ์„œ๋ฒ„ ์•ก์…˜ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ด๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์›ํ™œํ•œ RPC๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์•ก์…˜์€ ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์ „์— ์ ์ง„์ ์œผ๋กœ ํ–ฅ์ƒ๋œ ํผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” [Next.js App ๋ผ์šฐํ„ฐ](/learn/start-a-new-react-project#nextjs-app-router)์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Next.js์—์„œ๋Š” ๋ผ์šฐํ„ฐ์™€ ๊นŠ์€ ๊ฒฐํ•ฉ์„ ํ†ตํ•ด RSC๋ฅผ ๊ธฐ๋ณธ ์š”์†Œ๋กœ ๋ฐ›์•„๋“ค์ด๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐฉ๋ฒ•์ด RSC์™€ ํ˜ธํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์šฐํ„ฐ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค. RSC ๋ช…์„ธ์™€ ๊ตฌํ˜„์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์—๋Š” ๋ช…ํ™•ํ•œ ๊ตฌ๋ถ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ํ˜ธํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” React ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๋™์ž‘ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ๋ช…์„ธ์ž…๋‹ˆ๋‹ค. +======= +React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 ์šฐ๋ฆฌ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๊ธฐ์กด ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ถŒ์žฅํ•˜์ง€๋งŒ, ์ง์ ‘ ์‚ฌ์šฉ์ž ์ง€์ • ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ตฌ์ถ•ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. RSC์™€ ํ˜ธํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ง์ ‘ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์€ ๋ฒˆ๋“ค๋Ÿฌ์™€์˜ ๊นŠ์€ ๊ฒฐํ•ฉ์„ ํ•„์š”๋กœํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๊ฐ๋งŒํผ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ์„ธ๋Œ€์˜ ๋ฒˆ๋“ค๋Ÿฌ๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ํ›Œ๋ฅญํ•˜์ง€๋งŒ, ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์— ๋‹จ์ผ ๋ชจ๋“ˆ ๊ทธ๋ž˜ํ”„๋ฅผ ๋ถ„ํ• ํ•˜๋Š” ๊ฒƒ์„ ์šฐ์„ ์œผ๋กœ ์ง€์›ํ•˜๋„๋ก ์„ค๊ณ„๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์ง€๊ธˆ RSC๋ฅผ ๋‚ด์žฅํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ ์š”์†Œ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ๋ฒˆ๋“ค๋Ÿฌ ๊ฐœ๋ฐœ์ž๋“ค๊ณผ ์ง์ ‘ ํ˜‘๋ ฅํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. @@ -92,7 +96,11 @@ React ์ปดํฌ๋„ŒํŠธ์˜ ์ˆœ์ˆ˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค๊ธฐ ## ํŠธ๋žœ์ง€์…˜ ์ถ”์  {/*transition-tracing*/} +<<<<<<< HEAD ํŠธ๋žœ์ง€์…˜ ์ถ”์  API๋ฅผ ํ†ตํ•ด [React ํŠธ๋žœ์ง€์…˜](/reference/react/useTransition)์ด ๋Š๋ ค์ง€๋Š” ์‹œ์ ์„ ๊ฐ์ง€ํ•˜๊ณ  ๋Š๋ ค์ง€๋Š” ์ด์œ ๋ฅผ ์กฐ์‚ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๋‚œ ์—…๋ฐ์ดํŠธ ์ดํ›„ API์˜ ์ดˆ๊ธฐ ์„ค๊ณ„๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ  [RFC](https://github.com/reactjs/rfcs/pull/238)๋ฅผ ๊ณต๊ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ๋Šฅ๋„ ํ•จ๊ป˜ ๊ตฌํ˜„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋Š” ํ˜„์žฌ ๋ณด๋ฅ˜ ์ค‘์ž…๋‹ˆ๋‹ค. RFC์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ํ™˜์˜ํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์„ ์žฌ๊ฐœํ•˜์—ฌ React๋ฅผ ์œ„ํ•œ ๋” ๋‚˜์€ ์„ฑ๋Šฅ ์ธก์ • ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” [Next.js App ๋ผ์šฐํ„ฐ](/learn/start-a-new-react-project#nextjs-app-router)์™€ ๊ฐ™์ด React ํŠธ๋žœ์ง€์…˜ ์œ„์— ๊ตฌ์ถ•๋œ ๋ผ์šฐํ„ฐ์—์„œ๋Š” ํŠนํžˆ ๋” ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. +======= +The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 * * * ์ด๋ฒˆ ์—…๋ฐ์ดํŠธ ์™ธ์—๋„ ์ตœ๊ทผ ์šฐ๋ฆฌ ํŒ€์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ํŒŸ์บ์ŠคํŠธ์™€ ๋ผ์ด๋ธŒ์ŠคํŠธ๋ฆผ์— ์ดˆ์ฒญ์ž๋กœ ์ถœ์—ฐํ•˜์—ฌ ์šฐ๋ฆฌ์˜ ์ž‘์—…์— ๋Œ€ํ•ด ๋” ๋งŽ์€ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„๊ณ  ์งˆ๋ฌธ์— ๋‹ต๋ณ€ํ–ˆ์Šต๋‹ˆ๋‹ค. diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 39662d070..500318c10 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -112,7 +112,11 @@ React Conf 2024๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€ ๋ชจ๋“  ์Šคํƒœํ”„, ๋ฐœํ‘œ์ž, ์ฐธ๊ฐ€์ž๋ถ„ ์ฝ˜ํผ๋Ÿฐ์Šค ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•ด ์ฃผ์‹  [Callstack](https://www.callstack.com/), ๋ชจ๋ฐ”์ผ ์•ฑ์„ ์ œ์ž‘ํ•ด ์ฃผ์‹  [Kadi Kraman](https://twitter.com/kadikraman)๊ณผ [Expo ํŒ€](https://expo.dev/)๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. +<<<<<<< HEAD ํ–‰์‚ฌ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด ์ฃผ์‹  ํ›„์›์ž๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), [Vercel](https://vercel.com). +======= +Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com). +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 ์‹œ๊ฐ, ๋ฌด๋Œ€, ๊ทธ๋ฆฌ๊ณ  ์Œํ–ฅ์„ ๋‹ด๋‹นํ•ด ์ฃผ์‹  AV ํŒ€๊ณผ ํ–‰์‚ฌ๋ฅผ ๊ฐœ์ตœํ•ด ์ฃผ์‹  Westin Hotel์—๋„ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 89c63bf8e..8d91e33ee 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -355,7 +355,11 @@ Prerender API๋Š” ์ •์  HTML ์ŠคํŠธ๋ฆผ์ด ๋ฐ˜ํ™˜๋˜๊ธฐ ์ „์— ๋ฐ์ดํ„ฐ๊ฐ€ ๋กœ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฒˆ๋“ค๋ง ์ „์— ํด๋ผ์ด์–ธํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋˜๋Š” SSR ์„œ๋ฒ„์™€ ๋ถ„๋ฆฌ๋œ ํ™˜๊ฒฝ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฏธ๋ฆฌ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด ์˜ต์…˜์ž…๋‹ˆ๋‹ค. ์ด ๋ณ„๋„์˜ ํ™˜๊ฒฝ์ด React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ "์„œ๋ฒ„"์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” CI ์„œ๋ฒ„์—์„œ ๋นŒ๋“œ ์‹œ ํ•œ ๋ฒˆ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ์›น ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ์š”์ฒญ์— ๋Œ€ํ•ด ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +<<<<<<< HEAD React 19๋Š” Canary ์ฑ„๋„์—์„œ ํฌํ•จ๋œ ๋ชจ๋“  React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋Šฅ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํฌํ•จ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ์ด์ œ [ํ’€์Šคํƒ React ์•„ํ‚คํ…์ฒ˜](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision)๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ `react-server` [export ์กฐ๊ฑด](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports)์„ ์‚ฌ์šฉํ•˜์—ฌ React 19๋ฅผ ํ–ฅํ•œ ์ƒํ˜ธ ์˜์กด์„ฑPeer Dependencies์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. +======= +React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index f4ef59cd7..6046d0513 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -177,7 +177,11 @@ export default function Dashboard() { } ``` +<<<<<<< HEAD Effect์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š”๊ฒƒ์€, ๋ฐ์ดํ„ฐ๋ฅผ ๋” ์ผ์ฐ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์—ˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด๊ธฐ ์œ„ํ•ด ๋” ์˜ค๋ž˜ ๊ธฐ๋‹ค๋ ค์•ผ ํ•จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์ „์— ์š”์ฒญ์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฐ์ดํ„ฐ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค๊ธฐ ์˜ต์…˜์„ ์ œ๊ณตํ•˜๋Š” [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/ko), [Apollo](https://www.apollographql.com/docs/react) ๋˜๋Š” [Relay](https://relay.dev/)์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ๋ผ์šฐํŠธ ์ˆ˜์ค€์—์„œ ๋ฐ์ดํ„ฐ ์˜์กด์„ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์šฐํŒ… "๋กœ๋”" ํŒจํ„ด๊ณผ ํ†ตํ•ฉ๋  ๋•Œ ๊ฐ€์žฅ ํšจ๊ณผ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ๋ผ์šฐํ„ฐ๊ฐ€ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 80017d2ac..202b9da22 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -69,17 +69,17 @@ _[React ์ปดํŒŒ์ผ๋Ÿฌ Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxA npm -{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`} +npm install --save-dev --save-exact babel-plugin-react-compiler@latest pnpm -{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`} +pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest yarn -{`yarn add --dev --exact babel-plugin-react-compiler@latest`} +yarn add --dev --exact babel-plugin-react-compiler@latest ์•ˆ์ • ๋ฒ„์ „ ์ถœ์‹œ์˜ ์ผํ™˜์œผ๋กœ, React ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํ”„๋กœ์ ํŠธ์— ๋” ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ณ  ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹์„ ์ตœ์ ํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค. React ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ด์ œ ์˜ต์…”๋„ ์ฒด์ด๋‹๊ณผ ๋ฐฐ์—ด ์ธ๋ฑ์Šค๋ฅผ ์˜์กด์„ฑ์œผ๋กœ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐœ์„  ์‚ฌํ•ญ์€ ๊ถ๊ทน์ ์œผ๋กœ ์žฌ๋ Œ๋”๋ง์„ ์ค„์ด๊ณ  ๋” ๋ฐ˜์‘์ ์ธ UI๋ฅผ ๋งŒ๋“ค๋ฉด์„œ๋„, ๊ด€์šฉ์ ์ธ ์„ ์–ธ์  ์ฝ”๋“œ๋ฅผ ๊ณ„์† ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. @@ -101,17 +101,17 @@ React ์ปดํŒŒ์ผ๋Ÿฌ์—๋Š” [React์˜ ๊ทœ์น™](/reference/rules)์„ ์œ„๋ฐ˜ํ•˜๋Š” ์ฝ” npm -{`npm install --save-dev eslint-plugin-react-hooks@latest`} +npm install --save-dev eslint-plugin-react-hooks@latest pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@latest`} +pnpm add --save-dev eslint-plugin-react-hooks@latest yarn -{`yarn add --dev eslint-plugin-react-hooks@latest`} +yarn add --dev eslint-plugin-react-hooks@latest ```js {6} @@ -153,19 +153,19 @@ Expo, Vite, Next.js ํŒ€๊ณผ ํ˜‘๋ ฅํ•˜์—ฌ ์ƒˆ๋กœ์šด ์•ฑ ๊ฒฝํ—˜์— ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ [Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) ์ด์ƒ์—์„œ๋Š” ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ, ์ƒˆ๋กœ์šด ์•ฑ์€ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ž๋™์œผ๋กœ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์ด์ ์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. -{`npx create-expo-app@latest`} +npx create-expo-app@latest [Vite](https://vite.dev/guide/) ๋ฐ [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) ์‚ฌ์šฉ์ž๋Š” `create-vite` ๋ฐ `create-next-app`์—์„œ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ํ™œ์„ฑํ™”๋œ ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. -{`npm create vite@latest`} +npm create vite@latest
-{`npx create-next-app@latest`} +npx create-next-app@latest ## React ์ปดํŒŒ์ผ๋Ÿฌ ์ ์ง„์ ์œผ๋กœ ๋„์ž…ํ•˜๊ธฐ {/*adopt-react-compiler-incrementally*/} diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index aeefb5459..cb2fc9635 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -20,9 +20,15 @@ title: ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React ์ถ”๊ฐ€ํ•˜๊ธฐ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD 1. [React ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ](/learn/start-a-new-react-project) ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ **์•ฑ์˜ React ๋ถ€๋ถ„์„ ๋นŒ๋“œํ•˜์„ธ์š”.** 2. ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ ์„ค์ •์—์„œ **`/some-app` ์„ *๊ธฐ๋ณธ ๊ฒฝ๋กœ**Base Path*๋กœ ๋ช…์‹œํ•˜์„ธ์š”**. (์ด๋•Œ, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”!) 3. **์„œ๋ฒ„ ๋˜๋Š” ํ”„๋ก์‹œ๋ฅผ ๊ตฌ์„ฑ**ํ•˜์—ฌ `/some-app/` ํ•˜์œ„์˜ ๋ชจ๋“  ์š”์ฒญ์ด React ์•ฑ์—์„œ ์ฒ˜๋ฆฌ๋˜๋„๋ก ํ•˜์„ธ์š”. +======= +1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app). +2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. @@ -151,7 +157,11 @@ root.render(); ๊ธฐ์กด์— ์กด์žฌํ•˜๋˜ `index.html`์˜ ์›๋ณธ HTML ์ปจํ…์ธ ๊ฐ€ ๊ทธ๋Œ€๋กœ ๋‚จ์•„์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ๋Š” `