SEO 최적화를 페이지별로 하면...
컴포넌트 내부에 해야하나..?
1. 너무 지저분할 것 같다.
2. 값이 바뀔 때마다 변경하는 것이 어렵고, 휴먼 에러가 발생할 가능성이 높다.
잘 짜둔 코드 10시간 노가다 안부럽다.
확장성과 유지보수를 위해 코드를 이쁘게 짜두지 않았던가.
빛을 발할 시간이다.
이전에 짜두었던 코드이다.
Router 컴포넌트에서 Routing을 진행할 때, 직접 하드코딩 하지 않고 하나의 객체로 분리하여 상수로 관리하고있다.
그 결과 아래와 같이 사용하고 있었다.
(사용중이던 Router.tsx)
적용하기!
어떻게 할 것이냐.
우선 ROUTE_MAP에 HEADER이라는 field를 추가하고 해당 컴포넌트에 각각 페이지의 Header을 추가한 뒤, Router 컴포넌트 내부에서 뿌려줄 예정이다.
반복된 코드 작성은 눈물이 나니, 중복되는 부분을 DefaultHeader를 만들어주자.
DefaultHeader
HomeHeader
(DefaultHeader의 Children으로 들어갈 반복되지 않는 코드)
적용!
🥳👍
굳!
코드를 관심사별로 분리하고, 의존성을 최대한 분리하면 유지보수와 확장성에 강한 코드가 되는 것 같다 :)
