Web

[ Next.js - DeepDive ] - Incremental site regeneration - 2 ( On-Demand )

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation Data Fetching: Incremental Static Regeneration | Next.js Learn how to create or update static pages at runtime with Incremental Static Regeneration. nextjs.org 이제 이전에는 일정 최소 시간이 지난 후에, 다른 사용자가 페이지를 요청해야지만, getStaticProps가 실행되며 해당 페이지를 업데이트 해서 정적인 HTML파일로 반환해 줍니다. 하지만 ODR을 사용하게 되면, 수동으로 get..

[ Next.js - DeepDive ] - Incremental site regeneration - 1

React의 Hydration에 대하여 Hydration 웹페이지를 렌더링하는 과정에서 React와 같은 CSR라이브러리는 번들된 js를 가져와 DOM을 렌더링합니다. 또한 상황에 따라 SSR을 선택하곤 합니다. 개발자들은 Server Side단에서 먼저 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 둘다 Client Side로 보내주는 생각을 했습니다. 하지만 DOM에는 동적인 이벤트가 하나도 없는 메마를 상태일 것입니다. 그래서 이 메마른 뼈대에 수분을 보충해서, 즉 HTML코드와 JS코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 렌더링하는 기술이 등장했습니다. ReactDOM.render(element, container, [callback]); 이는 특정 컴포넌트를 두 번째 파라미터인 지..

[ Next.js - DeepDive ] - Dynamic getStaticProps

이제 블로그 포스트에 진짜 html으로 주입하고, global.css를 건들여서 스타일도 입혀보도록 하겠습니다. https://runebook.dev/ko/docs/tailwindcss/functions-and-directives Tailwind CSS - 기능 및 지시문 - Tailwind가 CSS에 노출하는 사용자 지정 함수 및 지시문에 대한 참조입 Directives 지시문은 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 CSS에서 사용할 수 있는 사용자 지정 Tailwind 관련 at- 규칙 입니다. @tailwind @tailwind 지시문을 사용하여 Tailwind의 base , components , utilit runebook.dev /pages/blog/[slug].tsx im..

[ Next.js - DeepDive ] - Dynamic getStaticProps

이제는 md파일을 본격적으로 html파일로 변환해서 진짜로 화면에 띄워보도록 하겠습니다. innerHTML작업은 다음에 해보도록 하겠습니다. md -> html은 아래 npm패키지를 참고했습니다. https://www.npmjs.com/package/remark-html remark-html remark plugin to compile Markdown to HTML. Latest version: 15.0.1, last published: 8 months ago. Start using remark-html in your project by running `npm i remark-html`. There are 250 other projects in the npm registry using remark-htm..