[OpenEDC] 중간 회고회고

OpenEDC 커스텀 중간 발표도 한 김에 중간 회고를 작성해보자.

 

OpenEDC 관련해서 최초로 한 일은 5월 10일에 OpenEDC 레포지토리를 클론하는 것이였다. 생긴 게 리액트로 만든 것 같이 생겨서 그런 줄로만 알았는데 코드를 보니 완전 쌩 바닐라 제예스였다;;

 

각 잡고 바닐라 프로젝트를 만들어 본 적도 별로 없고 본 것도 많이 없어서 처음 폴더 구조와 코드들을 보고 당황했다. app.js가 850줄이고 막.. bulma라는 처음 들어보는 css 프레임워크도 사용하고... 물론 나만 몰랐던 것 같이 유명한 프레임워크였다!

 

일단 코드를 좀 둘러보고 읽어보라고 주신 책이 있어서 일주일동안은 잠시 OpenEDC 관련 코딩은 접어두고 독서를 했다. 리얼월드 데이터 활용의 정석이라는 책을 주셔서 읽었는데 처음 접하는 주제임에도 술술 읽히는 책이었다. 한국어 제목은 리얼월드 데이터 활용의 정석..이지만 영어 제목은 The Patient Equation으로 환자 방정식이라는 의미이다. 1장에서는 배경지식과 함께 정밀의료와 데이터 분석의 현재 모습을 설명하고, 2장에서는 데이터와 분석법을 적용해 급성에서 만성까지 비교적 단순하고 개인적인 문제에서 복잡한 질병 및 인구집단 수준의 문제까지 다양한 질병에 도전하는 사람과 기업들을 소개한다. 3장에서는 양질의 데이터를 수집하고 그 데이터의 가치를 실현하는 방법을 설명하고 4장에서는 지금까지 설명한 모든 것이 어떻게 서로 맞물려 전 세계적 변화를 이끌어내는지 살펴본다고 출판사 리뷰가 그랬다. 난 가볍게 읽어서 모든 것을 이해하며 읽으려하진 않았지만.. 이 책을 읽고 애플 워치같은 웨어러블 기기를 다시 보게됐다고 생각한다. 그냥 단순히 선물받아서, 간지 나서 끼고 다니던 건데.. 꽤나 열심히 내 건강정보들을 수집하고 있었구나 생각했다.

 

어쨌든, 독서를 마치고 5월 18일에 다시 코드를 천천히 보며 먼저 첫번째로 주어진 임무인 OpenEDC 스킨 만들기에 돌입한다. 말은 스킨 만들기라 했는데 상사분께서 다크 모드같은 걸 만들면 좋겠다는 말씀을 하셔서 일단 다크모드부터 구현해보기로 했다. 그러기 위해 제일 먼저 팔레트를 추출해 정리했다.

2022.05.31 - [OpenEDC] 다크모드 지원

[OpenEDC] 다크모드 지원

여기에 어떤 식으로 팔레트를 뽑아냈는지 작성해두었다. 뭔가 저기엔 색을 쉽게 쏵쏵 뽑아서 일사천리로 팔레트를 만든 것 같이 써놨는데.. 사실은 좀 헤맸다. 많이 쓰이는 색에 이름을 붙이고 (창의력이 부족해서 이름 붙이는 것도 힘들었음) 다크 팔레트 grayscale을 자세히 보면 알겠지만 중복되는 색도 있다.

 

아무 생각 없이 아 상태 바꿔주면서 다크 모드로 토글하면 되겠다했는데 생각해보니 바닐라 제예스... 상태 관리를 어떻게 해야하는가라는 문제에 부딪혔다. 상태 관리라는 생각의 틀에서 벗어나 팔레트 css를 만들었으니 HTML에 적용되는 css를 바꿔치기 해주자라는 아이디어를 떠올렸다! 

먼저 index.html 파일에 link 태그로 css를 가져올 때 theme라는 id를 부여해주고 body 태그 아래 script 태그에 로컬스토리지의 theme 값이 dark인 경우 id가 theme인 엘리먼트의 href를 다크 팔레트로 바꿔주는 스크립트를 작성해준다. 뭔가 말로 하니 어려운데 차근차근 작성해보면 이해가 된다.

<!-- index.html -->
<link rel="stylesheet" id="theme" href="./css/palette/basic.css" />

<!-- body 태그 뒤에 작성!! -->
<script>
  if (localStorage.getItem("theme") == "dark") {
    document.getElementById("theme").href = "../css/palette/dark.css";
    document.getElementById("theme-dark").checked = true;
  }
</script>

 

그리고 모드를 토글할 함수를 구현해주고 온클릭 이벤트에 달아준다.

// js/app.js
window.handleTheme = function () {
  var tm = document.getElementById("theme");
  if (tm) {
    var arr = tm.href.split("/");
    if (arr[arr.length - 1] == "basic.css") {
      tm.href = "../css/palette/dark.css";
      localStorage.setItem("theme", "dark");
    } else {
      tm.href = "../css/palette/basic.css";
      localStorage.setItem("theme", "basic");
    }
  }
  reportsModule.reload(); //?
};

 

<!-- js/components/navigationbar.js -->
<div class='toggle-slot' onclick="handleTheme()">

 

흠.. 다시 생각해도 로컬스토리지를 사용한 게 아쉽다. 로컬스토리지.. 매우 편리한데 찝찝하다. clear할 시점을 못 잡겠어서 클리어시키질 못하겠고.. 클리어 안하자니 재부팅해도 유지되는 값들이 찝찝하고... 바꿀 수 있는 방법이 있다면 바꿔서 개선해봐야겠다.

 

다크 모드를 구현한 후엔 한국어 추가 작업을 했다. 솔직히 금방 끝날 줄 알았는데 거의 2-3일이 걸렸다. 용어도 생소한데다가 번역했을 때 더 애매해져서 번역하지 않고 그대로 두는 게 나은 부분들도 있고 해서... 동기 언니와 같이 작업했는데도 오래 걸렸다. 말투 맞추기 요런 문제도 있다는 걸 깨달았다. 

2022.05.27 - [OpenEDC] 한국어 추가하기

[OpenEDC] 한국어 추가하기

 

지금은 풀리퀘스트를 오픈한 상태이며 머지를 기다리고 있다. 오늘 머지해주겠다고 메일 회신 왔는데 대체 언제해주냐 일해라 오픈이디씨

 

마지막으로 스킨 커스텀... 후우🚬 방치하셔서 위에 것들이랑 스킨 커스텀 다 그냥 혼자 했는데 발표 전 날 버그 많다 고칠 거 많다 하시는 거 넘나.......🚬 아무턴 스킨 커스텀한 것들은 고칠 부분이 아직 많다.

2022.06.10 - [OpenEDC] 스킨 커스텀하기 - 1

[OpenEDC] 스킨 커스텀하기 - 1

2022.06.13 - [OpenEDC] 스킨 커스텀하기 - 2

[OpenEDC] 스킨 커스텀하기 - 2

대충 디자인은 잡아놨는데 한국어로 언어 설정을 바꿨을 때 마우스 오버 시 실행되는 애니메이션에 문제가 있다던가 반응형 작업이 안되어있다던가 등... 요런 것들 고치고 Report View 모드 차트들 색 바꿔주면 스킨 커스텀도 마무리할 수 있을 것 같다. 후딱후딱 끝내보자!

 

 

🐱‍👤 참고 :

http://www.yes24.com/Product/Goods/103724156

https://koras02.tistory.com/95

http://daplus.net/html-localstorage%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%A7%80%EC%9B%8C-%EC%A7%91%EB%8B%88%EA%B9%8C/