분류 전체보기 (399) 썸네일형 리스트형 [next.js] 6. 로딩 UI 와 스트리밍 next.js13 공식 문서 영문을 번역한 내용을 토대로 작성됩니다. 자세한 내용은 공식 사이트를 참고 하세요 로딩 UI와 스트리밍 특별한 파일인 loading.js를 사용하여 React Suspense와 함께 의미 있는 로딩 UI를 생성할 수 있습니다. 이 규칙을 사용하면 라우트 세그먼트의 내용이 로드될 때 즉시 로딩 상태를 서버에서 표시할 수 있습니다. 새로운 내용은 렌더링이 완료되면 자동으로 교체됩니다. 로딩 UI 즉시 로딩 상태 즉시 로딩 상태는 탐색 시 즉시 표시되는 대체 UI입니다. 스켈레톤 및 스피너와 같은 로딩 표시자나 커버 사진, 제목 등의 미래 화면의 작은 but 의미 있는 부분을 사전 렌더링할 수 있습니다. 이를 통해 사용자가 앱이 응답하는 것을 이해하고 더 나은 사용자 경험을 제공할.. [next.js] 5. 동적 라우팅 next.js13 공식문서를 번역하여 공부한 내용을 정리한 것이므로 자세한 내용은 공식 사이트를 참고하세요. 사전에 정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터에서 라우트를 생성하려는 경우, 요청 시간에 채워지거나 빌드 시간에 사전 렌더링되는 동적 세그먼트를 사용할 수 있습니다. 규칙 동적 세그먼트는 폴더 이름을 대괄호로 묶어서 생성할 수 있습니다 --> [ 폴더이름 ]. 예를 들어, [id] 또는 [slug]와 같이 사용할 수 있습니다. 동적 세그먼트는 레이아웃(layout), 페이지(page), 라우트(route), generateMetadata 함수의 params prop으로 전달됩니다. (개인 정리) 이렇게 생성된 params 는 출력 시 {slug : 경로명} 형태로 나타난다. 예를 들.. [next.js] 4. Route Groups (개인 요약) Route Groups 은 폴더명을 (폴더명) 형태로 감싸서 정의하는데, 이렇게 정의된 폴더는 URL 에 아무런 영향을 미치지 않는다. 즉, next.js 에서는 생성된 폴더를 하나의 URL 경로로 인식하기 때문에 만일 shop 이라는 폴더를 만들었다면, http://localhost:5000/shop 이라는 경로가 생성되지만, (shop) 으로 폴더를 생성한다면, http://localhost:5000/ 과 같이 URL는 변동없이 루트 경로만 남게 된다. Route Groups는 다음과 같은 경우에 유용합니다. - 사이트 섹션, 의도 또는 팀별로 라우트를 그룹화하는 경우 - 같은 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화하는 경우: 동일한 세그먼트에 여러 중첩 레이아웃 생성, 여러.. [next.js] 3. Linking and Navigating :: next.js 에서의 라우트 간 이동법 ? Next.js에서 라우트 간 이동하는 방법은 두 가지가 있습니다 컴포넌트 사용 useRouter Hook 사용 이 페이지에서는 , useRouter()를 사용하는 방법을 설명하고, 또한 이동 작동 방식에 대해 더 자세히 살펴보겠습니다. 컴포넌트 는 내장된 컴포넌트로, HTML 태그를 확장하여 라우트 간 사전 로딩 및 클라이언트 측 이동을 제공합니다. 이는 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. next/link에서 가져와서 컴포넌트에 href 속성을 전달하여 사용할 수 있습니다 // app/page.tsx import Link from 'next/link'; export default function Page() { return 대시보드; } 에 전달할 수 있는 다른 선택적 속성도 있.. [next.js] 2. 페이지와 레이아웃 next.js 공식 문서를 한글로 번역하여 정리한 글이니 자세한 내용은 공식 사이트를 참고 하세요 Next.js 13의 App Router는 페이지, 공유 레이아웃 및 템플릿을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했습니다. 이 페이지에서는 이러한 특별한 파일을 Next.js 애플리케이션에서 사용하는 방법을 안내합니다. 페이지 페이지는 특정 라우트에 고유한 UI입니다. page.js 파일에서 컴포넌트를 내보내어 페이지를 정의할 수 있습니다. 중첩된 폴더를 사용하여 라우트를 정의하고, 페이지.js 파일로 해당 라우트에 접근할 수 있게 할 수 있습니다. // app/page.tsx // app/page.tsx는 / URL의 UI입니다. export default function Page() { retu.. [next.js] 1. 라우팅 경로 정의 이 내용은 Next.js 의 공식 문서 내용을 한글로 번역하여 정리되었습니다. 자세한 내용은 공식 사이트를 방문하시면 됩니다. 라우트 생성Next.js는 파일 시스템 기반 라우터를 사용하며, 폴더는 라우트를 정의하는 데 사용됩니다. 각 폴더는 URL 세그먼트에 매핑되는 라우트 세그먼트를 나타냅니다. 중첩된 라우트를 생성하려면 폴더를 서로 중첩시킬 수 있습니다. 라우트 세그먼트에서 경로 세그먼트로 특별한 page.js 파일은 라우트 세그먼트를 공개적으로 접근 가능하게 만드는 데 사용됩니다. 라우트 정의 이 예시에서 /dashboard/analytics URL 경로는 해당하는 page.js 파일이 없기 때문에 공개적으로 접근할 수 없습니다. 이 폴더는 컴포넌트, 스타일시트, 이미지 또는 다른 공존 파일을.. 코드저장(인터섹션 옵저버 api) HTML 삽입 미리보기할 수 없는 소스 [JS] 드래그 앤 드롭으로 이미지 파일 첨부 HTML 삽입 미리보기할 수 없는 소스 어려운 로직은 아니므로 주석으로 설명 다는 것을 대체함 클래스 추가 및 삭제 부분은 css 적용을 동적으로 하기 위함으로 드래그 앤 드롭과는 연관성 없음. const img = document.createElement("img"); const dropArea = document.getElementById("dropArea"); const fileInput = document.getElementById("fileInput"); // 드래그 영역에 파일을 오버하면 콜백함수 호출 dropArea.addEventListener("dragover", (e) => { // 드래그 기본 동작으로 이미지 파일을 브라우저에 드롭하면 //새로운 브라우저 창이 열리면서 파일이 열린다... 이전 1 ··· 25 26 27 28 29 30 31 ··· 50 다음
