반응형 Next.js6 [Next.js] Next.js에서 redux-persist 사용 새로고침하면 리덕스가 초기화 되는 걸 해결하기 위해서 redux-persist를 사용해서 새로고침해도 리덕스가 초기화 되는 현상을 막아주었다. 우선 redux-persist 모듈을 깔아주고. 아래와 같이 설정해주었다. yarn add redux-persist or npm install redux-persist //persistMiddleware.ts import { REHYDRATE } from 'redux-persist/lib/constants'; import { Middleware } from 'redux'; const persistMiddleware: Middleware = (store) => (dispatch) => async ( action, ) => { if (action.type === RE.. 2022. 2. 24. [Next.js] Next.js + Redux + TypeScript 사용중 state값 proxy로 나올때 해결법 import { current } from '@reduxjs/toolkit' ... extraReducers: (builder) => { builder.addCase(logIn.fulfilled, (state, action) => { console.log(current(state)) }); }, console.log(state)했을 때 proxy값으로 나오면 import {current} 해서 아래처럼 입력해주면 값이 제대로 나온다. 2022. 2. 17. [Next.js] Next.js에서 Head 설정하는 방법 💡 Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일로 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정이 가능하다. import Head from "next/head"; import { getFeaturedEvents } from '../helpers/api-util'; import EventList from '../components/events/event-list'; function HomePage(props) { return .. 2022. 1. 17. [Next.js] Pre-Rendering 💡Pre-Rendering이란? Next.js에서는 기본적으로 모든 페이지를 미리 렌더링 한다. Pre-rendering이야 말로 Next.js에서 가장 중요한 개념이라고 할 수 있는데 Next.js는 클라이언트에서 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성할 수 있다. • 두 가지 형태의 사전 렌더링 Next.js에서는 Static Generation(정적 생성)과 Sever-side Rendering(SSR)의 형태로 두 가지 방법의 사전 렌더링 방식이 존재한다. 🎈 Static Generation(정적 생성) Static Generation은 Next.js에서도 성능상의 이유로 SSR보다 권장하고 있는 방식이고, 또한 많은 사람들이 사용하는 방식이다. 정.. 2022. 1. 12. [Next.js] 파일 기반 라우팅 Next.js 파일기반 라우팅 방법 알아보기 React는 react-router를 사용해서 아래와 같은 형식으로 직접 지정을 해주는 반면에 Next.js는 file을 기반으로 한 라우팅을 사용 할 수 있어 처음 index에서는 우리가 react를 사용할 때 path="/" 해당하는 부분 path="/about"으로 나타내던 부분은 폴더이름 about의 index로 나누어 주면 된다. 저러한 형식으로 만든 파일을 실행하면 서로 라우팅 구조는 다르지만 /about의 주소가 할당되어 페이지가 나타나게 된다. 또한 위의 그림과 같이 [projectid]를 해준 부분은 [projectid]에 해당하는 값을 콘솔에서 찾으려면 router.query를 실행하여 아래와 같이 결과 값이 나온다. console.log(r.. 2022. 1. 7. [Next.js] Next.js 란? 🎈 Next.js란? Next.js는 React의 SSR(Server-Side-Rendering)을 구현할 수 있게 도와주는 프레임워크로서 여전히 React를 기반으로 하기 때문에 React를 향상시키고 여전히 React코드를 사용한다. Next.js는 페이지의 검색엔진을 위해서 타이틀이나 meta정보를 손쉽게 설정할 수 있는 장점과 렌더링이 빠르다는 장점을 가지고 있다. React자체에서도 SSR을 설계할 수 있지만 Next.js를 사용하면 보다 쉽게 구현이 가능하다. Next는 한번에 렌더링이 되기 때문에 처음 로딩속도는 빠르지만 page 이동시에는 CSR(Client Side Rendering)이 더 빠르다. 기 이유는 CSR은 처음 로딩할 때 모든 파일을 내려받아 페이지를 이동할 때 해당페이지에서.. 2021. 12. 22. 이전 1 다음
