728x90 배움 기록/Next.js8 [Next.js] App Router API 요청 방식 정리 (+ Pages Router와 비교) (feat. MongoDB) 최근 게시판 프로젝트를 다시 리팩토링하고 기능을 보강하는 작업을 진행하고 있는데,App Router 로 프로젝트를 작업했지만API 요청은 Pages Router 방식으로 작성이 되어 있어서App Router 방식으로 변경하고자 하였다. API 요청 방식을 다룬 글이 많이 없어서공식 문서를 뜯어보고 한참 헤매다가해결한 코드를 공유하면 좋을 것 같아서 글을 작성하게 되었다! (기존에 작성했던 Pages Router 방식과 비교해서 보여주면좀 더 이해하기 쉬울 것 같았다.) 목차API 파일 폴더 구조GET 요청POST 요청 (application/json , formData 요청 방식)DELETE 요청 📌 API 파일 폴더 구조Pages Router ver.Pages Router 에서는 api 파일을 [프로.. 2024. 8. 10. [Next.js] 페이지 간 이동 방식 (= <Link>, <a>, router.push() 비교) Next.js 에서 페이지 간의 이동을 위해 , , router.push() 등을 사용할 수 있다. 위 세가지 방식의 특징과 차이점을 알아보자 📌 Next.js 에 내장된 컴포넌트 (next/link) Client side 네비게이션을 지원함 브라우저의 새로고침 없이 페이지 이동 → 매우 빠른 페이지 전환 가능 → 내부 페이지 이동 시 사용 → 전체 html 중 필요한 부분만 리렌더링 하도록 셋팅됨 (앱처럼 부드러운 사용감) → SPA 형태의 웹사이트를 만들 때 유용함 (+ 성능상의 이점) 📌 html 에서 기본적으로 제공하는 태그 페이지가 완전히 새로고침됨 → 외부 페이지 이동 시 사용 (내부 페이지 이동 시에는 지양) 📌 router.push() Next.js 에서 제공하는 useRouter 훅 안에.. 2023. 10. 17. [Next.js] Static / Dynamic rendering 과 caching 기능 사용하기 (App Router ver.) 📌 Static / Dynamic rendering Next.js 는 아래 2개의 방식으로 웹페이지를 유저에게 보내준다. (Next.js 가 2개 방식을 자동으로 구분해줌) Static rendering - Next.js 에서 페이지를 하나 만들면 기본적으로 Static rendering 식으로 페이지를 보여준다. - npm run build 시 html 페이지들을 만들고, 유저가 접속할 때 마다 이 페이지를 보내준다. - 페이지 안에 별 기능이 없다. (→ 따라서, 매번 html 페이지를 새로 만들 필요가 없음) - Next.js 옛날 버전의 SSG 개념으로 보면 된다. Dynamic rendering - 페이지 안에 아래와 같은 것을 사용한다면 dynamic rendering 식으로 페이지를 보여준다.. 2023. 10. 5. [Next.js] App Router에 대해서 (+ Pages Router와 비교) 얼마 전 Next.js 가 새로운 라우팅 방식인 App Router 를 소개했다. 이를 정리해보고, (기존 방식인) Pages Router와 비교해 보고자 한다. 📌 페이지 만드는 방법 Pages Router : 기존 방식인 Pages Router 에서 페이지를 만드려면 다음과 같이 하면된다. src/ └── pages ├── about.js ├── index.js └── team.js ▲ pages 폴더 안에 파일을 만들면, 이 파일의 이름은 URL path 가 되어 페이지가 생성된다. App Router : App Router 에서 페이지를 만드려면 다음과 같이 해야한다. src/ └── app ├── about │ └── page.js ├── globals.css ├── layout.js ├── l.. 2023. 9. 5. 이전 1 2 다음 728x90
