스파르타코딩클럽 내일배움캠프 78일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 로그인/회원가입 리팩토링 (react-hook-form 이용)
3. localstorage 부분 삭제
4. 좋아요 수 트러블 슈팅 

 

 

 

 

 

 

 

로그인/회원가입 리팩토링

어제 회원가입 기능을 실제로 해보다가 유효성 검사를 적어두었음에도 비밀번호 작성 도중에 허점이 있다는 발견하게 되었다. 비밀번호랑 비밀번호 재확인이 일치하지 않는데도 바로 회원가입이 되는 것이다...!

그래서 오늘은 아예 그걸 수정하는 걸 목표로 했고, 결과적으로는 아예 통째로 리팩토링 했다.

 

로그인, 회원가입 폼을 구현하다보면 유효성 검사의 경우의 수가 엄청나게 많아질 때가 있다.

input창이 비었을 때, 유효성 검사를 통과하지 않았을 때, 등등... 그걸 전부 구현해야 하나? 싶어서 구글링하면서 찾아봤다.

 

그러다가 새로 발견하게 된 react-hook-form 라이브러리.

이걸 이용하면 유효성 검사를 쉽게 할 수 있고 코드도 간결해져서 좋았다.

 

그래서 처음에는 유효성 검사 경우의 수를 엄청 많이 적어뒀는데 다행히 그걸 전부 쓰지 않아서 다행이다. 겸사겸사 버그도 해결하고 리팩토링을 통해 코드도 짧아졌다.

 

블로그 글도 따로 작성했다.

https://daydream-sy.tistory.com/196

[TypeScript] react-hook-form 사용하기

 

이전에 로그인, 회원가입 작업할 때도 알았으면 좋았을 텐데. 이게 바로 프로젝트 하면서 찾는 야매(?) 공부인것인가...

역시 늘 그렇지만 프로젝트하면서 공부를 더 많이 하는 것 같다.

 

 

 

 

 

 

git 커밋 메시지 수정하기

오늘 이슈 번호를 잘못 붙이는 실수를 저지르고 commit message를 수정할 수 있나 살펴보다가, 구글링을 통해 알게 되었고 이참에 깃 명령어를 좀 더 자세히 알게 되었다. 보통은 그냥 commit, push, pull 밖에 안 쓰다가 다른 명령어들을 써볼 기회가 별로 없었는데 실수한 김에 알게 되었다 ㅋㅋㅋㅋ

 

사실은 push까지 한 커밋 메시지를 수정하고 덮어 쓰는게 좋지 않다고 하는데, 그래도 어쩔수 없지.

이슈 번호 잘못 붙이고 싶지 않았을 뿐...그래서 글도 2개나 작성했다.

 

https://daydream-sy.tistory.com/194

[Git] 이미 push한 commit 메세지 수정하기

 

이건 rebase 명령어 쓰다가 생긴 오류를 해결한 기록. rebase를 써보는 게 처음인데, 제대로 한번 다시 공부해봐야겠다.

https://daydream-sy.tistory.com/195

[Git 오류] fatal: It seems that there is already a rebase-merge directory

 

 

 

 

 

 

 

좋아요 수 오류 트러블 슈팅

내가 만든 기능은 아니고 희현님이 만드신 좋아요 기능인데, 좋아요 수가 바로 반영 안되는 오류가 생겨서 다같이 보다가 튜터님이 오셔서 운 좋게 바로 해결할 수 있었다.

 

디자인 패턴에 대해서도 말씀해주시고, useEffect에 대해서 좀 더 정확하게 알 수 있는 시간이었다.

사실 계속 코드 짜다보니까 되면 되는대로 오 된다, 이러고 안되면 왜 안되지? 하면서 다시 고치고 등등...

계속 대충 짜고 고치고 등등을 반복하면서 react lifecycle에 대한 개념이나, useEffect, state의 정확한 개념에 대해 생각해보는 시간이 점점 사라졌는데 이번 기회에 다시 복기할 수 있었다.

 

오류의 원인과 해결 방법에 대해서는 완전히 이해했는데, 이걸 나중에 다시 생각해보고 다른 곳에 적용할 수 있는가는 의문이다. 그래도 프로젝트 끝나고든 무조건 공부해야지...사실 이번에도 내가 맡은 기능을 제외하고 다른 분들이 맡은 기능은 그냥 코드만 훑어보고 이해하고 넘어갔는데 그러지 말아야지. 꼭 주말에 짬 내서 공부하기...!!

 

 

처음 코드에서는 render가 되기 전이라 좋아요 수가 아직 변화가 되지 않았기 때문에 바로 적용이 되지 않는 것이었다.

state가 새롭게 렌더링될 때 바뀌므로 좋아요를 눌렀다고 좋아요 수가 변화가 되지 않고 firebase에 적용이 되지 않는 것이었다. 그래서 useEffect를 이용해서 좋아요 수를 업데이트 했더니 바로 해결되었다.

useEffect는 이전 값과 비교해서 바뀌었을 때 바뀐 값을 기준으로 실행되기 때문에 좋아요 수가 바뀌면 자동으로 그게 반영이 되고 firebase에서도 자동으로 바뀌는 것이다.

 

useEffect(() => {
	const updateLikes = async () => {
		if (like) {
			await updateDoc(courseRef, {
				like:likeCount,
				likesID: arrayUnion(currentId),
			});
		} else {
			await updateDoc(courseFref, {
				like: likeCount,
				likesID: arrayRemove(currentId),
			});
		}
	};	
}, [like, likeCount]);

 

이게 useEffect 함수 부분인데, useEffect 안에 바로 async await를 쓸 수는 없지만 함수를 만들어서 쓸 수 는 있다.

그래서 요 코드를 작성했더니 바로 좋아요 수 적용 완료..!

 

내가 맡은 로직은 아니지만 이번 기회에 보면서 알 수 있게 되었다.

lifecycle, 디자인 패턴 => 꼭 공부해야 할 것들이다.

 

 

 

 

 

 

짧은 일기

오늘은 그래도 기능 개발을 우선적으로 했다. 일단 가장 잘한 점은 버그 수정을 했다는 것. 그리고 리팩토링을 했다는 점.

리팩토링은 하려고 한 건 아닌데, 어쩌다 보니 새로운 라이브러리를 알게 되어서 그걸 쓰려고 하니 아예 코드를 뜯어고칠 수밖에 없었다. 오히려 더 효율적인(?) 코드가 되어서 다행이다.

 

그리고 이것저것 버그 고친 점. localstorage 에 이미지를 저장하려면 이미지 용량 제한이 있었어서 localstorage에 저장하지 않고 바로 firebase에 저장된 storage에서 바로 이미지 url을 가져오는 걸로 고쳤는데 선형님이 많이 도와주셨다.

 

멘토링 시간도 있었어서 튜터님한테 이것저것 조언도 많이 듣고 나중에 좋아요 저것도 튜터님 덕분에 잘 해결되었다. 역시 프로젝트를 위한 공부가 아니라 진짜 공부를 해야 할것 같기도...? 키워드 적어놓은게 너무 많은데 주말에 할 수 있을지 모르겠다. 일단은 프로젝트 기능 먼저 해야지...금요일이니까 내일은 좀 쉬고 다시 해봐야지...!