lazy-dinosaur
diff --git a/‎content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩.md‎
Lines changed: 37 additions & 3 deletions b/‎content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩.md‎
Lines changed: 37 additions & 3 deletions
diff --git a/‎content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Next.js 복습하기.md‎
Lines changed: 6 additions & 8 deletions b/‎content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Next.js 복습하기.md‎
Lines changed: 6 additions & 8 deletions
@@ -5,7 +5,7 @@ tags:
   - study
   - clone
 createdAt: 2025-06-13 11:29:34
-modifiedAt: 2025-07-01 15:59:57
+modifiedAt: 2025-07-01 17:52:35
 publish: 프로젝트/당근마켓 클론코딩
 related: ""
 series: ""
@@ -15,11 +15,39 @@ series: ""
 
 ![당근마켓 클론코딩 랜딩](_assets/attachments/당근마켓%20클론코딩/carrot-landing.png)
 
+- [레포지토리](https://github.com/lazy-dinosaur/carrot-market-clone)
+
+## 프로젝트 정의
+
 NomadCoders의 [당근마켓 클론코딩](https://nomadcoders.co/carrot-market/) 강의를 수강하며 Next.js와 Tailwind CSS 그리고 Prisma에 대한 복습과 해당 내용을 블로그에 올리는것을 목표로 한다.
 
-- [레포지토리](https://github.com/lazy-dinosaur/carrot-market-clone)
+## 계획 및 할일
+
+NomadCoders 강의에서 제공하는 파트 순서대로 진행한다.
+
+- [x] Tailwind 파트
+- [x] Authentication UI 파트
+- [x] ServerAction 파트
+- [ ] Validation 파트
+- [ ] Prisma 파트
+- [ ] Authentication 파트
+- [ ] Social Authentication 파트
+- [ ] Products 파트
+- [ ] Product Upload 파트
+- [ ] Modals 파트
+- [ ] Caching 파트
+- [ ] Optimistic Updates 파트
+- [ ] Realtime Chat 파트
+- [ ] Live Streaming 파트
+- [ ] Next Js Extras 파트
+- [ ] Deployment 파트
+- [ ] Planetscale 파트
 
-## 프로젝트트 생성
+## 핵심 노트 및 자료
+
+### 내부 노트
+
+#### 프로젝트트 생성
 
 next.js로 프로젝트를 생성한다.
 
@@ -40,3 +68,9 @@ next.js로 프로젝트를 생성한다.
   - [[당근마켓 클론코딩으로 Tailwind 복습하기]]
   - [[당근마켓 클론코딩으로 Next.js 복습하기]]
   - [[당근마켓 클론코딩으로 Zod 배우기]]
+
+### 외부 자료
+
+## 주요 의사결정 기록
+
+## 아이디어 및 메모
@@ -4,7 +4,7 @@ tags:
   - carrot-market
   - study
 createdAt: 2025-06-30 08:48:51
-modifiedAt: 2025-07-01 16:01:14
+modifiedAt: 2025-07-02 12:24:58
 publish: 프로젝트/당근마켓 클론코딩
 related:
   - "[[당근마켓 클론코딩]]"
@@ -39,7 +39,6 @@ my-next-app/
 ```
 
 - `app/`: 애플리케이션의 모든 라우트, 컴포넌트, 로직이 위치하는 핵심 디렉토리.
-
   - `layout.tsx`: 모든 페이지에 공통으로 적용되는 최상위 레이아웃. `<html>`, `<body>` 태그를 포함.
   - `page.tsx`: 특정 경로의 UI를 정의하는 기본 페이지 파일. app/page.tsx는 루트 경로(/)에 해당.
   - `loading.tsx`: 해당 경로의 콘텐츠가 로드되는 동안 보여줄 로딩 UI.
@@ -174,25 +173,24 @@ export default function FormBtn({ text }: FormBtnProps) {
 }
 ```
 
-### useFormState hook
+### useActionState hook
 
 결과를 ui로 전달하는 역할
-서버액션의 결과 특히 오류 등을 가져올 수 있는 역할을 한다.
-
-useFormState 훅은 인자로 action함수와 초기값을 받으며 클라이언트 컴포넌트에서 사용 가능하다.
 
+서버액션의 결과 특히 오류 등을 가져올 수 있는 역할을 한다.
+useActionState 훅은 인자로 action함수와 초기값을 받으며 클라이언트 컴포넌트에서 사용 가능하다.
 ServerAction 의 경우 서버 컴포넌트에서 사용 가능하기 때문에 다른 파일로 따로 분리한 이후 불러와 사용해야 한다.
 
 ```tsx
 "use client";
 import FormBtn from "@/components/form-btn";
 import FormInput from "@/components/form-input";
 import SocialLogin from "@/components/social-login";
-import { useFormState } from "react-dom";
+import { useActionState } from "react";
 import { handleForm } from "./actions";
 
 export default function Login() {
-  const [state, action] = useFormState(handleForm, null);
+  const [state, action] = useActionState(handleForm, null);
 
   return (
     <div className="flex flex-col gap-10 py-8 px-6">