2021/10/13 : 간단한 마크업 개선

프로젝트에서 마크업을 살짝 개선했습니다.

 

개선하려고 목표를 잡은 사항은 다음과 같습니다.

1. html의 언어를 ko로 바꾸기

2. 크롬 OpenWAX 확장 프로그램을 돌렸을때 경고하는 부분 수정

3. 크롬 HeadingsMap 확장 프로그램을 돌렸을때 섹션별 헤딩태그가 검사

4. 페이지별로 document.title을 조작하여 페이지 제목 수정

 

1번은 아주 간단하게 바꾸었습니다.

이것을 해준 이유는, 스크린 리더가 페이지를 읽을때 언어를 설정하는데 영향을 주기 때문입니다.

 

2번은 정량적으로 마크업/접근성을 개선할 수 있는 요소를 파악해주는 확장프로그램이라서 개선할 포인트를 잡으려고 사용했습니다.

1곳 빼고 모두 개선해주었습니다. (대부분 이미지의 alt 속성이 누락되었다는 경고였습니다.)

그 1곳은 댓글 통계에서 댓글을 table로 제공하고 있었는데, 그에 관련한 마크업입니다.

해당 정보를 마크업하게 되면, 기존의 단순한 UI를 해칠것 같아서 별도로 건드리지 않았습니다.

(크롬의 라이트하우스나 Wave같은 툴도 있는데 돌려도, 배경색 대비 관련 요소만 나왔습니다.)

 

3번도 HeadingsMap이라는 크롬 확장프로그램을 활용하여 테스트했습니다.

HeadingsMap을 다운로드받고 apple.com 에서 측정해보면, 아주 깔끔하게 Heading들이 나오는데, 그거에 감명을 받아서 다라쓰에도 필요한 부분에 h2태그를 넣어주었습니다.

 

4. 페이지별로 탭제목을 바꾸기위한 로직을 추가했습니다.

3가지 방식으로 이것을 구현할 수 있었습니다.

 

1) 각각의 페이지 컴포넌트에서 document.title = "현재 페이지 이름"; 을 넣기

2) react-helmet 을 사용해서 render 부분에 <Helmet><title>현재 페이지 이름</title></Helmet>을 넣기

3) history.listen을 사용해서 페이지가 바뀜을 감지하여, path에 따라서 document.title을 수정하기

 

처음에는 3)을 시도했습니다.

실제 react-router에서 사용하고 있는 주간다운로드 3천만회에 육박하는 https://www.npmjs.com/package/path-to-regexp

라이브러리를 사용해서 구현하려 했습니다.

하지만, 과연 해당 페이지의 제목을 수정해야할때 누가 그 정보를 알고 있어야하는가에 대해서 다시 고민하게 되었습니다.

각 컴포넌트에 비슷한 로직이 추가되면 분명히 중복된 로직이지만, 3)로직은 생각보다 복잡해서 가독성이 많이 떨어졌습니다.

그리고 탭 제목을 변경시키지 않아도 되는 페이지도 있었는데, 그것에 대한 분기도 해주어야했습니다.

 

따라서, 중복로직이지만 훨씬 가독성이 좋은 "모든 페이지 컴포넌트에 title 로직 넣기"를 채택했습니다.

 

어떤 크루가 react-helmet를 사용하는 것을 추천해줬습니다.(파노 고마워!)

react-helmet는 어떤 컴포넌트의 메타태그를 작성하는것에 도움을 주는 라이브러리입니다.

그래서 title도 수정가능합니다. (JSX문법으로도 사용가능합니다!)

그리고 웹 접근성 부분도 해결할 수 있는 솔루션도 가지고 있습니다.

 

하지만, 해당 meta태그는 동적으로 변하는 요소이기 때문에 웹 접근성을 제대로 해결하기 위해서는 react-snap 라이브러리를 또 사용해야했습니다.

react-snap을 사용하지 않고 react-helmet만 사용하면, 페이지별 제목을 바꾸기위한 용도로써 라이브러리를 설치해야하는 느낌을 받았습니다.

 

이 간단한 로직을 위해서, 라이브러리를 설치해야하는가? 에 대한 질문을 던졌고,

제 대답은 NO였습니다.

 

그래서 결국에는 가장 원시적인 방법인 1)번으로 회귀했고, 아주 간단한 로직으로 목표했던 기능을 달성할 수 있었습니다.

(물론 좋은 코드라고는 생각하지 않습니다.)

 

https://github.com/woowacourse-teams/2021-darass/pull/722