Minimum viable dark mode How to create a quick and dirty dark mode for simple apps and websites using pure CSS. chasem.co 자동으로 다크모드에 어울리는 색 구성을 만들어주면 좋겠다는 생각을 했는데 css로 그것이 구현가능했다. 방법은 css의 filter function인 invert와 hue-rotate를 사용하는 것이다. invert(100%)를 사용하면 색이 반전되고 다시 invert(100%)를 하면 원래대로 돌아온다. hue-rotate는 정확히 맞는지는 모르겠지만 생상좌표를 회전하는 것같다. 그래서 hue-rotate(25deg)를 했다면 hue-rotate(-25deg)로 되돌릴 수 있다. @med..

혹시나 theme를 변경하게 될까 싶어 앱 전체 UI 스타일을 css가 아닌 material-ui 자체 style로 만들었다. 하지만 theme를 변경하여 내맘대로 커스텀을 하려면 theme 전반에 대한 이해가 있어야 해서 약간 망설여지게 되었다. 감각없는 나에게 디자인 작업이라는 것은 아주 시간이 오래걸리고 힘든일이다. 결국 어찌어찌 수정해서 완료하기는 했는데 의외로 material-ui의 theme라는 것이 간단해서 어떤 부분을 건드렸는지, 어떤 부분을 주의해야하는지 정리해보려고 한다. material-ui style material-ui의 style은 makeStyles로 theme를 이용하여 class들을 만들고 이를 component요소에 className으로 지정하는 방식이다. v1 릴리즈에서..

갑자기 tumblr에 새 글을 작성하면 실제로 글은 등록되는데 API 에서 404 오류가 발생했다. 갑작스런 코로나 위기로 v1 릴리즈 이후에 앱에 신경을 못써서 막연히 post api에 문제가 있다고만 생각했다. 시간이 되면 확인해야지 하다가 오늘에 이르렀다. 원인 에디터에서 글을 등록하는 과정은 이렇다. 먼저 글내용을 등록하는 api를 호출하고 호출결과로 등록된 글의 id를 받아온다. 이 id로 글의 내용을 읽어 리스트에 추가한다. 이렇게 새로운 글이 리스트에 추가된다. post api가 문제라고 생각했기때문에 post api에 대한 테스트코드를 작성해서 새글을 작성해봤다. 어라? 201응답이 오고 id도 잘온다. 아뿔싸... 그럼 api 문제가 아니라 에디터 앱 내부의 오류인가? 당황했다. 문제가 ..

지난번 글에서 actions-gh-pages를 사용해서 github pages로 웹사이트를 publish하는 방법을 정리했는데 정리하고나서 계속 써보다가 문제를 한가지 발견했다. 결과물이 gh-pages로 push는 잘 되지만 실제로 사이트로 publish는 동작하지 않고 있었다. publish되면 commit에 Pages관련된 Action이 동작한 것이 표시되는데 그런 표시가 없는 것이다. 문득 GITHUB_TOKEN가 동작하지 않는다는 경고를 무시하고 GITHUB_TOKEN을 사용한 것이 생각났다. 얼른 다른 방식으로 변경해보니 잘 동작한다. GITHUB_TOKEN을 사용하면 Action이 동작은 하지만 문제가 있다더니 그 문제가 이건 줄은 몰랐다. ;;; 이 문제는 Action이 동작하나마나하게 만..

Github Pages가 나온 뒤로 수많은 정적 사이트 생성기가 나왔다. github가 처음에 ruby로 만들어지다보니 pages도 jekyll이라는 ruby 기반의 생성기로 소개되었다. 나도... 지금까지 jekyll만 사용해 봤었다. 하지만 모두가 알다시피 jekyll은 절로 욕이 나올 정도로 느렸고 사용방법도 복잡하다. ruby를 주로 사용하는 사람들이야 귀찮지 않겠지만 나에게는 ruby 개발환경을 만드는 것도 귀찮다. Gatsby는 React, Graphql 이라는 핫한 기술을 사용한 사이트 생성기다. 처음에는 정적 사이트를 React랑 graphql로 어떻게 만든다는 건지 잘 상상이 되지 않았다. 실제로 demo를 봐도 동적으로 페이지를 만드는데 이게 무슨 정적 사이트인가 했다. 이후에 구글 봇..