프론트엔드 개발자 신상오
article thumbnail

💻 들어가며

오늘까지 완성을 하려고 했으나 여전히 오류는 계속나고 수정할 부분이 많이 보인다

우선 내일 오후부터는 발표자료 제작에 들어가야하기 때문에 오전에 빠르게
useEffect가 제대로 적용 안 되는 부분하고 폰트, css 수정을 완료하기로 계획을 세웠다.


📚 구현기능

필터 기능 추가 (모집 분류, 모집 기한)

이제 특정 조건에 맞는 데이터의 상태를 변화시키는 것은 고민만 조금 하면 원하는
데이터로 useState 훅을 통해서 바꿀 수 있게 되었다.

하지만 여러 필터, 조건이 겹치니까 알 수 없는 오류가 하나 발생하고 있는데

아마 useEffect문제이거나 if, else if를 통해 조건을 거는 과정에서 잘못된 부분이 있는 듯 하다

useEffect는 진짜 문법만 외우고 동작 원리는 잘 모르는 상태라 그런가
오류가 나면 확인할 방법이 없는게 아쉽다.

지금은 시간이 촉박하기 때문에 추가적인 학습을해서 기능을 구현할 시간은
아니라고 생각해서 그냥 문법, 아는 지식만을 이용해서

기능 구현을 하기로했다.


회원가입 정합성 검사 - false 나올 경우 제출 비활성화

회원가입 폼을 작성할 때 필수 조건을 충족하지 못 하면
아예 API요청을 할 수 없도록 버튼을 비활성화했다.

이제는 상태에 따라 if나 삼항연산자로 조건을 걸어 원하는
형태의 컴포넌트가 렌더링되도록하는 것은 숙달된 것 같다

처음에는 잘 이해 안 가고 구글링해서 따라치는 식이었는데
확실히 실전처럼 프로젝트를 통해 학습을 하니
성장 속도에 가속이 붙는 느낌이다. 회원가입은 처음 설계할 때부터
우선 동작하도록 만들어 놓고
그 다음에는 정합성, css를 어떻게 붙일지 잘 생각을 하고 시작해서

막힘없이 깔끔하게 기능 구현할 수 있었다.
회원가입, 로그인을 구현하면서 초기에 구상을 확실하게 하는 것이
중요하다는 것을 깨달을 수 있었다.


🤔 느낀점

정말 동작만 하도록 작성해놓은 코드는 나중에 리팩토링을 하거나
버그 수정시에 업보로 다시 돌아오는 걸 느꼈다
회원가입 로그인 폼은 커스텀 훅도 제작하고, 함수에 주석까지 달아가며
나중에도 다시 볼 때 이해하기 쉬운 코드로 짰다면 좋았을 것 같다
데이터를 필터링하는 함수의 경우에는 구현에 급급해서
그냥 날려가며 짜놨더니 아니나다를까 기능을 추가하려니까
구조를 파악하고 수정하는게 너무 어려웠다.
재사용되는 함수가 많고 난잡하게 코드가 작성되어있어서
수정할 부분이 많이 보여서 다시 똑같은 기능을 구현한다면
지금처럼은 절대 안 짤 것 같다는 생각도 들었고
리팩토링하는 맛이 있을 것 같다고 생각됐다.
이 부분은 꼭 프로젝트가 끝나자마자 리팩토링을 통해서
깔끔한 코드로 짜봐야겠다 싶다.