[회고] TODO 만들기

TODO

이전에도 만들어 본 적이 있다.

그냥 react와 postCSS를 사용해서

그건 드림코딩을 강의를 들으면서 만든거였는데,

강의 내에서 보이는 디자인으로 사이즈를 대충 고정시켜서 만들었었다.

그때의 나는 미디어쿼리를 별로 신경쓰지 않았다.

(이전 회사에서 키오스크의 기계가 고정이었기때문에

미디어쿼리에 전혀 신경쓰면서 만든적이 없었다.)

 

교육 + 팀원들과의 프로젝트 후

나는 ts를 알게 되었으므로

ts를 추가한 todo를 만들기로 결심했다.

피그마도 경험한 적이 없어서 사용을 하지 않았었는데

이번 기회에 피그마로 디자인도 조금 해봤고 (귀여운 수준으로..)

css는 고민끝에 tailwindcss를 처음 사용해보기로 결정했다.

(물론 아직 vanila-extract도 제대로 사용해보지 않았지만

tailwind의 점유율로는 경험이라도 해봐야하지 않을까싶었다.)

 

ts는 그래도 강의에서도 경험하고

두 번의 짧은 팀프로젝트에서 배웠던 경험이 커서 비교적 쉽게 적용했으나

tailwindcss는 className에 넣어서 부트스트랩처럼 사용하는것은 알고 있었으나

부트스트랩도 사용하지 않았었기때문에

공식문서를 켜서 어떻게 사용할 수 있는지 계속 찾아가면서 사용했다.

물론 내가 사용하지 않은 css도 아직 있지만

이정도면 그래도 어디가서 경험해봤다고 말할 수 있지않을까..

 

그냥 todo 사이트기 때문에 미디어쿼리도 크게 생각하지 않고

하나로 만들어서 모든 기기에서 전체화면으로 보이게 만들어서

tailwindcss로 미디어쿼리를 경험해보진 못했지만

 

공식문서 왔다갔다하며 해본 경험은 다음에 tailwindcss를 적용하게 된다면

조금 더 쉽게 프로젝트에 적용하게 할 수 있을거라 생각한다.

 

그리고 최신 공식문서에서는 사용자 정의 css를

@utility 클래스명 {} 로 사용했는데,

unknown at rule 경고창이 떴다.

내가 초기설정을 잘못했거나 무슨 문제가 있을 수 있는데

tailwindcss를 처음 사용하다보니 어떤 문제인지 파악하기가 힘들었다.

결국 @layer utilities {} 를 사용했다.

 

그리고 다크모드 적용을 위해 로컬스토리지에 dark | light를 넣고

html에 class를 추가해서 사용하도록했는데

class 설정을 해도 적용이 안돼서

tailwindcss.config.ts 파일에

  darkMode: ['class', '[data-theme="dark"]']

를 추가해주고 html에 class가 아닌 dataset.theme를 변경하게 했더니 적용이 되었다.

 

그리고 사용자 기기의 테마모드를 감지해서 다크모드를 적용하고 싶었으나

제대로 적용이 안돼서 일단은 수동변경만 가능하지만

사용자 기기 테마를 감지해서 테마를 변경하는것도 추후 수정해봐야겠다.

 

https://youd0313.github.io/YouDsTodo/

Todo

 

(+ 새로운 이슈가 생겼다.

크롬 자체 어둡게 설정했을때 적용이 되지 않아서

나는 사용자 기기 테마를 감지하지 못한다고 생각했는데,

주변 사람들에게 한 번 사용해달라 요청해보니

모바일 기기가 다크모드일때 사용자 테마를 감지했다.

그래서 css를 수정했는데

기기 테마의 우선순위가 높아서

여기서 prefers-color-scheme: dark 일 때 적용된 색상으로 모두 적용되고

내가 설정한 dark:~~ 사용자 수동 테마 설정이 제대로 먹지 않았다..

다시 고민해봐야하는 주제가 되었다. 🤣)