✏️ 무엇을 배웠나
1. 여러 상태를 객체로 통합하기
지난 프로젝트 쟈스민 발표 이후 여러 개로 나뉘어 있는 상태를 하나로 묶어서 관리하면 좋겠다는 피드백을 받았다.
검색 필터링 옵션인 주차 여부, 카페 여부, 영업 여부를 각각 개별적인 상태로 관리했고, 각각 set함수와 상태 변수가 파생됐다.
위 3가지 상태를 하나의 상태로 리팩토링했다.
그 결과 아래 이미지에서 볼 수 있는 것처럼 코드가 상당히 줄었다. 위 상태와 관련이 있는 로직을 담은 다른 컴포넌트에서도 코드가 줄어든 것을 확인할 수 있었고, 다행히 리팩토링 이후에도 기능이 문제 없이 작동했다.
피드백을 받고 나서 유의미한 보수 작업을 한 게 이번이 처음이라 굉장히 기쁘다 🥳
안 그래도 관리해야 할 상태가 늘어날 때마다, 이런 좀 아닌 거 같은데 하면서 작업을 진행했는데 좋은 피드백을 받은 것 같다. 다음에도 써먹어야겠다.
2. next.js 입문
next.js 프로젝트를 세팅하고 기본적인 것들을 익히고 있다. 일단 가장 신박했던 점은 pages 폴더 안에 파일 만들어서 export default 해두면 알아서 라우팅이 된다는 점! 이거 진짜 좋은 거 같다.
next.js 내장 훅인 useRouter를 변수에 담아서 로그 찍어보니까 push, query 같은 메서드들도 있고 pathname이 있는 것도 확인할 수 있었다. 처음에 뭔가 배울 때 로그 찍어서 안에 들여다보는 게 뭔가 재밌는 부분.
오늘은 페이지 만들고 네비게이션 설정을 알았는데 이것만으로도 일단 웹 하나를 만들어볼 수 있을 거 같아서 보니까 styling을 뭘로 해야 좋을지 모르겠다. emotion도 사용할 수 있는데 뭔가 설정이 필요한 모양이다. 최적의 styling 방법이 뭔지 알아보면 좋을 듯 하다.
🥵 무엇이 어려웠나
1. typescript 좋은데 머리가 아픔
🔎 더 알고 싶은 것 / 보완이 필요한 것
1. next.js와 찰떡인 스타일링 기술 찾기
