✏️ 무엇을 배웠나
1. 모바일 처리의 중요성
PC 웹에서 잘 돌아가는 걸 확인하고 배포했는데 모바일(IPhone) 웹으로 들어가보니 내가 만들어 둔 UI가 아니라 좀 바뀌었다.
- 검색 옵션 선택하는 버튼들은 텍스트 색상이 아이폰 고유 색상으로 바뀌었다.
- 검색 버튼에 해당하는 input button 텍스트가 보이지 않는다. 아예 사라진 줄 알았는데 터치하면 기능이 작동하는 걸 보니 텍스트 색상이 white가 되어버린 것 같다.
웹을 반응형으로 처리할 때 레이아웃을 세팅해줘야 하는 건 알고 있었는데, 이런 경우도 있구나 인식하게 되는 계기가 되었다.
관련해서 찾아보니 모바일 브라우저에 기본 CSS가 적용된 결과라고 하고 기본 CSS를 상쇄시켜줘야 한다는 것을 알게 되었다.
다음 프로젝트에는 이 부분을 꼭... 반드시... 적용시키자. 웹 접속을 모바일로 많이 하니까 이 부분을 간과할 수 없다.
2. 커스텀훅
오늘 커스텀훅을 알게 되었는데... 신세계다. 일단 내가 사용한 용도는 컴포넌트 내에서 검색 기능을 구현하는 로직 코드가 파편화 되어 있고 분량을 많이 차지했는데 이 부분을 모아서 커스텀훅으로 만들었다.
const {
handleSubmit,
handleResetResult,
setCurrentCategory,
setCafe,
setParking,
openFilter,
setOpenFilter,
currentCategory,
cafe,
parking,
} = useSearch(DBDefault, search, setDB, setSearch, openFilterEnum);70줄에 해당하는 검색 기능 로직을 커스텀훅 안에 숨길 수 있었고, 결과는 12줄의 코드로 줄일 수 있었다. 컴포넌트가 한층 쾌적해졌고 기능 보수할 때도 useSearch라고 만든 커스텀훅 안에 들어서 찾으면 되니까 훨씬 빠르게 찾을 수 있겠다. 진짜 신세계!
내가 이해한 커스텀훅은 예를 들어 커스텀훅 안에 A라는 함수를 하나 넣어놓고 return으로 함수를 뱉어주면, 다른 컴포넌트에서 구조분해할당의 구조로 가져와서 사용할 수 있다. 만약 A 함수 내에 있는 변수가 함수 외부에서 가져오는 변수라면 커스텀훅의 인자로 해당 변수를 넣어주면 된다. ( 프롭스랑도 비슷하네 ) 커스텀훅도 결국 함수의 구조랄까... 그런 걸 느꼈다.
const { A } = useCustomHook(필요한변수)
이렇게 되겠다.
🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 커스텀훅 깊이 공부하기
2. 모바일 웹을 위한 처리 방법 공부하기
🏷️ 오늘의 코멘트
오늘도 역시 코딩을 더 잘하고 싶다.
