마크다운 에디터 라이브러리인 toast-ui/react-editor 사용도중 아래와 같은 에러를 마주침 Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. 문제 원인 외부 페이지에서 탐색 사용자가 다른 사이트에 있고 페이지 링크를 클릭 페이지에 오류가 표시 요청이 서버로 직접 이동했고 Next.js가 페이지 window가 존재하지 않을 때 미리 렌더링하기로 결정했기 때문에 오류가 발생 페이지 새로고침 next/link사용자가 구성 요소 를 사용하는 내부 링크를 클릭 페이지에 오류가 ..
Next.js에서 localStorage를 사용하려고 할 때 다음과 같은 에러가 나타난다. ReferenceError: localStorage is not defined 에러가 발생하는 이유 Next.js는 client-side를 렌더하기 전 server-side 렌더를 수행한다. Next.js에서 제공하는 Server Side Rendering(SSR)에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없다. window 객체는 client-side에만 존재한다. => 따라서, 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다. 해결 방법 typeof window !== 'undefined' if (typeof window..
Next.js 개발 중 파일이 변경되면 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다. key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다. Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고한다. 문제를 해결하는 방법으로는 interrupt-stdout 모듈을 사용해서 에러메세지를 무시하는 방법과 난수를 사용해서 에러메세지가 뜨지 않게 하는 방법이 있다. 해결 난수 생성해주는 uuid 모듈 설치 (typescript) npm i --save-dev @types/uuid key 에 난수 추가하기 import { atom } from "recoil"; import {..
Next.js로 블로그 프로젝트를 진행중 게시글 상세페이지에 게시물제목을 url에 포함시키고싶었다. 예를들어 http://localhost:3000/detail/1 이라면 http://localhost:3000/detail/블로그제목 이런식으로 말이다. 처음엔 게시물id값을 query로 전달한 다음 as키워드로 블로그제목을 넣어줬다. 그럼 정상적으로 http://localhost:3000/detail/블로그제목 이렇게 적용이 되는데 문제는 새로고침시 query값이 사라져서 id값으로 데이터를 불러오지 못했던 것이다. 그래서 다른 방법을 생각하던중에 내린결론은 애초에 블로그제목값으로 db데이터를 조회하는쪽으로 진행하기로 했다. 문제 1 만약 제목에 공백이나 특수문자가 들어가면 url에는 %20 이런식으로 ..
프론트와 백엔드 프로젝트를 각각 Vercel에 배포하였는데 로컬에서 작업했을때와 달리 렌더링 속도와 요청시간이 너무 느려진 것이었다. 로컬에서 작업할때는 평균 0.1 ~ 0.2s 지만 Vercel에 배포한경우에 체크를 해보면 평균 1~2s 정도로 확연히 차이가 났던 것이었다. 해결 확인 결과, 배포된 환경이 외국이라(캘리포니아) 유저가 사용하는 곳과 거리가 멀어서 발생한 이슈 였다. vercel 에서 Serverless Function Region 을 제공하여 해당 값을 변경하면 빠르게 접근할 수 있다. Function Region탭에 오면 리전을 설정 할 수 있는데 처음엔 캘리포니아로 되어있어서 서울로 바꿔주었다. 그랬더니 속도가 0.2~0.3s 정도로 줄어드는 것을 볼 수 있었다.
Next.js로 프로젝트를 완성하고 Netlify에 배포를 하려고 한다. import an existing project 클릭 GitHub 클릭 배포할 repository를 선택한다. 해당 항목을 입력 Owner : 본인 Branch to deploy : 배포할 깃허브 Branch 선택 Base directory repository 안에 frontend, backend 이런 식으로 레포에 프론트,백 둘다 관리하는 경우 우린 Next.js를 배포할 예정이니 frontend 입력 repository가 프론트 하나로 되어있는 레포일 경우는 아무것도 입력 안 해도 된다. => 결론은 배포해야 될 Next.js 프로젝트의 루트 경로를 입력하면 됨 Build command : 빌드 명령어 입력 ex) npm run..
Next.js로 프로젝트진행중 styled-component 설정 및GlobalStyle과 ThemeProvider을 적용해 보려고 한다. Styled-component 사용하기 1. 설치 // 기본 styled-components yarn add styled-components @types/styled-components // 문자열 안에 스타일 들어가는 것 처리를 위한 설치 yarn add -dev babel-plugin-styled-components //전역 스타일링에서 이용하기 위함 yarn add styled-reset 2. 초기세팅 style 구조 ├── styles │ ├── global-styles.ts # reset 또는 공통적으로 사용하는 css │ ├── theme.ts # 공통적으..
create-next-app 명령어를 사용하여 프로젝트를 생성해준다. style 폴더 styles 폴더에는 스타일을 나타내는 파일을 저장한다 global.css ) _app.tsx에서만 사용 가능 home.module.css ) 다른 컴포넌트 등에서 import 해서 사용 (다양하게 생성 가능) public 폴더 public 폴더에는 애플리케이션에서 사용되는 정적 파일들이 존재한다. 이때 create-react-app을 통해서 생성한 React 프로젝트의 public 폴더와 조금 다른 구성을 하고 있음 React 프로젝트의 public 폴더에는 index.html 파일이 존재했었지만 NexJS 프로젝트의 public 폴더에는 존재하지 않는다. 이는 NextJS가 pre-rendering을 위해서 자체적으..
