목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Using Shared Components앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니..
Next js 튜토리얼 2편 : 페이지 이동
목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 - 현재 글Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Navigate Between Pages간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다.이번에는 about 페이지를 만들어 봅시다. pages/about.js를 생성하고 아래의 내용을 추가해 주세요 export default function ..
처음으로 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..
공식문서에 보면 next js를 배포할 대 zeit이나 now를 사용하면 간편하게 할 수 있다고 나와있지만, 기존 서비스에 아파치가 이미 띄워져 있어 다른 방법을 찾아야 했다.next js의 서버를 실행 시키면 localhost:3000 으로 서버가 열리기 때문에 아파치의 virtual host와 proxy 설정을 통해 해당하는 도메인으로 접속시 next js를 보도록 만들었다. 그 후 서버의 관리를 위해 pm2를 사용해 next js서버를 열었다.아래의 명령어를 터미널에 입력하면 pm2를 사용해 next js를 띄울 수 있다. # for developmentpm2 start npm --name "next" -- run dev # for productionnpm run buildpm2 start npm ..