오픈소스 공식 Repo에 Discussion을 올려보았다!

2022.08.21

 

 

오픈소스 관련해서 공식적으로 액션을 취한것도 처음이고, GitHub에 Discussion을 올려본 것도 처음이다. 

답변이 안달리까봐 전전긍긍했는데 답변이 달린 걸 오늘 확인해서 기쁜마음에 글을 적어본다. 😀

 

 

 

---

 

원티드 프리온보딩 챌린지에 참여해서 React Query로 상태 관리하는 Todo 앱을 만들고 있었다.

따로 정해진 UI가 없어서 내 마음대로 만들면 됐는데, 로그인과 투두 모두 Form 태그를 사용하면 적합할 것 같았다.

처음에는 내가 직접 이벤트 핸들러를 달아서 만들었는데, 다른 분들 repo를 살펴보니 대부분이 react-hook-form 이라는 오픈소스를 사용했다.

공식 사이트와 문서를 읽어보니 내가 만든 것 보다 좀 더 나이스한 코드를 구사할 수 있을 것 같아서, 나도 사용하기로 했다.

react-hook-form 에서 이벤트 핸들러의 역할을 하는 watch 기능이 있는데, 해당 기능에 대해 파악하려고 하단에 샘플로 올라와있는 CodeSandbox를 이리저리 만져봤다.

이름과 나이를 작성하는 Form이 있고 제출시 유효성 검사를 해서 옳지 않을 경우 Error가 나오는 간단한 예제였다.

음, 그런데 watch의 기능은 이상이 없지만 내가 나중에 쓰려고 했던 error 옵션이 조금 잘못 된 것 같았다.

<label>Age</label>
<input type="number" {...register("age", { min: 50 })} />
{errors.name && <p>{"The number must be greater then 49"}</p>}

"숫자가 49보다 커야 합니다." 라는 에러를 뿜는 부분이다.

보면 age에 관련된 태그로 되어있는데 정작 errors의 name 속성을 바라보고있다.

그래서 name의 유효성 검사가 실패하면 name과 관련된 에러와 "숫자가 49보다 커야합니다."하는 에러가 함께 나왔다.

다시보니까 TypeScript 예제도 마찬가지였다.

내 생각에는 errors.name 부분에서 name이 아니라 age로 바뀌어야 할 것 같아서 냉큼 GitHub를 찾아갔다.

 

라이브러리 자체의 문제가 아니라 CodeSandbox상 예제코드의 문제라서 어디에 남기면 좋을지 고민하다가 Idea 카테고리로 discussion을 작성했다. (사실 이 카테고리가 올바른지 잘 모르겠다.)

나 공부중인데 여기가 이렇게 바뀌어야할 것 같은데 어떻게 생각하냐고 링크도 걸고, 마크업 써서 보기 편하게 수정하고 예시로 캡쳐도 붙였다!

혹시 몰라서 번역기를 써서 영어가 미흡하다는, 짧은 추신도 붙였다. 하핫

 

따봉과 로켓!

Moshyfawn의 답변

확인을 21일이나 지나버린 오늘 했지만!

react-hook-form의 member 중 한명인 Moshyfawn이 본문에 👍 🚀과 함께 답변을 달아주었다!

추신을 제외하면 단 3줄이지만 이번이 처음이라서그런지 감동받아서 ❤️를 눌렀다.

 

그리고 다시 예제를 찾아가보니 수정도 잘 되어있다. 

개발자로서 할 수 있는 경험 중 한가지를 클리어한 것 같아서 뿌듯하다~