"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "딜레마", "hProperties": { "id": "딜레마" } }, "depth": 2, "value": "딜레마" }, { "data": { "id": "솔루션", "hProperties": { "id": "솔루션" } }, "depth": 2, "value": "솔루션" }, { "data": { "id": "래퍼-생성", "hProperties": { "id": "래퍼-생성" } }, "depth": 3, "value": "래퍼 생성" }, { "data": { "id": "재시도-처리", "hProperties": { "id": "재시도-처리" } }, "depth": 3, "value": "재시도 처리" }, { "data": { "id": "새로-고침-처리", "hProperties": { "id": "새로-고침-처리" } }, "depth": 3, "value": "새로 고침 처리" }, { "data": { "id": "동일한-페이지에서-여러-lazy-컴포넌트-사용하기", "hProperties": { "id": "동일한-페이지에서-여러-lazy-컴포넌트-사용하기" } }, "depth": 3, "value": "동일한 페이지에서 여러 lazy 컴포넌트 사용하기" }, { "data": { "id": "결론", "hProperties": { "id": "결론" } }, "depth": 2, "value": "결론" }]; const readingTime = { "minutes": 1, "words": 237, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info} = _components; if (!Info) _missingMdxReference("Info", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "딜레마", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#딜레마", children: _jsx(_components.span, { children: "#" }) }), "딜레마"] }), "\n", _jsx(_components.p, { children: "요즘 소프트웨어 개발은 \"빠르게 움직이며 부수기\" 라는 인기 철학 아래 더 빠르게 진행되고 있습니다. 이걸로 평가하겠다는 건 아니에요. 상황이 그렇다는 것뿐입니다. 하지만 이 빠른 속도는 특히 React 에서 컴포넌트를 로드할 때 문제로 이어질 수 있습니다." }), "\n", _jsxs(_components.p, { children: ["프로젝트에서 ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " 를 사용하여 컴포넌트를 필요에 따라 로드하는 경우, ", _jsx(_components.code, { children: "ChunkLoadError" }), " 및 ", _jsx(_components.code, { children: "Loading chunk failed" }), " 와 같은 문제를 겪었을 수 있습니다. 여기에는 몇 가지 가능한 이유가 있습니다:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "사용자 인터넷 연결이 느리거나 불안정한 경우와 같은 네트워크 문제." }), "\n", _jsx(_components.li, { children: "사용자가 오래된 앱 버전을 사용 중이며, 브라우저가 더 이상 존재하지 않는 청크를 로드하려고 시도하고 있습니다." }), "\n"] }), "\n", _jsx(_components.p, { children: "보통 페이지를 새로 고침하면 문제가 해결될 수 있지만, 사용자에게 좋은 경험은 아닙니다. 사용자가 다른 경로로 이동할 때 흰 화면이 나타난다면, 여러분의 앱에는 좋지 않은 사진을 남길 것입니다." }), "\n", _jsx(_components.p, { children: "속도와 원활한 사용자 경험 사이의 균형을 맞출 수 있을까요? 물론이죠. 방법을 보여드리겠습니다 (물론 TypeScript 와 함께)." }), "\n", _jsxs(_components.h2, { id: "솔루션", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#솔루션", children: _jsx(_components.span, { children: "#" }) }), "솔루션"] }), "\n", _jsx(_components.p, { children: "강제적인 솔루션으로는 서버에 모든 버전의 청크를 저장해 더 이상 \"누락된 청크\" 문제를 방지할 수 있습니다. 그러나 앱이 커지면서 디스크 공간 요구 사항이 증가하여 이 솔루션은 비현실적일 수 있으며, 여전히 네트워크 문제를 해결하지 못합니다." }), "\n", _jsxs(_components.p, { children: ["재시도 또는 새로 고침이 문제를 해결할 수 있다는 사실을 고려할 때, 이 솔루션을 코드에 구현할 수 있습니다. 이 문제가 보통 사용자가 다른 경로로 이동할 때 발생하기 때문에 사용자가 눈치채지 못하게 문제를 해결할 수 있습니다. 우리가 할 일은 ", _jsx(_components.code, { children: "React.lazy" }), " 함수 주위에 재시도 및 새로 고침을 처리하는 래퍼를 구축하는 것입니다."] }), "\n", _jsx(_components.p, { children: "이미 이와 같은 솔루션을 구현하는 방법에 대한 훌륭한 기사가 많이 있으므로 솔루션의 아이디어와 내부 작동 방식에 중점을 두겠습니다." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["최종 코드는 이 ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\nrepository" }), " 에서 이용할 수 있으며, ", _jsx(_components.code, { children: "react-safe-lazy" }), " 패키지는 ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " 에서 이용할 수 있습니다. 이 패키지는 완벽하게 테스트되었으며,\n매우 휴대 가능하고(minzipped ~700B) 여러분의 프로젝트에서 바로 사용할 수 있습니다."] }) }), "\n", _jsxs(_components.h3, { id: "래퍼-생성", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#래퍼-생성", children: _jsx(_components.span, { children: "#" }) }), "래퍼 생성"] }), "\n", _jsxs(_components.p, { children: ["첫 번째 단계는 ", _jsx(_components.code, { children: "React.lazy" }), " 함수 주위에 래퍼를 만드는 것입니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// 올바른 타입 추론을 위해 제너릭을 사용하세요\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "재시도-처리", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#재시도-처리", children: _jsx(_components.span, { children: "#" }) }), "재시도 처리"] }), "\n", _jsxs(_components.p, { children: ["네트워크 문제를 처리하기 위해 ", _jsx(_components.code, { children: "importFunction" }), " 을 ", _jsx(_components.code, { children: "tryImport" }), " 함수로 감싸서 재시도를 처리할 수 있습니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n let retries = 0;\n const tryImport = async () => {\n try {\n return await importFunction();\n } catch (error) {\n // 최대 3회까지 재시도\n if (retries < 3) {\n retries++;\n return tryImport();\n }\n throw error;\n }\n };\n\n return lazy(async () => {\n return await tryImport();\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["간단해 보이죠? 재시도를 보다 효율적으로 처리하려면 ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " 알고리즘을 구현할 수도 있습니다."] }), "\n", _jsxs(_components.h3, { id: "새로-고침-처리", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#새로-고침-처리", children: _jsx(_components.span, { children: "#" }) }), "새로 고침 처리"] }), "\n", _jsx(_components.p, { children: "오래된 버전 문제를 처리하려면, 오류를 잡아서 페이지를 새로 고침할 수 있습니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport 함수\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // React.lazy 의 반환 타입과 일치시키기 위해 더미 컴포넌트를 반환합니다\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["그러나 이 구현은 매우 위험합니다. 오류가 새로 고침으로 해결되지 않을 때 무한 새로 고침 루프를 유발할 수 있기 때문입니다. 그동안 앱 상태는 새로 고침 중에 손실될 것입니다. 따라서 ", _jsx(_components.code, { children: "sessionStorage" }), " 의 도움을 받아 페이지를 새로 고치려는 메시지를 저장해야 합니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport 함수\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // 컴포넌트가 성공적으로 로드되면 sessionStorage 를 지우세요\n sessionStorage.removeItem('refreshed');\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem('refreshed')) {\n sessionStorage.setItem('refreshed', 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // 새로 고침 후에도 컴포넌트를 로드할 수 없다면 오류를 발생시킵니다\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "safeLazy" }), " 함수에서 오류를 잡으면, 새로 고침으로 해결할 수 없는 문제임을 알 수 있습니다."] }), "\n", _jsxs(_components.h3, { id: "동일한-페이지에서-여러-lazy-컴포넌트-사용하기", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#동일한-페이지에서-여러-lazy-컴포넌트-사용하기", children: _jsx(_components.span, { children: "#" }) }), "동일한 페이지에서 여러 lazy 컴포넌트 사용하기"] }), "\n", _jsxs(_components.p, { children: ["현재 구현에는 아직 숨겨진 함정이 있습니다. 동일한 페이지에 여러 lazy 컴포넌트가 있는 경우, 다른 컴포넌트들이 ", _jsx(_components.code, { children: "sessionStorage" }), " 값을 재설정할 수 있기 때문에 무한 새로 고침 루프가 여전히 발생할 수 있습니다. 이 문제를 해결하기 위해 각 컴포넌트에 유니크 키를 사용할 수 있습니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport 함수\n\n // 키는 각 컴포넌트에 대해 고유한 값이면 무엇이든 될 수 있습니다\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // 컴포넌트가 성공적으로 로드되면 sessionStorage 를 지우세요\n sessionStorage.removeItem(storageKey);\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem(storageKey)) {\n sessionStorage.setItem(storageKey, 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // 새로 고침 후에도 컴포넌트를 로드할 수 없다면 오류를 발생시킵니다\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["이제 각 컴포넌트는 고유한 ", _jsx(_components.code, { children: "sessionStorage" }), " 키를 가지게 되어, 무한 새로 고침 루프를 피할 수 있습니다. 솔루션의 세세한 부분까지 계속 수정할 수 있습니다. 예를 들어:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "모든 키를 배열로 수집하여 단일 스토리지 키만 필요하게 합니다." }), "\n", _jsx(_components.li, { children: "오류 발생 전에 페이지를 한 번 이상 새로 고칠 수 있도록 새로 고침 한도를 설정합니다." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["하지만 여러분은 이미 아이디어를 이해하셨을 것입니다. 테스트와 설정이 포함된 포괄적인 TypeScript 솔루션은 ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub 레포지토리" }), " 에서 확인할 수 있습니다. 또한 ", _jsx(_components.code, { children: "react-safe-lazy" }), " 패키지를 ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), " 에서 이미 배포했으니, 여러분의 프로젝트에서 바로 사용할 수 있습니다."] }), "\n", _jsxs(_components.h2, { id: "결론", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#결론", children: _jsx(_components.span, { children: "#" }) }), "결론"] }), "\n", _jsxs(_components.p, { children: ["소프트웨어 개발은 섬세한 작업이며, 심지어 작은 세부 사항도 해결하기 위해 노력이 필요할 수 있습니다. 이 기사가 여러분이 ", _jsx(_components.code, { children: "React.lazy" }), " 의 문제를 우아하게 처리하고 앱의 사용자 경험을 개선하는 데 도움이 되기를 바랍니다."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }