Next.js5 getStaticProps, getStaticPaths, getServerSideProps getStaticPropsstatic : 정적 사이트 생성, props : 컴포넌트의 인풋getStaticProps는 빌드 시 데이터를 패치하는 함수Next.js 코드에 getStaticProps 가 있다면 Next.js가 빌드시 알아서 함수를 실행하고, 그 props를 컴포넌트에 전달한다. 사용예제function BlogPost({ post }) { return ( {post.title} {post.content} )}export async function getStaticProps() { const res = await fetch('https://.../posts/1') const post = await res.json() return { prop.. 2024. 7. 16. Next.js 13 업데이트 알아보기 Next.js13 버전의 주요 업데이트 내용에 대해서 알아보자 App Router 기존에 pages/ 디렉터리에서 라우팅 되던 방식과 다르게, app/ 디렉터리로 라우팅 하는 방식이 추가됨 app/ 디렉토리를 생성하여 라우팅을 설정할 수 있으며, 라우팅 환경 개선뿐만 아니라, 레이아웃, 서버 컴포넌트, 스트리밍, 데이터 패칭까지도 지원하는 형태로 향상 app/ 폴더로 기존 파일 시스템 라우팅을 구현할 수 있으며, 여기의 page.js가 해당 경로(라우팅)의 페이지 컴포넌트가 됨 pages/ 라우팅과 함께 사용 가능 (점진적 업데이트) // pages/index.js export default function Page() { return Hello, Next.js!; } // app/page.js expo.. 2024. 3. 19. Suspense란 무엇인가 React Spense란 무엇인가? 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. 기본 사용법 여기서 fallback은 로딩이 완료되지 않은 경우 실제 UI 대신 렌더링 할 대체 UI라는 뜻이다. 유효한 어떤 React 노드든 사용가능하며, 주로 로딩 스피너나 스켈레톤 같은 가벼운 플레이스홀더 뷰를 사용한다. Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환된다. 렌더링 중 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. 아래 예시에서 앨범 목록을 가져오는 동안 Albums 컴포넌트가 일시 중단된다. 렌더링할 준비가 될 때까지 React는 가장 가까운 상위 Su.. 2024. 3. 7. 가치있는 컴포넌트 만들기 잘 만들어진 공통 컴포넌트는 웹 프런트엔드 개발의 속도를 높여줄 뿐만 아니라 프로젝트의 더 높은 완성도를 만들어내는 데 큰 역할을 하는데 어떻게 하면 공통 컴포넌트를 더 가치 있게 만들 수 있을지 알아보자 확장 규칙 설계 명확한 컴포넌트 역할(만능 컴포넌트 지양하기) 공통 컴포넌트의 확장성을 확보하기 전에 가장 우선시되어야 할 것은 개발하고자 하는 공통 컴포넌트 역할의 경계를 명확하게 하는 것입니다. 일반적으로 공통 컴포넌트의 확장성을 고려할 때 공통이라는 명칭 때문에 수많은 케이스를 대응하기를 원하는 경우가 많습니다. 일명 만능 컴포넌트가 되기를 바라게 되는 것입니다. 그러면 어떤 일이 발생할까요? 처음에 만들었었던 공통 컴포넌트가 점점 단순화되고 어느 순간 그냥 텅 빈 DOMElement 그 자체가 .. 2024. 3. 6. Next의 dynamic 기능에 대해 알아보자 Next.js에서의 Dynamic(동적인) 기능 Next.js의 dynamic 기능은 필요한 JavaScript 또는 TypeScript 코드를 동적으로 가져올 수 있게 해 준다. 이 기능을 사용하면, 페이지가 처음 로드될 때 필요한 부분만 불러올 수 있어 초기 로딩 시간을 줄일 수 있고 이로 인해 웹사이트의 속도가 빨라지고 반응성도 향상되어, 사용자가 웹사이트를 사용하는 경험이 훨씬 좋아진다. 즉, 이 기능은 웹사이트의 성능을 향상시키고 사용자 경험을 더욱 개선하는데 도움을 준다. Dynamic 기능의 작동 방식 Dynamic 기능은 각 모듈을 동적으로 가져오고, 가져온 모듈마다 별도의 '청크'라는 블록을 만들어낸다. 여기서 '청크'는 여러 아이템을 묶은 하나의 덩어리로 이해하면 된다. 이렇게 생성된 .. 2024. 3. 5. 이전 1 다음
