🚨 에러 발생 회원가입 완료 페이지에서 로그인하러 가기 버튼을 눌렀을 때 로그인 페이지로 경로 이동을 하기 위해import { useRouter } from 'next/router';const router = useRouter();const handleLoginRedirect = () => { router.push("/login"); }; useRouter를 사용했는데 NextRouter was not mounted 에러가 발생했다. 1차적인 해결방법은 "use client"를 최상단에 명시해주는 것이다. 하지만 나는 이미 Page에 "use client"를 명시해준 상태이기 때문에 따로 적어줄 필요가 없었다. 💡 에러 해결찾아보니 13버전 이상의 app 라우터에서는 "use client"를 사..
🚨 에러 발생 목데이터 서버를 구축하기 위해 MSW를 사용하려고 설치를 한 뒤 mockServiceWorker.js를 생성하기 위해npx msw init public/ --save 로 를 설치하고 생성하려고 하는데 ES Module 에러가 발생함. 처음에는 당연히 노드 문제라고 생각하고 찾아서 한참 헤맸다. 찾아도 안나오길래 노드문제가 아니라 다른 문제인거 같아서 방향을 다르게 해서 찾아보니 내가 사용하고 있는 패키지 관리자가 yarn 인데 yarn 1의 의존성 문제라는 걸 찾아냈다. 💡 에러 해결yarn cache clean --allrm node_modules/ yarn.lock package-lock.jsonyarn 패키지 관리자 캐시를 지우고 현재 프로젝트의 yarn.lock package..
이번 프로젝트의 필수 사항 중 하나인 리덕스툴킷! 확실히 리덕스의 아키텍처를 먼저 이해하고 보니 리덕스 툴킷이 훨씬 사용하기 쉽고 편리하다는 걸 알 수 있었다. 우선 Redux, React Redux, Redux toolkit 각각의 역할에 대해 알아보자.Redux : 상태 관리자, 프로그램이 동작하는데 필요한 데이터를 체계적으로 관리해주는 도구리덕스 자체는 리액트에 최적화되었다기 보다 자바스크립트로 된 프로젝트에 최적화된 도구라고 할 수 있다. 리액트에서 사용하기 쉽게 등장한것이 react redux이다.React Redux : 리덕스와 리액트를 연결시켜주는 도구그럼에도 불구하고 리덕스는 많은 설정을 해줘야한다는 것과 코드의 양이 방대해지는 단점들이 생김 이러한 단점들을 보완하기 위해 나온것이 R..
NEXT.js 앱 생성하기📌 Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org 프로젝트 생성npx create-next-app@latest . 프로젝트 설정프로젝트 설정은 자신의 원하는 형식에 맞춰서 생성해주면 된다. NEXT.js 기능 살펴보기경로설정import { useRouter } from "next/router";const router = useRouter();router.push(/경로);리액트에서 사용하던 useNavigate 대..
NEXT.js는 기본적으로 다양한 렌더링 전략을 제공한다. 클라이언트 사이드 렌더링 서버 사이드 렌더링 정적 사이트 생성 증분 정적 재 생성 서버 사이드 렌더링(Server Side Rendering,SSR) 서버 사이드 렌더링이란? 서버 측에서 페이지를 렌더링 하는 것 이처럼 브라우저에 해당 페이지를 요청하면 서버에서 페이지에 필요한 데이터를 불러와서 완성된 HTML 파일을 응답한다. 💡 그 후, 렌더링이 완료된 페이지를 화면에 렌더링 시키는건데 여기서 두 렌더링은 다른 뜻을 가진다. 1) "렌더링"이 완료된 리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTML 코드로 변환하는 과정 2) 페이지를 화면에 "렌더링" HTML을 화면(브라우저)에 실제로 그려내는 것 서버 사이드 렌더링..
NEXT.js의 Router 넥스트는 2개의 페이지 라우팅 기능을 제공한다. 두 가지를 동시에 이용할 수는 없고 두 라우터 중 하나만 선택해서 사용할 수 있다. Page Router 기존 버전 모두 제공 기존에 제공되어 오던 기능 대다수의 프로젝트가 사용 배우기 쉬움 향후 App Router 학습 시 도움이 됨 App Roter Next 13 버전부터 제공 새롭게 출시된 기능으로 아직 불안정한 부분이 존재함 미 반영 프로젝트가 아직 많음 입문자가 배우기 힘듦 🚨 넥스트를 처음 배우는 단계에서 들은 강의라서 몰랐는데 현재는 14버전이 나온 상태이고 page router 보다는 거의 app router를 많이 사용한다고 하네요! 페이지 라우터 부분은 기존 개념을 이해한다고 생각하고 공부하면 좋을 것 같습니다..
