Front-end/Next

🚨 에러 발생중간 배포를 하기위해 vercel에서 배포를 해주니 이러한 에러 폭탄이 날아왔다. 읽어보니 useSearchParams()를 사용하는 페이지는 suspense로 감싸줘야 한다고 한다.  공지사항페이지에서 탭마다 경로를 쿼리파라미터로 설정해주기 위해서 useSearchParams를 사용했는데 이것때문에 에러가 발생한것 같다.  💡 에러 해결 문제는 그리 어렵지 않게 해결할 수 있다. useSearchParams를 사용해준 컴포넌트를 suspense로 감싸주기만 하면 된다.  }> {children} {pathname !== "..

🚨 에러 발생 회원가입 완료 페이지에서 로그인하러 가기 버튼을 눌렀을 때 로그인 페이지로 경로 이동을 하기 위해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"를 사..

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를 많이 사용한다고 하네요! 페이지 라우터 부분은 기존 개념을 이해한다고 생각하고 공부하면 좋을 것 같습니다..

NEXT.js 란? Vercel이 개발한 오픈소스 자바스크립트 프레임워크로 리액트를 더 편리하게 이용할 수 있도록 기존에 제공하지 않던 추가적인 기능을 제공한다. 즉, 리액트의 확장판이라고 할 수 있다. 둘의 차이점을 꼽자면 넥스트는 프레임워크이고 리액트는 라이브러리 라는 점이다. 💡 프레임워크 vs 라이브러리는 무슨 차이가 있을까? 기능 구현의 주도권이 누구에게 있는가? 프레임워크 : 프레임워크 자신이 주도권을 가짐 예를들어 페이지 라우팅을 구현해야 한다고 할 때 프레임워크가 정해 놓은 기능을 이용해서 정해 놓은 방법대로 구현해야함. 자유도 낮음 많은 기능이 미리 제공됨 쉽게 말해 자동차처럼 특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공되어 정해진 용도로만 활용이 가능함 라이브러리 : 프로그..