반응형 개발/Next.js35 _document _app.tsx 와 함께 _document는 서버에서만 렌더링되는 파일이기 때문에 onClick같은 이벤트, window객체, DOM 등 클라이언트에서 사용하는 코드는 사용될 수 없다. (_app 실행 이후 _document 실행됨) pages폴더 안에 _document.tsx를 만들면 된다.(typscript를 사용하지 않으면 _document.js) 그럼 _document.tsx는 뭐하는녀석일까?? html을 커스텀하라고 next.js에서 제공하는 녀석이다. 공통으로 사용할 폰트태그를 _document.tsx의 Head태그에 넣어보자 localhost:3000/hi를 다음과 같이 작성하고 _document.tsx의 태그안에 다음과 같이 넣어주면 next/document 에서 제공하는 기본적인 태그들.. 2022. 7. 26. getStaticProps - Next.js에서의 프리렌더링 Next.jx에서 getStaticProps를 사용하면 프리렌더링을 하게 된다. 1. 서버사이드에서 html을 만들어서 클라이언트에게 전해준다 (ex : 데이터fetch) 2. 클라이언트사이드에서 JS로 추가 작업 진행 (ex : 여러가지 리액트 훅) Next.js 공식문서는 언제 쓸지, 언제 작동되는지 등등 친절하게 알려주고있다. 언제 사용해야 할까? - 유저 요청 이전에 페이지 렌더링을 위해 데이터가 필요할때 - Headless CMS%EB%8A%94%20%EC%97%86%EB%8A%94%20%EC%85%88%EC%9D%B4%EC%A3%A0.)에서 데이터를 가져올때(ex : NotionAPI) - 페이지가 SEO를 위해 프리 렌더링 되어야 할때, getStaticProps는 CDN에 캐시 될 수 있는.. 2022. 7. 24. Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유 우리 회사는 Next로 랜딩페이지를 관리하고 있다. 첫 렌더링을 SSR로 하게 된다. 한편 반응형은 CSS로도 하고, useWindowSize라는 커스텀훅으로도 하고 있다. useWindowSize훅은 다음과 같다. // useWindowSize.ts import { useState, useEffect } from 'react'; export const useWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth.. 2022. 7. 18. globalStyle 때문에 ol태그가 적용 안될 때 Next.js에서 개인정보 수집 정책 페이지를 만들고 있었다. 위와 같이 코드를 작성하였지만 ol태그가 적용되지 않았다. (숫자 안나옴) 코드를 뒤져보니 globalStyle.tsx의 reset때문이었다. reset을 지우니 다른 페이지의 스타일이 모두 무너졌기 때문에, reset을 지우진 못했다. !important 를 쓰긴 싫어서 고민하다가 더 좋은 방법이 떠올랐다. 스타일드컴포넌트로 Ol을 정의한 후 사용하였다. 2022. 5. 26. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
