1. 어떤 데이터를 DB에 저장해야 하는가.
다크모드 로직을 구현하고나서, 고민이 생겼었습니다.
https://github.com/woowacourse-teams/2021-darass/discussions/741
다크모드를 추가하면 좋을 것 같아요 ! · Discussion #741 · woowacourse-teams/2021-darass
😃
github.com
1. 다크모드 토글버튼을 유저에게 온전히 넘기고, 초기 상태에 대해서 아무런 조치를 하지 않느냐.
2. 다크모드 토글버튼을 관리자 페이지로 넘겨서, 삽입한 사람의 결정대로 고정하느냐.
3. 다크모드 토글버튼을 관리자 페이지로 넘겨서, 삽입한 사람의 결정대로 고정하고 사용자에게 다크모드 토글 ui도 보여주어 알아서 조절할 수 있게 하느냐.
이 3가지에서 2번으로 결론이 났습니다.
그리고 2번을 구현하다보니, 문득 생각이 들었습니다.
지금은 다크모드 정보를 삽입할 스크립트의 data-*속성에 true/false를 넘겨주어 토글하고 있는데, 프로젝트별로 DB에 저장을 할 수 있게 하면 이런 data-*속성 없이도 구현이 가능하기 때문입니다.
어떤 정보를 DB에 저장해야하고, 어떤 정보를 클라이언트 단에서 처리하면 되는지에 대한 고민을 했습니다.
일단, DB에 저장을 해야한다면 다음과 같은 고려사항이 있습니다.
- Project라는 엔티티에 다크모드 테마를 적용할것인지에 대한 필드가 추가되어야합니다.
- 그 외에는 프로젝트 생성/조회/수정에 대한 api가 있기 때문에 이부분의 로직을 벡엔드 크루에게 수정요청만 하면됩니다. 즉, 새로운 api는 필요없습니다.
- 하지만, 스크립트 페이지에서 프로젝트 수정 api를 사용하여 다크모드를 사용할것인지에 대한 정보를 업데이트해야하는 로직이 들어갑니다.
그리고 클라이언트 단에서 data-*로 다크모드로 적용할것인지에 대한 인자를 넘겨주면 다음과 같은 특징이 있습니다.
- 백엔드 크루들이 신경쓸 부분이 없습니다.
- data-* 플래그가 생깁니다.
- 설치 가이드에 사용자들이 다크모드를 사용하려면 data-*를 사용해야한다고 안내해야 합니다.
개인적인 생각이지만,
커뮤니케이션 비용, 벡엔드 크루들의 인력, 구현복잡도면에서는 data-*사용이 가장 효율적이었고, 테마 부분이 어떻게 수정될지도 모르는 상황이기 때문에 클라이언트에서 처리하기로 했습니다.
다만, 스크립트 발급 페이지에서 다크모드 data-*에 대한 설명을 추가해주어야 했고, data-*에서 다크모드 인자를 댓글모듈에 쿼리스트링으로 값을 넘겨주는 로직을 구현해야했습니다.
이렇게 결정한 김에 나름대로의 DB에 저장할 데이터의 기준을 세워보았습니다.
- 구현복잡도
: 프론트에서 구현가능한가?
- DB의 필요성
: DB에 저장하지 않아도 동작하게 할 수 있는가? (DB사용도 비용은 비용이다.)
- 유지보수성
: 추후 관련 기능에 대한 수정/리팩터링에 대해 용이한가?
- 백엔드 노동력
: 백엔드 개발자에 현재 가용인원이 있는가?
즉, data-*를 추가하는 것은 구현복잡도도 낮은편이고, DB가 없어도 동작가능하고, 유지보수할때 모든 권한이 프론트엔드에 있으므로 제가 이슈에 대응하기 쉽고, 백엔드 크루들이 현재 각자의 일로 바쁘기 때문에 그렇게 결정하게되었습니다.
더 좋은 기준이 있다면 댓글로 알려주세요!
릴리즈도 되었습니다!
https://github.com/woowacourse-teams/2021-darass/releases/tag/v2.2.0
Release v2.2.0 · woowacourse-teams/2021-darass
✅ 다크모드 지원 페이지의 색상이 어두울때 댓글이 보일 수 있도록 다크모드 상태를 지원합니다. 관리자페이지 (darass.co.kr) 의 각 프로젝트 스크립트 발급 페이지에서 반영하실 수 있습니다. dar
github.com
2. 자바스크립트에서 시스템 다크모드를 판별하는 방법
data-*사용과 api를 변경하는 것. 이전에 한가지를 더 고민했던것이 있습니다.
배경색을 자동으로 감지하여 알아서 바뀌면 좋겠다는 생각을 했습니다.
그래서 검색을 하는 도중 다음과 같은 코드를 발견했습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme
prefers-color-scheme - CSS: Cascading Style Sheets | MDN
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
developer.mozilla.org
window.matchMedia를 활용해서 prefers-color-scheme: dark와 매칭되면 시스템이 다크모드라고 판단할 수 있는 유용한 css 속성이었습니다.
하지만, 이것은 시스템의 다크모드를 판별하는 속성이었고, 다라쓰는 웹페이지의 색상을 기준으로 변경되어야 하기때문에 아쉽지만 활용하지 못했습니다.
언젠가 시스템 다크모드에 대응해야하는 시기가 오면 용이하게 활용해야겠습니다.
'개발 > 개발 리포트' 카테고리의 다른 글
| 2021/10/21 : textarea의 link부분을 자동으로 하이퍼링크 처리하기, simple-react-query 라이브러리 배포 (1) | 2021.10.22 |
|---|---|
| 2021/10/20 : 모든 프로젝트에서 react-query 제거 (0) | 2021.10.21 |
| 2021/10/18 : 댓글 서비스에 다크모드 구현! (0) | 2021.10.19 |
| 2021/10/16~17 : React의 렌더러, vDom를 어느정도 따라해보았습니다. (0) | 2021.10.17 |
| 2021/10/14~15 : 만들 수 있는 라이브러리는 직접 만들어쓰자 (0) | 2021.10.15 |
