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

오늘 일과 간단 요약

1. 오전 스크럼
2. 로그인/회원가입 custom hook 만들기 → 삭제
3. NotFount 페이지 UI 수정
4. 오후 스크럼
5. Header, Footer UI 수정
6. dev 브랜치 재배포

 

 

 

 

 

 

 

 

 

로그인/회원가입 custom hook 시도

 어제자로 추가할 기능은 전부 추가했고 오늘 저녁에 최종 배포를 하기로 했으니까, 이전에 최적화를 해보려고 custom hook을 만들어보려고 했다.

 

 이전에 배웠던 적도 있고 지난 주에도 튜터님이 알려주셨으니까 실전에 써먹어봐야지, 했는데 결론부터 말하자면 그냥 다시 이전 상태로 되돌렸다 ㅋㅋㅋㅋㅋㅋㅋㅋ 내가 라이브러리를 썼다는 걸 까먹고 써버렸다

 react-hook-form 이라는, 이미 form 작성에 편리한 라이브러리를 쓰고 있었는데 이걸 또 다시 custom hook으로 빼려고 하니까 자꾸 에러가 나고 원하는 대로 나오지 않았다. 처음에는 useInput 이라는 파일을 만들어서 사용하려고 했었다.

 

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);

    return { value, onChange: handleChange };
  }
}

export default useInput;

 

 이런 식으로 아주 간단하게 useState와 onchange 이벤트를 포함한 useInput 이라는 custom hook을 만들었고 이걸 대입하려고 했었다. 그러고 나서야 내가 라이브러리를 사용했다는 걸 깨달았다.

 

 우선은, 라이브러리를 사용함으로써 이미 코드를 효율적으로 정리했는데 그걸 다시 빼려고 하니까 영 제대로 되지 않았다. 그리고 생각해보면 전혀 필요없는 삽질을 하고 있었다 ㅋㅋㅋㅋㅋ 그래서 로그인/회원가입 로직에서 공통된 것들을 빼내서 custom hook으로 만드려고 보니까 어차피 공통된 부분도 없었다.

 

 한가지 깨달은 점은, 삽질도 해봐야 잘못된 거라는 걸 깨달을 수 있다는 점이다. 뭐라도 개선해보려고 시도해보고, 안되면 왜 안되는지 체크해보고 이전의 코드들을 다시 살펴보고...하여튼 아까운 시간을 보냈다는 점이 좀 아쉽지만, 지금 만들어진 코드로도 충분하겠다는(?) 생각이 들었다. 사실 이건 나만의 생각일 가능성이 더 크지만...ㅋㅋㅋ

 

 아무튼. 오전부터 오후까지 에러에 허덕이게 했던 custom hook은 안녕....사실 더 좋은 라이브러리를 쓰고 있었는데 왜 갑자기 custom hook을 만들어보고 싶었는지 나를 잘 모르겠다. 그냥 배웠으니까 적용해보고 싶어서 그랬나...여튼 그래도 좋은 시도라고 생각하고 잊어버려야겠다.

 

 

 

 

 

 

 

Not Found 페이지 UI 수정

 그 이후에 뭘 해야 하나 코드를 살펴보다가, NotFound 페이지의 UI를 하지 않았다는 게 생각났다. 그래서 여러 가지 템플릿을 보다가 그냥 이미지와 버튼만 추가했다. 어차피 잘못된 url을 통해 들어가서 나온 오류니까 뭐 거창한 디자인은 필요할 것 같지는 않아서 여러 디자인 중에 가장 간단한 걸로 골랐다. 생각보다 템플릿이 많다는 걸 처음 알았다. 우리는 뭐 아예 에러 포인트를 여러 가지를 설정한 게 아니기 때문에...그냥 간단하게만!

 

 

 404 error 이미지도 정말 다양했는데, 우리 웹페이지가 블랙&화이트로 깔끔하게 가다보니까 저걸로! 근데 생각보다 괜찮아 보이는 걸...? 보통 이 페이지를 갈 일이 없겠지만, 그래도 혹시나 싶어서 추가했다. 정말 최종 프로젝트라서 이런저런 경우의 수를 생각해보게 된다. 나중에 회사를 가면 더 작은 것도 세세하게 생각하겠지만... 프로젝트 하면서 이렇게 하나하나 생각해보는 걸 최종에서만 했다는 게 다시 생각해보니까 아쉽다. 이전에도 이럴 수 있었다면 좋지 않았을까. 좀 더 완성도 높은 프로젝트가 되었을 텐데.

 

 아무튼. 그래서 404 페이지 UI도 완료. 사실 뭐 딱히 디자인은 준게 아니라서...UI라고 하긴 애매하긴 하지만...ㅋㅋㅋㅋ

 

 

 

 

 

 

 

