간단하게 사용해보면서 느낀 점과 어려웠던 점 - 1일차
-
디자인에 재능 없는 사람한테 아주 유용할 것 같다.(나 같은)
material ui처럼 제공되는 컴포넌트도 아주 많아서 원하는 디자인 딸깍 가져다가 사용해도 좋을 것 같고 보니까 공식 홈페이지에서 제공되는 형태의 className을 가져다 사용해야 제대로 적용이 된다. 이 말은 협업할 떄 유용하다는 의미이다. 사람마다 보는 크기가 다르고 디자인이 제멋대로면 코드가 개판나기 때문이다.
예로 높이를 설정해줄때 사용하는 클래스 이름 중 하나가 "h-1/6"이다. 이는 약 16.666%를 나타내주는 것이다. 하지만 https://tailwindcss.com/docs/height 공식 문서를 보면 "h-1/7"은 없다. 이는 13~14%를 원했던 내가 임의로 적용해보았지만 적용이 안되는 것을 깨닫고 안 사실이다.
-
검색하면 다 나온다.
우선 처음에 익숙해지기 전까지는 기존 css를 tailwind로 변경해주는 사이트가 있어서 사용해봤다.
https://tailwind-converter.netlify.app 이 사이트이다. 하지만 모든 것을 변환해주지 못하고 안되는 것 은 안된다고 뜬다. 그럴땐 구글링을 통해서 공식 홈페이지에 들어가 원하는 것과 가장 유사한 클래스 명을 찾아서 적용해주면 되었다.
-
적응하기가 상당히 어려웠다.
기존의 CSS에 익숙해져 있어서 원하는 디자인을 보면 정적인 디자인 수치를 제외한 배치 / 혹은 기타의 CSS는 바로바로 적용이 빠르게 가능했는데 처음 접하다보니 하나씩 찾아가면서 하는게 좀 번거로웠다. 하지만 이는 익숙함의 영역이니까 괜찮아질거라고 생각한다.
추가 > 오타에 무척 취약하다. 스타일이 적용되지 않는다면 오타가 아닌지 확인해보자.
방향성
기존에 만들어 놨던 투두 리스트를 클론 디자인하고 있다. 디자인 작업이 끝나면 로그인 (Node) -> 다크모드 설정 (Zustand) 를 사용해서 하나씩 적용해볼 생각이다.
