풍부한 새로운 기능, 개선 사항, 획기적인 변화를 제공하는 React 19가 출시되었습니다. 이 릴리스에서는 레거시 API를 더 이상 사용하지 않는 동시에 개발자가 상태 관리, 양식 및 서버 측 렌더링을 처리하는 방법을 재정의합니다. 업그레이드할 계획이라면 버클을 채워 혁신적인 여정을 떠나세요. 이 가이드는 원활한 전환을 보장하는 팁과 함께 React 19의 주요 내용을 안내합니다.
React 19의 주요 특징
새로운 기능
1. 액션 및 useActionState
startTransition API는 이제 '작업'이라는 비동기 기능을 지원합니다. 작업은 상태 업데이트를 관리하고, fetch()와 같은 부작용을 처리하고, 오류 처리를 포함할 수 있습니다. 조정된 상태 업데이트 및 UI 렌더링을 통해 전환을 간소화합니다.
새로운 useActionState 후크는 보류 및 최종 상태를 포함한 작업 상태에 대한 액세스를 제공하여 이를 보완합니다. 세분화된 제어를 위해 리듀서를 허용하므로 양식 상호 작용 및 복잡한 상태 흐름에 필수적인 도구입니다.
2. Optimistic을 사용한 낙관적 업데이트
useOptimistic을 사용하면 개발자가 전환이 진행되는 동안 임시 상태 변경을 설정하여 보다 원활한 사용자 환경을 제공할 수 있습니다. 비동기 작업이 완료되면 상태가 자동으로 되돌아가거나 업데이트됩니다.
3. API 사용
React 19에서는 렌더링 중에 Promise나 컨텍스트를 읽을 수 있는 use API를 도입했습니다. 이는 서버 데이터 가져오기 워크플로를 단순화할 수 있지만 use는 렌더링 함수 내에서만 호출할 수 있다는 제한이 따릅니다.
4. 소품으로 참조
이제 ref를 props로 직접 전달할 수 있으므로 앞으로 Ref가 필요하지 않습니다. 이러한 변경으로 인해 구성요소 구성이 단순화되고 참조 작업이 더욱 직관적이게 되었습니다.
5. 향상된 서스펜스
Suspense는 이제 형제가 일시 중단되면 즉시 대체 구성 요소를 커밋하는 형제 사전 준비를 지원합니다. 이 향상된 기능은 데이터 집약적인 애플리케이션의 성능과 사용자 경험을 향상시킵니다.
React DOM 클라이언트 개선
1. 양식 작업
React의 양식은 를 사용하여 useFormStatus와 더 나은 통합을 가능하게 합니다. 양식을 제출하면 제어되지 않는 구성 요소의 상태가 자동으로 재설정됩니다.
2. 문서 메타데이터 및 리소스 최적화
React 19는 기본적으로
과 같은 문서 메타데이터 렌더링을 지원합니다. 또는 <메타> 태그, 구성 요소 트리에 있습니다. 또한 preinit, preload 및 preconnect와 같은 새로운 API는 리소스 검색 및 로드 시간을 향상시킵니다.</p>
<h4>
3. <strong>비동기 스크립트</strong>
</h4>
<p>이제 구성 요소 트리 어디에서나 비동기 스크립트를 렌더링할 수 있습니다. React는 순서 지정 및 중복 제거를 처리하여 타사 스크립트 통합을 간소화합니다.</p>
<hr>
<h3>
<strong>React DOM 서버</strong>
</h3>
<h4>
1. <strong>새로운 Prerender API</strong>
</h4>
<p><strong>prerender</strong> 및 <strong>prerenderToNodeStream</strong> API는 Node.js와 같은 스트리밍 환경을 지원하여 서버 측 렌더링(SSR)을 향상합니다. 이러한 API는 HTML을 생성하기 전에 데이터 로딩을 기다리므로 SSR이 더욱 강력해집니다.</p>
<h4>
2. <strong>안정적인 React Server 구성 요소(RSC)</strong>
</h4>
<p>이제 서버 구성 요소가 안정적이므로 라이브러리가 React 19를 피어 종속성으로 타겟팅할 수 있습니다. 이는 전체 스택 React 아키텍처와 일치하며 Next.js와 같은 프레임워크와 원활한 통합을 가능하게 합니다.</p>
<hr>
<h3>
<strong>지원 중단 및 주요 변경 사항</strong>
</h3>
<h4>
<strong>지원 중단</strong>
</h4>
<ul>
<li>
<strong>element.ref 액세스</strong>: element.props.ref로 인해 더 이상 사용되지 않습니다.</li>
<li>
<strong>react-test-renderer</strong>: 지원 중단 경고를 기록합니다. React Testing Library로 마이그레이션하는 것을 고려해 보세요.</li>
<li>
<strong>레거시 API</strong>: contextType, 함수용 defaultProps, 문자열 참조와 같은 API는 공식적으로 더 이상 사용되지 않습니다.</li>
</ul>
<h4>
<strong>획기적인 변화</strong>
</h4>
<ol>
<li><p><strong>JSX 변환 요구 사항</strong><br>
새로운 JSX 변환은 React 19에서 필수입니다. 이를 통해 참조와 같은 기능을 props로 활성화하고 전반적인 성능을 향상시킬 수 있습니다.</p></li>
<li><p><strong>변경사항 처리 오류</strong><br>
포착되지 않은 오류는 이제 window.reportError에 보고되고, 경계에서 포착된 오류는 console.error를 통해 기록됩니다. onUncaughtError 및 onCaughtError와 같은 새로운 메소드를 사용하면 사용자 정의가 가능합니다.</p></li>
<li>
<p><strong>제거된 API</strong></p>
<ul>
<li>
<strong>ReactDOM.render 및 ReactDOM.hydrate</strong>: ReactDOM.createRoot 및 ReactDOM.hydrateRoot로 대체되었습니다.</li>
<li>
<strong>함수용 defaultProps</strong>: 대신 ES6 기본 매개변수를 사용하세요.</li>
<li>
<strong>레거시 컨텍스트</strong>: 최신 contextType API를 사용하세요.</li>
<li>
<strong>react-dom/test-utils</strong>: React Core의 act로 대체되었습니다.</li>
</ul>
</li>
<li><p><strong>제거된 UMD 빌드</strong><br>
UMD 빌드는 더 이상 지원되지 않습니다. esm.sh와 같은 스크립트 태그 사용에는 ESM 기반 CDN을 사용하세요.</p></li>
</ol>
<hr>
<h2>
<strong>업그레이드 준비</strong>
</h2>
<h3>
1. <strong>먼저 React 18.3으로 업그레이드</strong>
</h3>
<p>React 18.3에는 React 19에서 제거된 API에 대한 지원 중단 경고가 도입되었습니다. 이 중간 단계는 전체 업그레이드 전에 잠재적인 문제를 식별하는 데 도움이 됩니다.</p>
<h3>
2. <strong>Codemod 및 마이그레이션 도구</strong>
</h3>
<p>더 이상 사용되지 않는 API를 리팩토링하고 TypeScript 유형을 조정하는 등 반복적인 업데이트를 자동화하려면 React codemod를 사용하세요.</p>
<h3>
3. <strong>타입스크립트 조정</strong>
</h3>
<p>React 19에는 더 엄격한 TypeScript 입력이 포함되어 있습니다. 예:</p>
<ul>
<li>
ReactChild → React.ReactElement | 번호 | 끈
</li>
<li>
VoidFunctionComponent → FunctionComponent
</li>
</ul>
<p>이러한 업데이트에 맞춰 코드를 리팩터링하세요.</p>
<hr>
<h2>
<strong>원활한 전환을 위한 팁</strong>
</h2>
<ul>
<li>
<strong>엄격 모드 활용</strong>: React 19에서는 모범 사례를 더욱 엄격하게 시행합니다. 엄격 모드에서 앱을 실행하면 숨겨진 버그가 드러날 수 있습니다.</li>
<li>
<strong>조기 및 자주 테스트</strong>: 획기적인 변경 사항을 고려할 때 철저한 테스트가 중요합니다. React-test-renderer에서 React Testing Library로 전환하면 동시 렌더링과의 호환성이 보장됩니다.</li>
<li>
<strong>서버 렌더링 검토</strong>: 앱이 SSR을 사용하는 경우 React 19의 새로운 사전 렌더링 API에 대해 테스트하고 서버 구성 요소의 원활한 통합을 확인하세요.</li>
</ul>
<hr>
<h2>
<strong>React 19가 중요한 이유</strong>
</h2>
<p>React 19는 현대 애플리케이션을 위한 강력한 기능을 지원하는 동시에 개발자 경험을 개선하는 중요한 도약입니다. 비동기 작업, 개선된 Suspense 또는 서버 측 렌더링 향상에 관심이 있으신가요? 이번 릴리스에는 개발자가 더욱 빠르고 탄력적인 앱을 구축하는 데 도움이 되는 기능이 포함되어 있습니다.</p>
<p>들어갈 준비가 되셨나요? React 19 업그레이드 가이드부터 시작하여 전체 릴리스 노트를 살펴보세요.</p>
<p>즐거운 코딩하세요! ?</p>
<p>위 내용은 React 기능, 지원 중단 및 주요 변경 사항 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773439.html" title="Repo : 팀원을 부활시키는 방법" class="phpgenera_Details_mainR4_bottom_title">Repo : 팀원을 부활시키는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796774171.html" title="헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법" class="phpgenera_Details_mainR4_bottom_title">헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775336.html" title="R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>핫 AI 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>무료로 이미지를 벗다</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI 옷 제거제</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>AI Hentai를 무료로 생성하십시오.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773439.html" title="Repo : 팀원을 부활시키는 방법" class="phpgenera_Details_mainR4_bottom_title">Repo : 팀원을 부활시키는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796774171.html" title="헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법" class="phpgenera_Details_mainR4_bottom_title">헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775336.html" title="R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>뜨거운 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
<h3>메모장++7.3.1</h3>
</a>
<p>사용하기 쉬운 무료 코드 편집기</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 중국어 버전</h3>
</a>
<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
<h3>스튜디오 13.0.1 보내기</h3>
</a>
<p>강력한 PHP 통합 개발 환경</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
<h3>드림위버 CS6</h3>
</a>
<p>시각적 웹 개발 도구</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac 버전</h3>
</a>
<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>뜨거운 주제</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7315</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>9</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1625</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1348</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>46</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1260</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1207</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/faq/zt">더보기</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174162283166996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript로 문자열 문자를 교체하십시오" />
</a>
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_title">JavaScript로 문자열 문자를 교체하십시오</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">JavaScript로 문자열 문자를 교체하십시오</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772332.html" title="jQuery 날짜가 유효한지 확인하십시오" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174079027538780.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery 날짜가 유효한지 확인하십시오" />
</a>
<a href="https://www.php.cn/ko/faq/1796772332.html" title="jQuery 날짜가 유효한지 확인하십시오" class="phphistorical_Version2_mids_title">jQuery 날짜가 유효한지 확인하십시오</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 08:51 AM</span>
<p class="Articlelist_txts_p">jQuery 날짜가 유효한지 확인하십시오</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772334.html" title="jQuery는 요소 패딩/마진을 얻습니다" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174079039088465.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery는 요소 패딩/마진을 얻습니다" />
</a>
<a href="https://www.php.cn/ko/faq/1796772334.html" title="jQuery는 요소 패딩/마진을 얻습니다" class="phphistorical_Version2_mids_title">jQuery는 요소 패딩/마진을 얻습니다</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 08:53 AM</span>
<p class="Articlelist_txts_p">jQuery는 요소 패딩/마진을 얻습니다</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772262.html" title="10 JQuery Accordions 탭" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174076407763787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="10 JQuery Accordions 탭" />
</a>
<a href="https://www.php.cn/ko/faq/1796772262.html" title="10 JQuery Accordions 탭" class="phphistorical_Version2_mids_title">10 JQuery Accordions 탭</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 01:34 AM</span>
<p class="Articlelist_txts_p">10 JQuery Accordions 탭</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772258.html" title="10 JQuery 플러그인을 확인할 가치가 있습니다" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174076377393498.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="10 JQuery 플러그인을 확인할 가치가 있습니다" />
</a>
<a href="https://www.php.cn/ko/faq/1796772258.html" title="10 JQuery 플러그인을 확인할 가치가 있습니다" class="phphistorical_Version2_mids_title">10 JQuery 플러그인을 확인할 가치가 있습니다</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">10 JQuery 플러그인을 확인할 가치가 있습니다</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772264.html" title="노드 및 HTTP 콘솔로 HTTP 디버깅" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174076423290371.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="노드 및 HTTP 콘솔로 HTTP 디버깅" />
</a>
<a href="https://www.php.cn/ko/faq/1796772264.html" title="노드 및 HTTP 콘솔로 HTTP 디버깅" class="phphistorical_Version2_mids_title">노드 및 HTTP 콘솔로 HTTP 디버깅</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 01:37 AM</span>
<p class="Articlelist_txts_p">노드 및 HTTP 콘솔로 HTTP 디버깅</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796773348.html" title="사용자 정의 Google 검색 API 설정 자습서" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174102157079154.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="사용자 정의 Google 검색 API 설정 자습서" />
</a>
<a href="https://www.php.cn/ko/faq/1796773348.html" title="사용자 정의 Google 검색 API 설정 자습서" class="phphistorical_Version2_mids_title">사용자 정의 Google 검색 API 설정 자습서</a>
<span class="Articlelist_txts_time">Mar 04, 2025 am 01:06 AM</span>
<p class="Articlelist_txts_p">사용자 정의 Google 검색 API 설정 자습서</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796772259.html" title="jQuery div에 스크롤 바를 추가합니다" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174076383514877.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery div에 스크롤 바를 추가합니다" />
</a>
<a href="https://www.php.cn/ko/faq/1796772259.html" title="jQuery div에 스크롤 바를 추가합니다" class="phphistorical_Version2_mids_title">jQuery div에 스크롤 바를 추가합니다</a>
<span class="Articlelist_txts_time">Mar 01, 2025 am 01:30 AM</span>
<p class="Articlelist_txts_p">jQuery div에 스크롤 바를 추가합니다</p>
</div>
</div>
<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1743486539"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html> 
