오늘 배웠던 것들에 대해 정리만 해보자.
그리고 내일 실제로 적용해보자.
결국 나는 복잡하게 비즈니스 로직과 UI로직이 엉켜있는 컴포넌트를 분리해내고 싶은거다.
한 걸음에 너무 많은걸 이루려 하면 안된다.
우선 꽤나 비즈니스 로직 같은 것이 엉켜있는 하나의 컴포넌트를 적당히 떨어뜨려 본다고 생각한다.
이때 철저하게 js로직으로만 이뤄질 수 있을 수 도 있고
브라우저 api를 사용해야할 수 도 있고, 사용자 이벤트에 의존할 수도 있다.
아니 바텀업 방식으로 접근하는게 아니라 도메인부터 파악하는 탑다운을 해야하는게 아닐까?
아니 그건 좀 분리하는게 익숙해진 다음에, 그리고 기존 코드를 맘대로 다 바꿀 수는 없으니까
그래 하나의 컴포넌트를 분리한다고 생각하고 분리하자
그래도 도메인에 의거해 바꾸면 좋으니까 적당한 대상을 찾아 도메인을 추출..
그거 하나만 도메인을 추출하면 사용할 수 있나..?
아직 보지 못한 코드에 대해 머리를 써보려하지 말자.
그런 부분은 AI를 통해 해달라고 부탁해보자.
내가 생각하는 도메인을 기조로 한 분리, 리액트나 브라우저 api, 이벤트와는 무관한 순수 js로직으로 이뤄진 비즈니스 로직으로 추출하여 변경해달라고 해보자.
결과물을 보고 생각한되로 추출된건지 역으로 추론해보자.
그 이후에 비즈니스 로직을 어 가시성 높은 코드로 만드는 기술에 대해 책을 읽어보는게 의미가 있을 것 같다.
프론트 코드 레벨업 로드맵
- 엉켜있는 컴포넌트를 (스타일+구조+브라우저 이벤트+useEffect?) , (비즈니스 로직, validation, filtering, transition, etc..?)으로 분리한다.
- custom hook으로 다시 브라우저 이벤트와 useEffect같은것을 감싸고 깔끔히 호출할 수 있도록 한다.
- 이때 interface를 만들어서 사용하는 쪽에서 사용타입에 문제가 없도록 한다. interface는 비즈니스 로직부분과 custom훅 둘다 만들자. -> 오래걸리니까 ai 많이 이용해보자.
- 요구사항 명세서에서 도메인을 기준으로 분리해보는 시각을 가져보자.
4.1 현재 만들어진 프로젝트를 ai를 통해 도메인 기준으로 봤을떄 어떻게 나누어질 수 있는지 만들어보고 그 형태대로 바꾼다면 더 코드가 좋아질지 상상해본다. 혹은 유사코드로 종이에 적어본다. - 아마 일단 더 계획을 자세하게 세우긴 어렵겠는데 아마 FSD파일 구조가 필요해질것도 같다. 아니면 분리한js코드를 더 아름답게 만들 수 있는 방법에 대해 공부할 지도 모른다. 이건 앞부분을 잘 처리하고 생각해봐도 늦지 않을 것 같다.
그런데 내가 유독 도메인에 너무 집착하는것 같다.
어쨌거나 내 의도는 컴포넌트가 수정하기 쉽도록 UI와 그 외의 것들을 분리하는거고
그거의 기준은 도메인이 될 수도 있고, 콘.. 뭐시기 아저씨가 말한 회사내의 의사소통에 의한 힌트일 수도 있다. 이게 도메인을 말한거면 나는 그냥 멍청했던거고..
일단은 한길로라도 먼저 해보면 좋으니까, 도메인을 기준으로 하자.