Header, Footer 수정

 시윤님이 모바일 버전에서 생기는 헤더의 navbar가 다른 페이지로 이동할 때 닫히지 않는다고 해주셔서 그 부분 코드를 좀 수정했다. 그걸 왜 생각 못했지? 보통 웹으로 화면을 보고 반응형은 반응형으로 바뀔 때만 생각해서 그런가 시윤님이 얘기해주시기 전까지 전혀 몰랐다...ㅋㅋㅋㅋㅋ 그래서 재빠르게 수정 완료.

 

 그냥 setNavbar(false) 로 바꾸기만 하면 되는 거라서 그다지 오래 걸리지도 않았다. 모바일 버전에서 제대로 되는지만 체크해보고 잘 닫히는 것까지 보고 commit 했다.

 

 그리고 footer 수정하기. 사실 footer는 프로젝트 초기에 대충 만들어두고 손보지 않았는데 이번 기회에 아예 전체적인 UI도 바꿨다. 디자이너님이 해주신 게 있는데, 그건 약간 회사의 footer 느낌이고 footer에 귿가지 많은 게 필요 없을 것 같아서, 유저 피드백을 받을 구글폼 링크와 우리 웹페이지의 깃허브 링크를 달아두기로 했다.

 

 

 이런식으로 변경 완료. header랑 비슷한 디자인이었는데 아예 가운데로 지정하니까 훨씬 더 깔끔해졌다. (내눈에만 그럴수도?) 그리고 저기 깃허브는 바로 우리 깃허브로 가고, custom service center는 희현님이 만들어주신 구글폼 링크로 바로가기 된다.

 

 나는 생각 못한 부분인데 역시 다들 너무 꼼꼼하게 체크해주셔...최고다...고객센터 느낌으로 구글폼으로 유저 피드백을 받는데 실제로 우리가 그 피드백을 반영하지는 못하겠지만 구색상...ㅋㅋㅋ 있으면 좋지 않은가. 실시간 채팅은 하지 못하더라도 구글폼으로 고객 센터의 역할을 대체해준다. 희현님 최고....

 

 custom hook 한답시고 삽질한 시간이 좀 길었지만 그 이후에 수정할 부분은 자잘한 부분밖에 없어서 빨리 할 수 있었다. 오늘 저녁 내로 1차 발표 준비 전에 재배포를 할 예정이라서 최대한 빨리 하려고 노력했다.

 

 

 

 

 

 

 

 

 

짧은 일기

 프로젝트가 막바지에 다다를수록 더 피곤해지고 있다. 물론 당연한 일이겠지만...마지막이 보인다고 생각하니까 더 힘들다고 해야 하나...역시 체력이 문제다. 내일배움캠프 하면서 전혀 나가지도 않고(?) 그래서 그런지 회복할 시간이 좀 필요할 듯 하다. 물론 학교를 가야 하지만...(개강 싫어...)

 아무튼. 내일은 발표 자료와 협력사 브로셔를 만들어야 하기 때문에 오늘보다는 좀 여유롭지 않을까 싶다. 아닐 수도 있지만. 아무래도 코드 짜는 것보다는 더 낫겠지...그래도 이번에는 노션으로 트러블 슈팅이나 회의한 기록들을 쌓아두어서 다행이다. 덕분에 순조롭게 진행할 수 있을 듯 하다.

 

 오늘 협력사 특강이 있었는데, 확실히 취업 준비가 너무 내 눈 앞에 와있다 보니까 아무래도 좀 부담스러워지긴 한다. 그래도 뭐 어쩔수 없지. 어차피 이거 아니더라도 4학년이라 취업 준비는 해야 했는데...ㅋㅋ 해야 하니까 그냥 계속 해야지, 어쩌겠어. 그냥 아무생각 없이 진행하다보면 발표날이 다가올 것 같은 기분이다 ㅋㅋㅋ