nextjs (14) 썸네일형 리스트형 [Next] Custom Error Page NextJS에서 커스텀 된 에러 페이지를 띄워주고 싶으면, NextJS에서 자체적으로 제공하는 기능을 사용하면 편리하다. https://nextjs.org/docs/advanced-features/custom-error-page Advanced Features: Custom Error Page | Next.js Override and extend the built-in Error page to handle custom errors. nextjs.org 만약 404Error가 발생했을 때 띄워줄 커스텀 페이지를 만들고 싶으면 pages 폴더에 404.tsx 파일을 생성해주면 된다. 같은 방식으로 500Error가 발생했을 때 띄워줄 커스텀 페이지는 pages 폴더에 500.tsx 이름의 파일을 생성해준다... [React] Window & typeof globalThis' 형식에 'apple' 속성이 없습니다 ERR NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다. 결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가.. [Next] React 구글 로그인 [react-google-login] deprecated 관련 Error, [@react-oauth/google@latest] 적용 로그인 방식에 구글 계정으로 로그인을 추가하기 위해 google cloud platform에서 Client ID를 발급받고, react-google-login 라이브러리를 사용하여 access token을 받아오던 중 예상하지 못한 에러가 발생했다. 위 과정까지는 https://jforj.tistory.com/239 블로그를 참고하였다. You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. 라는 내용의 에러 메세지로, 새로운 라이브러리를 찾아 적용하기 위해 @react-oauth/google@latest를 설치하였다. .. [Next] getServerSideProps 사용 시 url에서 query 정보 가져오기 NextJS에서 SSR을 하는 중, 서버사이드에서 데이터를 받아올 때 url에 있는 id값을 사용해 서버에 요청을 해야했다. 이 때 getServerSideProps가 제공하는 context 파라미터를 사용하여 query 정보를 가져올 수 있었다. context 파라미터에는 query 데이터를 제외하고도 여러가지 정보가 포함되어 있다. url에 있는 query를 가져오기 위해서는 context.query를 사용하면 된다. export async function getServerSideProps(context: GetServerSidePropsContext) { const cookie = getServerSidePropsUserCookie(context) const props: IProps = { data.. [Next] Session 인증 방식을 사용한 로그인 & SSR 관련 Issue 최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로.. [nextJS] localStorage 사용하기 nextJS는 SSR 기반이기 때문에 CSR와 달리 window에 접근할 수 없다. 따라서 일반적인 방식으로 사용한다면 에러가 난다. nextJS에서 localStorage 또는 sessionStorage를 사용할 땐 랜더링이 이루어 진 후 사용할 수 있다. 함수형 컴포넌트일 경우 useEffect, 클래스형 컴포넌트일 경우 componentDidMount 함수 안에서 사용해주면 된다. componentDidMount(){ if(this.state.path==="/businessMain"){ this.setState({ companyName:localStorage.getItem("companyName") }) } } 위와 같이 사용해주면 된다. 기본적으로 ["key", "value"]의 쌍으로 이루어져 .. 이전 1 2 다음