독일개발자초록이

React Hook Form이란? 사용법부터 Zod 연동까지 총정리

React Hook Form이란? 사용법부터 Zod 연동까지 총정리안녕하세요! 오늘은 React로 폼을 다뤄보신 분이라면 한 번쯤 들어보셨을 React Hook Form에 대해 소개해드리려고 합니다. 폼 상태 관리 라이브러리를 찾고 계셨다면 이 글로 개념부터 실전 예시까지 한 번에 정리해 보실 수 있습니다. 목차React Hook Form이란 무엇인가?기본 사용법 (register, handleSubmit)formState로 폼 상태 다루기Controller로 커스텀 UI 컴포넌트 연동하기Zod와 함께 사용하기 (zodResolver)Formik과의 차이점Next.js Server Actions와 함께 쓸 수 있을까?자주 묻는 질문 (FAQ)폼을 직접 useState로 관리해보신 적 있으신가요?인풋이 몇..

Next.js Server Actions란? 사용법부터 예제까지 총정리

Next.js Server Actions란? 사용법부터 예제까지 총정리안녕하세요!오늘은 Next.js Server Actions에 관해 알아보려고 합니다. Next.js로 폼을 처리해 보신 분이라면 한 번쯤은 들어보셨을 개념인데요, 오늘 이 글 하나로 개념부터 실전 예제까지 정리해 보겠습니다.이 글에서 다루는 내용Server Actions란 무엇인가?폼 제출 예제로 배우는 사용법Server Actions가 유용한 이유캐시 갱신하기 (revalidatePath)로딩 상태 처리하기 (useFormStatus)에러 처리하기 (useActionState)서버 컴포넌트에서 호출하기자주 묻는 질문(FAQ)기존에 클라이언트에서 서버로 데이터를 보내려면, 대부분 API Route를 따로 만들고 fetch로 그 주소를 ..

Next.JS Streaming이란?안녕하세요!오랜만에 인사드립니다.그 사이 Next.JS에 수많은 업데이트가 있었고 오늘은 오랜만에 글을 작성해보려고 합니다. 서버 컴포넌트를 사용한다는 것은 여러 가지 장점이 존재합니다.그중 한 가지는 클라이언트가 다운로드해야 하는 Javascript가 줄어든다는 것입니다.하지만 서버 컴포넌트를 적절히 활용할 줄 알아야지 그 장점이 부각된다는 것입니다.모든 정보들을 서버에서 한 번에 보여주려 하다 보면, 오히려 서버가 처리해야 하는 일이 너무 많아지게 되는 경우가 생기고 모든 작업이 끝날 때까지 클라이언트는 로딩화면만 보게 되는 경우도 있게 됩니다.당연히 요즘 인터넷이야 워낙에 빠르다 보니, 유저가 답답하다고 느끼기도 전에 해결되는 경우다 다반사 일 것이지만,그렇지 않..

유튜브를 시작해보려 합니다!안녕하세요!다들 잘 지내시나요??오랜만에 게시글을 올리네요! 이런저런 바쁜 일들도 많았지만, 스스로 블로그에 더 신경을 써야 하는데 이런 부분이 너무 미흡했던 것 같네요!이제부터라도 다시 초심을 찾고 천천히 게시글을 다시 적어가도록 해보려 합니다! 다름이 아니라 이번에 유튜브를 시작해 보면 어떨까 하고 시작을 하게 되었습니다.제 얼굴이나 목소리를 보이는 것은 아니지만, 그리고 뭐 특별한 콘텐츠도 아니지만,스스로 공부하고 코딩하면서 들어볼 만한 노래들을 자주 업로드해보려 합니다! 이제 1주일 정도 되어서 특별한 것 전혀 없지만, 블로그와 유튜브를 병행해보려고 합니다! 오늘도 하루 너무너무 고생 많으셨습니다!짧은 주말이지만 평일보다 알차고 의미 있게 보내시길 바라겠습니다! 유튜브 ..

NeoVim으로 개발하기, LazyVim이란? 안녕하세요! 오늘은 NeoVim에 관해서 짧게 알아보려고 합니다. 저는 개발을 할 때 경우에 따라 2가지의 에디터를 사용합니다. 하나는 VSCode이고 다른 하나는 NVim입니다. VSCode를 사용할 때도 Vim 플러그인을 설치하여 사용하고 있습니다. Nvim을 이용하여 개발하는 이유는 여러 가지이겠지만, 저의 경우 대략 3가지 이유라고 할 수 있습니다. 1. Vim을 이용하면 코딩하는 재미가 있습니다. 2. Vim을 이용하면 Terminal에서 바로 개발할 수 있기 때문에 동선이 짧고 여러 윈도를 동시에 작업하기 좋습니다. 3. Vim을 이용하여 개발하면 투명한 백그라운드를 만들 수 있습니다. 즉 커스터마이징이 아주 용이하다. 첫 번째와 두 번째의 이유들..

Firebase를 Next.js에 연결하는 방법. 안녕하세요! 오늘은 간단하게 Firebase를 어떻게 Next.js 13에서 이용할 수 있는지 알아보려고 합니다. Firebase란? Firebase 사용방법? 연결 방법? 마치며. 1. Firebase란? Firebase란 Google에서 제공하는 서비스입니다. Firebase에는 여러가지 부가적인 빌드를 (기능) 제공합니다. 예를 들면 Firestore database, Authentification, Hosting과 같은 빌드가 존재합니다. 기본적으로 이러한 빌드들은 다 무료인 것으로 알고 있습니다. 하지만 더 나은 성능을 기대한다면 요금제를 선택하여 사용할 수도 있습니다. Firebase를 이용하면 손쉽게 데이터를 저장하고 유저를 생성할 수 있습니..