next.js
-
Next.js Pre-Rendering(Server-Side-Rendering) 함수 정리개발 블로깅/Next.js 2021. 4. 2. 15:05
업무 시간에 시간이 붕 떠서,... Next.js Document를 정독했다.. 그래서 Doc 보면서 공부한 내용들을 블로그에 정리해보려고 한다. Hydration Next.js에서는 기본적으로 Page 별로 라우팅 처리가 되어 있다보니, 페이지 별로 데이터를 주고받는 등에 대한 association하기가 힘들수도 있으나, 이러한 점을 최소한의 자바스크립트 코드로 서로 연결을 해서 association이 가능하도록 한다. 그리고 브라우저에 의해 해당 페이지가 로드되면 이 연결되어있는 코드가 동작하면서 인터랙션이 가능하다. SPA에서 상태관리 라이브러리를 설정하는 것은 쉬우나, Next.js와 같은 환경에서는 추가 설정이 필요로 한데 이게 Hydration이 가능하도록 하기 위한 작업인 듯 하다. Pre-..
-
[2020.01.05] Next.js에서 document가 undefined으로 나타나는 이유개발 블로깅/Next.js 2020. 1. 5. 15:39
이번에 트레바리에서 각종 이벤트와 마케팅, 모임 안내 등 여러 수신 알림 채널을 계획 중이다. 기존에는 이러한 정보를 수신받기 위한 채널이 문자전송 밖에 없었는데, 앞으로는 문자뿐 아니라 이메일과 다른 요소 등 전송 채널을 더 넓혀서 유저들이 누릴 수 있는 유용한 정보를 놓치지 않고 더 최대한 많은 혜택을 누릴 수 있도록 하기 위함이다. 그래서 이러한 마케팅 정보 수신 안내를 기존 멤버들에게 알리고 동의를 받고자, '트레바리 마케팅 정보 통합 수신 동의' 기능을 구현하기로 했는데, 해당 기능을 구현 중 맞닥뜨린 이슈사항이 하나 있었었으니...바로 document가 undefined로 나타나는 것이었다.. 처음이 이러한 현상이 어떻게 일어날 수 있는지 몰랐으나, 알고보니 내가 CSR과 SSR의 동작원리에 ..
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.08.26] Next.js + Mobx + TypeScript 사용 예시개발 블로깅/Next.js 2019. 8. 26. 19:24
기존에 있던 Next.js + typescript 프로젝트에서 Mobx를 적용시켜 리펙토링을 해야했다. next.js에 mobx를 올리려 하니까, 새롭게 알게된 소소한 부분이 있어서 블로깅으로 남기려고 한다. # Next.js에서 mobx의 Provider 적용 기존의 React에서 Provider를 적용하려면, 최상한 index.js에서 태그를 이용하여 를 감싸는 방식으로 사용했다. 그러나 next.js에서는 최상단이 Pages폴더가 되는데, 여러개의 페이지가 있어서 어디에 적용해야 될지 모를 수가 있다. 그러나 사실 Pages 폴더 내 파일 중 제일 최상위 파일인 _app.tsx(js)가 따로 있다. _app.tsx 파일을 아래와 같이 생성한다. pages/_app.tsx import App, { C..
-
[2019.08.23] 오늘의 TIL - [Next.js] global Style의 이해개발 블로깅/오늘의 TIL 2019. 8. 23. 01:10
next.js에서 여러 페이지 및 컴포넌트에 global 방식으로 스타일을 적용할 수 있다. 아래 예시를 봐보자. components/nav.js import React from 'react' const Nav = () => ( 첫번째 컴포넌트 입니다. ) export default Nav; a 태그 하나가 들어있는 간단한 컴포넌트이다. pages/index.js import React from 'react' import Nav from '../components/nav' const Home = () => ( index 페에지 입니다. ) export default Home; index.js 페이지에서도 a 태그를 가지고 있다. 그리고 바로 a태그 바로 밑에 nav 컴포넌트를 가져와서 사용하였다. nav..
-
[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점개발 블로깅/오늘의 TIL 2019. 8. 21. 22:36
Next.js에서 스타일을 추가할 때, 일반적으로 태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div) 그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다. 바로 아래와 같다. const component = () => { const arr = ['하나', '둘', '셋']; const Temp = arr.map(element => ({element})); return ( {Temp} ); } 위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 저렇게 미리 만들어 놓은 컴포넌트에는..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..