Next.js
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Next.js 14 새로운 기능! Server Actions 알아보자!Next.js 2024. 1. 11. 13:55
🍎 목차1. Server Actions 등장2. Server Component 에서 Server Actions 사용하기2. Client component에서 Server Actions 사용하기 1. Server Actions 등장Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications. Next.js 14 가 나오면서 실험적이었던 기능이었던 Server Actions가 안정화되면서 도입되었습니다. 공식 문서의 본문..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] 백엔드 개발자가 API 안 만들어 줬다고 손 놓고 있을겁니까? MSW(Mock Service Worker) 한번 써보세요!Next.js 2024. 1. 10. 15:35
백엔드 팀과 협업하는 프로젝트를 하게 되면 보통 백엔드는 도메인(비지니스 로직)과 DB 설계 작업을 먼저 진행하고 API 작업을 시작합니다. 프런트 팀은 이런 백엔드의 스케줄에 맞춰서 API 작업이 끝날 때까지 스타일 작업 등을 먼저 진행하게 됩니다.하지만 프론트에서 할 수 있는 작업이 끝났음에도 백엔드의 API 작업이 마무리되지 않아 프론트엔드 팀의 시간이 붕 뜨게 되는 일이 비일비재합니다. 이때의 시간을 효율적으로 사용하기 위해 사용할 수 있는 라이브러리인 MSW에 대해 알아봅시다! 🍎 목차 1. MSW를 사용하는 이유2. MSW 설치 및 Service Worker의 역할3. (번외) Next.js Route Handler로 MSW 대체하기 4. Next.js 에서 MSW 사용 시 유의할 점5. ..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Context API를 사용하여 Tab Navigation을 구현할 수 있을까? (문제 해결 과정 1)Next.js 2024. 1. 3. 23:59
🍎 목차1. ONE DAY HERO 프로젝트에서의 Tab Navigation 공통 컴포넌트2. Tadak Tadak 프로젝트에서의 Context API를 사용한 Tab Navigation3. Context API를 사용한 Tab Navigation 시도 4. 문제 상황 : Context API로 공유한 값이 공유가 안된다..?5. 문제 해결 : 코드 위치를 신경 쓰자! 6. 마무리 예전에 ONE DAY HERO라는 프로젝트를 진행하면서 Tab Navigation 공통 컴포넌트를 구현한 적이 있었다. 그때 시간이 촉박해 여러 방법을 생각할 여유가 없어 자료 조사를 충분히 하지 못하고 구현하게 되어 아쉬움이 남았었다. 이번 프로젝트를 진행하면서도 Tab Navigation 이 필요하여 이번에는 좀 다양..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Parallel Routes와 Intercepting Routes 를 이용한 모달 구현시 문제 해결 과정Next.js 2023. 12. 29. 23:37
🔥 목차1. 문제 상황2. 문제 해결 과정 1. src/app/(beforeLogin)/i/flow/page.tsx 파일 생성 1-1. 새로운 문제 : two parallel pages that resolve to the same path 2. 중간 점검 2-1. default.tsx 파일의 중요성3. 결과물 1. 문제 상황일단 구현하고 싶은 부분을 먼저 설명드리면 beforeLogin 상황의 페이지( / )에서 Link가 달린 로그인 텍스트를 눌렀을 경우 브라우저의 URL이 / 에서 ➡︎ i/flow/login으로 바뀌지만 / 페이지의 콘텐츠는 그대로 뒤에 있고, 모달(modal)을 통해 login 창이 뜨도록 하고 싶었습니다. 그래서 구현한 폴더 구조가 아래와 같습니다. 하지만..