Next.js Todo
Next.js와 다양한 백엔드·상태 관리 도구(Node.js, Express, React Query, Recoil, Vercel Postgres)를 활용하여 API 라우팅, 데이터 페칭·캐싱, 서버 액션, App Router 등을 포함한 Todo 애플리케이션 구현 방법을 다룹니다.2. Express로 TODO
Express는 Node.js의 서버 프레임워크이다.아래와 같이 터미널에서 실행하여 Express 모듈을 설치해야 한다.npm init -ynpm install express한편 앞서 헤더를 통해 해결했던 CORS 이슈를 cors 모듈을 이용한 미들웨어로 해결할 수 있
3. Next JS App Router로 TODO
https://nextjs.org/docs/pages/api-reference/create-next-appnpx create-next-app@latest 혹은 yarn create next-app을 통해 설치를 진행할 수 있다.prompts가 나오는데 아래와
Next.js와 react-query로 todo앱 만들기 (useMutation)
useMutation는 훅이기 때문에 useQuery와 같은 방식으로 추상화가 불가능하다.useMutation이 컴포넌트 내부에서 mutate를 반환하도록 커스텀 훅을 만들고,반환된 mutate를 컴포넌트 내부에서 실행해야만 작동이 된다. (컴포넌트 외부에서 바로 mu
Next.js와 react-query로 todo앱 만들기 (useQuery)
리액트 쿼리는 비동기 작업을 요청하고, 캐싱하고, 업데이트하는 상태관리 라이브러리이다.대부분의 상태를 서버로부터 받아온다는 점을 감안하여, 각 API와 비동기 작업, 그리고 그로 인해 발생되는 데이터를 하나의 식별자로 묶어 상태관리를 하는 개념이다.Redux에서의 비동
3. Next js 시작하기 (CNA, Routing)
Next JS를 설치하는 방법과 next js의 routing에 대해 다룹니다.
1. Node.JS로 TODO
Node.js의 HTTP 모듈을 이용해서 TODO앱을 만드는 법.http 모듈을 import 한다.const http = require("http");createServer를 통해 서버를 만들 수 있다.const server = http.createServer()만든
6-2. Server Action
아래는 Next.js App Router에서의 Server Action 개념과 , 과 함께 쓰는 예시를 정리한 내용이다. 1. Server Action이란? 서버에서 직접 실행되는...
Next.js와 recoil-persist로 Todo앱 만들기
Recoil은 매우 간결한 상태관리 툴이다.'하나의 원천'을 강조하는 Redux와는 달리여러 Atom으로 상태를 관리한다.이러한 Atom은 React에서 사용하는 'useState'에서의 상태와 일맥상통하며,결과적으로 React의 함수형 컴포넌트에 잘 녹아드는 문법으로
4. Next JS API Router와 Vercel Postgres로 TODO
Next JS App Router로 TODO와 같은 방식으로 next-js-postgres-todo 폴더에서 아래와 같이 입력한다.$ yarn create next-app .success Installed "create-next-app@14.0.4" with binar
