글쓰는쿼카의 PM 여정

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : React Hook Form 라이브러리 써보기학습일 : 2024. 8. 12.오류일지React Hook Form 을 왜 쓰게 되었느냐?useState만으로 Input Form 을 관리하는 게 너무 귀찮으니까!!엄밀히 말하면 useState로만 input의 유효성검사 결과에 따라 UI에 변화를 주는 데 한계를 느꼈기 때문이다. 구체적인 예시로 회원가입 페이지를 들 수 있다. 나의 의도는 2가지였다.하나, 인풋에 입력함과 동시에 유효성 검사의 오류메시지를 보여줄 것두울, 중복체크 버튼을 클릭하면 DB 필터링을 거쳐 사용가능한 이메일(또는 닉네임)인지 판별할 것 참 쉬운 건데도 고려할 사항들이 ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : supabase social login (OAuth)학습일 : 2024. 8. 9.오류 일지  카카오톡으로 로그인하기... 드디어 뚫었다.... 내가 해냈다고!!!!!!!!! 내가 만난 소셜로그인의 큰 산은 '카카오톡 개발자센터 설정'과 'users 테이블에 자동 생성하기' 부분이다. 하나, 카카오톡 개발자 센터 설정하기카카오톡 개발자 센터 설정은 supabase의 공식문서만 봐서는 해결할 수 없다. 반드시 블로그 조사가 필수다. 그러나 블로그 자료도 100% 신뢰할 수 없기 때문에 더욱 난감했다. (어떻게 해야 되는지는 다음에 다루도록 하겠다.) 여러 설정 끝에 카카오 서버에 접속할 수 ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : supabase social login (OAuth)학습일 : 2024. 8. 7. 최종 프로젝트 D-12, 6주간의 여정 중 절반이 지나갔다.2주 정도 남은 상태에서 조금씩 성과가 나오기를 바라고 있지만 여전히 엉망진창이라 속상하다. (작업 내용)현재 진행상황 표시: 👈🏽노랑회원가입 페이지로그인 페이지헤더 & 로그인 상태관리마이페이지회원정보 변경(닉네임, 비밀번호)소셜로그인: 카카오톡, 구글 (👈🏽현재 여기!)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 :  React-hook-form학습일 : 2024. 8. 6.처음으로 혼자서 외부 라이브러리를 접목해봤다.로그인, 회원가입, 마이페이지(닉네임 변경, 비밀번호 변경) 등 내가 맡은 페이지는 form 형식이 많다. 기본적으로 각 입력창의 유효성 검사를 거쳐서 이메일이나 닉네임은 중복확인을 해야 하고유효성 검사나 중복확인에서 오류가 발견되면 오류메시지로 보여주며,최종적으로 데이터베이스 테이블에 반영되기까지 일련의 과정을 지나야 한다. useState로 상태를 관리하였는데 한계를 느끼던 중중간발표 이후 최적화 시기에 맞춰 react-hook-form 라이브러리를 사용해보려 한다. 배운 내용 요약1..