update post

Author: lazy-dinosaur

content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Validator 사용해보기.md

@@ -5,7 +5,7 @@ tags:
   - validator
   - zod
 createdAt: 2025-07-03 13:12:42
-modifiedAt: 2025-07-03 13:21:06
+modifiedAt: 2025-07-03 13:39:55
 publish: 프로젝트/당근마켓 클론코딩
 related:
   - 당근마켓 클론코딩
@@ -15,6 +15,8 @@ series: ""
 
 # 당근마켓 클론코딩으로 Validator 사용해보기
 
+![validator-landing](_assets/attachments/당근마켓%20클론코딩/validator-landing.png)
+
 ## Validator과 함께 사용해보기
 
 Validator라이브러리는 간편하게 유효성 검사를 할 수 있는 프리셋 개념의 함수들을 많이 가지고 있다.

content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Zod 배우기.md

@@ -5,7 +5,7 @@ tags:
   - study
   - zod
 createdAt: 2025-06-30 21:21:49
-modifiedAt: 2025-07-03 13:15:37
+modifiedAt: 2025-07-03 13:39:02
 publish: 프로젝트/당근마켓 클론코딩
 related:
   - "[[당근마켓 클론코딩]]"
@@ -348,7 +348,7 @@ const formSchema = z
   });
 ```
 
-### regex 검증
+#### regex 검증
 
 regex를 활용해 검증할수도 있다.
 
@@ -371,7 +371,7 @@ const formSchema = z.object({
 });
 ```
 
-### 데이터 변환
+#### 데이터 변환
 
 입력받은 데이터를 검증하는 기능 외에도 변환하는 기능도 존재한다.
 
@@ -387,7 +387,7 @@ const formSchema = z.object({
 - `toLowerCase`메소드: 입력받은 데이터를 소문자로 변환
 - `trim`메소드: 입력받은 데이터의 시작과 끝의 빈 문자열을 삭제해줌
 
-#### transform 메소드
+##### transform 메소드
 
 refine과 마찬가지로 함수를 변수로받아 유효성 검사 뒤에 데이터를 변환한다.
 
@@ -406,6 +406,25 @@ const formSchema = z.object({
 });
 ```
 
+#### coerce 메소드
+
+토큰이나 번호를 넘겨받다 보면 데이터가 숫자인 경오도 혹은 숫자가 문자열 형태로 받아지기도 한다. 특히 ServerAction을 사용하여 숫자들을 넘겨받게 된다면 html에서 타입을 숫자로 지정하더라도 문자열 형태로 받게 된다. 이때 zod 의 coerce가 유용하게 사용된다.
+
+![zod-coerce](_assets/attachments/당근마켓%20클론코딩/zod-coerce.png)
+
+`z.coerce`의 타입을 확인하면 뒤에 몇가지 타입을 지정할수 있는것을 확인할 수 있다.
+이 타입들의 역할은 입력받은 데이터를 먼저 해당 타입으로 변환을 시도하는 것을 한다.
+
+```typescript
+z.coerce.number().parse("1234");
+```
+
+##### 토큰 유효성 검사 예시
+
+```typescript
+
+```
+
 ## 참고
 
 - [[당근마켓 클론코딩으로 Validator 사용해보기]]

public/meta-data.json

@@ -18,7 +18,7 @@
                             "tags": ["project", "carrot-market", "validator", "zod"],
                             "series": "",
                             "createdAt": "2025-07-03 13:12:42",
-                            "modifiedAt": "2025-07-03 13:21:06",
+                            "modifiedAt": "2025-07-03 13:39:55",
                             "publish": "프로젝트/당근마켓 클론코딩"
                         },
   {
@@ -590,7 +590,7 @@
                             "tags": ["project", "carrot-market", "study", "zod"],
                             "series": "",
                             "createdAt": "2025-06-30 21:21:49",
-                            "modifiedAt": "2025-07-03 13:15:37",
+                            "modifiedAt": "2025-07-03 13:39:02",
                             "publish": "프로젝트/당근마켓 클론코딩"
                         },
   {

public/post-contents/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Validator 사용해보기.json

@@ -1,4 +1,4 @@
 {
-  "content": "\n# 당근마켓 클론코딩으로 Validator 사용해보기\n\n## Validator과 함께 사용해보기\n\nValidator라이브러리는 간편하게 유효성 검사를 할 수 있는 프리셋 개념의 함수들을 많이 가지고 있다.\n\n### 설치\n\n`Validator`는 javascript모듈이기 때문에 설치시 추가로 타입 설치를 해주어야 `typescript`에서 불편함 없이 사용할 수 있다\n\n```bash\nbun add Validator\nbun i -D @types/Validator\n```\n\n### 기본 사용법\n\n사용 방식도 매우 간단하다. Validator 모듈 안의 `isMobilePhone`, `isJWT` 등등 값을 넣으면 boolean 값으로 바로 알려준다.\n\n```typescript\nimport { isMobilePhone } from \"Validator\";\n\nconst phone = \"010-1234-1234\";\n\nisMobilePhone(phone);\n```\n\n### Zod와 함께 사용하기\n\n[[당근마켓 클론코딩으로 Zod 배우기#refine 메소드]]를 활용하면 매우 간편하게 추가적인 유효성 검증을 실행할 수 있다.\n\n```typescript\nimport { z } from \"zod\";\nimport validator from \"validator\";\n\nconst phoneSchema = z.string().trim().refine(validator.isMobilePhone);\n```\n",
+  "content": "\n# 당근마켓 클론코딩으로 Validator 사용해보기\n\n![validator-landing](_assets/attachments/당근마켓%20클론코딩/validator-landing.png)\n\n## Validator과 함께 사용해보기\n\nValidator라이브러리는 간편하게 유효성 검사를 할 수 있는 프리셋 개념의 함수들을 많이 가지고 있다.\n\n### 설치\n\n`Validator`는 javascript모듈이기 때문에 설치시 추가로 타입 설치를 해주어야 `typescript`에서 불편함 없이 사용할 수 있다\n\n```bash\nbun add Validator\nbun i -D @types/Validator\n```\n\n### 기본 사용법\n\n사용 방식도 매우 간단하다. Validator 모듈 안의 `isMobilePhone`, `isJWT` 등등 값을 넣으면 boolean 값으로 바로 알려준다.\n\n```typescript\nimport { isMobilePhone } from \"Validator\";\n\nconst phone = \"010-1234-1234\";\n\nisMobilePhone(phone);\n```\n\n### Zod와 함께 사용하기\n\n[[당근마켓 클론코딩으로 Zod 배우기#refine 메소드]]를 활용하면 매우 간편하게 추가적인 유효성 검증을 실행할 수 있다.\n\n```typescript\nimport { z } from \"zod\";\nimport validator from \"validator\";\n\nconst phoneSchema = z.string().trim().refine(validator.isMobilePhone);\n```\n",
   "plainContent": "Validator라이브러리는 간편하게 유효성 검사를 할 수 있는 프리셋 개념의 함수들을 많이 가지고 있다.\nValidator는 javascript모듈이기 때문에 설치시 추가로 타입 설치를 해주어야 typescript에서 불편함 없이 사용할 수 있다\n사용 방식도 매우 간단하다. Validator 모듈 안의 isMobilePhone, isJWT 등등 값을 넣으면 boolean 값으로 바로 알려준다.\n당근마켓 클론코딩으로 Zod 배우기#refine 메소드를 활용하면 매우 간편하게 추가적인 유효성 검증을 실행할 수 있다."
 }