처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.그에 따라 next js docs를 기반으로 작성하겠습니다목차Next js 튜토리얼 1편: 시작하기 - 현재 글Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 NEXT.js의 기능 - 기본적으로 서버사이드 렌더링 지..
react는 직접적으로 dom을 조작하는 것을 지양한다. 태생 자체가 virtual dom을 사용하여 효율적인 렌더링을 하기 위해 만들어 졌기 때문이다. 하지만 dom을 조작해야하는 상황이 있다. 브라우저의 width나 height를 가져오기 위해서는 dom을 조작할 수 밖에 없다. 개인적으로 hooks가 더 편하기 때문에 hooks 코드를 사용했다. const size = useWindowSize(); function useWindowSize() { const isClient = typeof window === 'object'; function getSize() { return { width: isClient ? window.innerWidth : undefined, height: isClient ? ..
import Router from 'next/router'; const goToRecruit = () => { Router.push('/with/recruit').then(() => window.scrollTo(0, 0)); }; nextjs의 경우 한번 방문한 사이트는 csr로 처리가 된다. 그에 따라서 방문했던 페이지일 때 스크롤이 내려가 있다면 그 상태로 페이지가 변경이 된다.이를 해결하기 위해 window.scrillTo 메소드를 사용해서 다른 페이지로 넘어갈 때 스크롤 위치를 지정해 줄 수 있다.
next js 프레임 워크는 서버사이드와 클라이언트 사이드 렌더링이 이루어져 기존의 react에서 처럼 css를 import하는 방법으로는 css를 적용 시킬 수 없다. 그에 따라 styled-component와 bootstrap을 적용 시키기 위해 여러 삽질(?)을 했고 적용이 완료 되어 정리하려고 한다. styled-component 적용nextjs에서 제공하는 보일러 플레이트https://github.com/zeit/next.js/tree/master/examples/with-styled-components 우선 styled-component를 적용 시키기 위해서는 babel 설정과 _document.js 설정을 해주어야 한다. node-module 설치 npm install styled-compo..