nextjs28 [next 14 공식문서 부시기] 2.6 Dynamic Routes Dynamic Routes(동적경로) 동적 데이터로부터 경로를 생성하고 싶을 때, Dynamic Segments를 사용 해 요청 시 채워지거나 빌드 시 미리 렌더링될 수 있습니다. 사용법 폴더 이름을 대괄호(ex: [folderName])로 묶어 생성할 수 있습니다. Dynamic Segments 는 layout, page, route, generateMetadata 함수 등등에 params 가 props 로 전달됩니다. export default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug} } 기본 형태 Route URL params app/blog/[slug]/page.js /blog/a .. 2024. 1. 17. [next 14 공식문서 부시기] 2.5. Router Handlers Route Handlers Route Handlers 사용하면 웹 요청 및 응답 API 를 사용하여 특정 경로에 대한 사용자 정의 요청 핸들러를 생성할 수 있습니다 App 디렉터리 내에서만 사용할 수 있습니다. Convention Route Handlers는 App 디렉터리 내의 Route.js|ts 파일에 정의되어 있습니다. HTTP 메서드 지원 GET, POST, PUT, PATCH, DELETE, HEAD 및 OPTIONS 와 같은 HTTP 메서드가 지원됩니다. 지원되지 않는 메서드가 호출되면 Next.js 는 405 Method Not Allowed 응답을 반환합니다. 경로 지정 관련 페이지와 같은 레이아웃이나 클라이언트 측 탐색에는 참여하지 않습니다. page.js와 동일한 경로에 route.j.. 2024. 1. 16. [next 14 공식문서 부시기] 2.4. Error 처리와 Error boundary 에러 처리 error.js 활용해서 런타임 오류를 적절하게 처리할 수 있습니다. error.js 는 중첩된 하위 세그먼트 또는 page.js 구성 요소를 래핑하는 React Error Boundary 를 자동으로 생성합니다.Error boundary 내에서 오류가 발생하면 오류가 포함되고 대체 구성 요소가 렌더링됩니다. Error boundary 를 감싸는 레이아웃은 상태를 유지 하고 상호작용이 가능합니다. 오류 복구 reset() 메서드를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다. 함수 실행 시 error boundary 안의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링된 결과로 대체됩니다. // app/dashboard/error.ts.. 2024. 1. 16. [next 14 공식문서 부시기] 2.3. <Link> & navigating 연결 및 탐색 Next.js에서 경로 간을 탐색하는 방법에는 세 가지가 있습니다. 컴포넌트 사용 useRouter 사용 기본적인 window.history 사용 Link component 은 HTML 태그를 확장하여 prefetching 및 클라이언트 측을 제공하는 내장 구성 요소입니다. 경로 간 탐색. 이는 Next.js에서 경로 간을 탐색하는 기본적이고 권장되는 방법입니다. import Link from 'next/link' export default function Page() { return Dashboard } Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boo.. 2024. 1. 15. [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15. [next 14 공식문서 부시기] 2.1 Page & Layout Pages page.js 파일에서 컴포넌트를 구성해 페이지를 정의하고 해당 경로에 맞게 접근할 수 있습니다. 페이지는 기본적으로 Server Components이지만 Client Components로 설정할 수 있습니다. 페이지에서 데이터를 가져올 수 있습니다 데이터 가져오기 ※ 헤더 설정 가능 js 뿐 아니라 js, ts, tsx 형식 사용 가능 Layouts layout.js 파일을 정의해 여러 페이지에서 공유되는 UI 를 구성할수 있습니다. 레이아웃은 상태를 유지하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다. children props 를 통해 하위 레이아웃(존재하는 경우) 또는 하위 페이지로 채워집니다. layout.js 및 page.js 파일을 동일한 폴더에 정의할 수 있습니다.. 2024. 1. 13. [next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 App 라우터 13 버전부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components 를 기반으로 구축된 새로운 App Router를 도입했습니다. App Router 는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 채택을 허용합니다. Pages Router 문서 참조 기본적으로 앱 내부의 구성 요소는 React Server Components입니다. 이는 성능 최적화에 유리하고 Client Components도 사용할 수 있습니다.App 라우팅 관련 파일 layout : 공통적으로 감싸지는 ui 파일page : 페이지 관련 ui 파일loading : 로딩시 보여질 대체 ui .. 2024. 1. 12. [next 14 공식문서 부시기] 1. 설치 및 시작 Next.js 14 버전 설치 및 시작 필요 조건 Node.js 18.17 버전 이상. 자동 설치 npx create-next-app@latest 설치 옵션 // project name 설정 What is your project named? my-app // TypeScript 사용여부 Would you like to use TypeScript? No / Yes // ESLint 사용여부 Would you like to use ESLint? No / Yes // Tailwind CSS 사용여부 Would you like to use Tailwind CSS? No / Yes // src 디렉토리 사용여부 Would you like to use `src/` directory? No / Yes // app r.. 2024. 1. 11. [error] next/image Un-configured Host 설명 next/image 컴포넌트의 src 속성에 정의되지 않은 URL 의 호스트 이름을 사용하는 값을 사용했을 때 오류 발생 기본적으로 로컬 public 경로를 제외한 외부 경로를 사용하려 하면 next.config 파일에 사용할 URL 패턴을 정의해 사용 가능하다. 단순히 외부 URL 패턴을 추가하는 것이므로 기존에 로컬 경로로 쓰던 방식 또한 사용가능하다. 코드 // next.config module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'assets.example.com', port: '', pathname: '/account123/**', }, ], .. 2023. 7. 10. 비동기 데이터로 jsx 구성 시 최적화 및 예외 처리 2023.06.27 오류 발견 및 내용 업데이트 PART 1. sequlize findOne 메서드의 null return 설명 개발 환경 back : express + sequlize + ts from : nextjs + redux toolkit + ts sequlize 의 findOne 메서드를 통해 데이터베이스의 내용을 조회하는 기능을 구현했다. try-catch 문안에서 조회 성공 시 2xx 번대 실패 시 4xx, 5xx 번대 상태코드로 반환하여 redux toolkit 기능들을 활용 비동기 작업을 처리하고 있는 와중 잘못된 요청에도 데이터 없이 화면이 나타나고 redux 의 state, api 요청 역시 에러관련 내용이 없었고 값은 있어야 할 state 의 값이 null 인 이상한 상황이 나왔다.. 2023. 6. 23. 커스텀 crousel (nextjs + ts + styled-components) 저장해두면 언젠가 쓸까해서 저장해두는 나의 커스텀 crousel 만들때는 참 오래걸렷는데 버리는 것도 한순간이군 사용 방법 ReactElement[] | ReactElement 형식의 children 을 받아 배열의 경우 매핑하여 슬라이드 배치 추가로 필요한 banner 가 있다면 받아서 배치 (딱히 필요없음) props 로 styleOption:{ height:CssValue } 받아 crousel 높이 설정 (width 는 자동으로 100% 상위 태그로 감싸서 넓이 조정하여 사용하는 방식) CssValue 는 따로 css 를 props 를 입력받을때 타입을 자세히 설정해두려고 만든 class 형식의 type 이며 간단하게 string 으로 조금 고쳐서 사용해도 상관없다. 보완점 css 입력 받는 부분.. 2023. 4. 20. Next.js 에 <Link /> 는 무엇인가 next/link Next.js 에서 제공하는 Routing 기능을 가진 태그 ※ Next.js 의 특별한 Routing 에 관한 내용을 참고하자 속성 href 필수 요소 탐색할 경로 또는 URL 객체 형태로 사용 할 수 있습니다. as 브라우저에서 클릭 시 이동할 링크를 미리 지정할 수 있는 기능을 제공,서버사이드 렌더링(Server-Side Rendering)과 같이 서버에서 렌더링하는 경우에 유용하게 사용하며 as prop은 href prop과 함께 사용하는 것이 일반적이다. 공식문서로는 이해가 힘들어 chatGPT 에게 많이 물어본 결과 href 의 값은 가변적일 수 있는데 SSR 상황에서 as 를 활용하면 미리 링크에대한 정보를 가지고 있는 셈이 된다. 추가적으로 성능상의 이점이 어는 정도 되는.. 2023. 4. 6. 이전 1 2 3 다음
