분류 전체보기27 [Next.js] 시작전에 잡아보는 개념 Pre-rendering Pre-rendering 직역해도 그 의미를 유추할 수 있는데, 사전에 랜더링한다는 의미다. 무엇을 사전에 랜더링 한다는 말인가? -> 작업을 하고 npm run build 등으로 빌드할것이다. 그러면 src/pages 내부에 있는 페이지들이 생성된다. 사용자의 요청에 따라서 생성하는 것이 아니라, 클라이언트 사이드의 페이지 요청 전에 미리 생성함으로 *사전 렌더링(Pre-rendering) 이라고 한다. 이렇게 미리 만들어진 페이지들을 전달하게 될 것이다. Next.js는 기본적으로 가능하다면 각 요청에 재사용될 수 있는 정적 페이지 생성(Pre-rendering)을 권장하고 있다. 따라서, Pre-rendering이 가능하다면, Pre-rendering을 사용한다. 항상 실시간으로 최신화 되어야 하는.. 2022. 2. 11. storybook tailwind decorators 사용해보기 storybook을 잘 쓰려면 무엇을 해야할까 ? 고민해야하는 시점이 금방 다가왔다. 정말 금방. 아래는 Button.stories.tsx의 상황.. 당장 길게 늘어진 버튼 스타일 14개가 내 눈을 거슬리게 하기 충분했다. 음 이거 그냥 아이템 하나만 보이고 나머진 그냥 스타일만 주욱 나왔으면 좋겠는데...=_=;; 공식문서를 찾아보니 decorator 라는게 있었다. 그래서 다음과 같이 적용했다. Item, StyleItem 컴포넌트의 경우 그냥 레이아웃을 잡기위한 단순한 컴포넌트이다. (아, 데코레이터 안에서 컴포넌트를 쓸 수 있구나 정도로 이해하시면 좋겠다.) 14개의 스타일을 각각 Template로 다루던 것을 지웠다. 그리고 잘 보면 decorators쪽에서 map을 돌린부분을 볼 수 있다. 그.. 2022. 1. 30. typescript + next.js 12 + storybook.js + tailwind.css 시작해보기 - 셋팅 폴더구조. 폴더구조는 다음과 같다. 참고하면된다. (구조를 다르게할경우 설정을 다르게해야..) next.js + tailwind npx create-next-app@latest --typescript tailwind 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind설정. 해당 경로에 있는 파일유형을 파싱해서, css를 필요한 것만 익스포트 해준다. (경로 잘못 설정하거나, 확장자를 잘못쓰거나 하면 css가 전혀 적용되지 않을 수 있으니 주의한다.) //tailwind.config.js module.exports = { purge: [ // Use *.tsx if using TypeScript "./src/.. 2022. 1. 29. nextJs - Static Generation, Server-side Rendering 해당 포스팅은 얕게 Static Generation, Server-Side Rendering을 설명한다. ssr의 경우 세부 내용들이 더 복잡하게 있으니, 해당 포스팅 외에 공식문서를 읽기를 권한다. Static Generation : csr을 사용하는 spa와 달리, Next.js는 기본적으로 모든 페이지를 미리 랜더링 해놓는다. 클라이언트에서 페이지를 구성하는 react코드가 미리 실행된다고 생각해도 된다. 이후, HTML은 인터렉티브에 필요한 자바스크립트 코드와 연결된다.(최소한의) 해당 과정을 hydration 이라고 한다. 1. 먼저 HTML을 랜더링해놓음. 2. 인터렉티브 요소가 있는경우 js 로드가 된 시점에서 인터렉티브(대화형)이 됨. (hydration) Server-Side Render.. 2021. 12. 16. 이전 1 2 3 4 ··· 7 다음
