https://beemore32.github.io/Loatimer/
정말 대충대충 가지고 놀면서 tailwind를 사용해볼 용도로 만들었기 때문에 큰 거는 없지만 이 사이트를 구상하고 만들면서 느꼈던 느낀점을 서술 하겠음
장점
1. 엄청난 편의성
쓰면서 제일 좋은 경험을 준 부분이다. css 혹은 scss파일을 따로 만들어서 또 클래스를 만들고 잡아서 스타일링을 하는 것은 어렵지는 않지만 정말 번거롭고 익스텐션이 없다면 파일을 왔다가 갔다 하면서 클래스가 맞는지 체크를 해야 하지만 컴포넌트에 직접 스타일을 직접 입혀서 따로 css파일을 만들어서 따로 작업을 할 필요 없다. 정말 이 부분이 tailwind를 쓰게 만드는 원동력이라 생각 될 만큼 경험이 좋았고, 게다가 제작자가 직접 지원한 익스텐션을 사용하면 개쩌는 자동완성을 사용 할 수 있다.
2. 확장성이 좋다
이 부분도 tailwind의 최고의 강점이 생각이 될 만큼 연결성이 굉장히 좋았다. 내가 원하는 변수를 json파일에 지정을 해줌으로 써 내가 원하는 크기, 색, 기타등등 내가 원하는 스타일을 입히기에 편했다.
3. 리액트에서 굉장히 잘 작동함
css대신 tailwind를 택하는 사람이 이해가 될 정도로 리액트에서 가장 잘 어울리는 구동방식을 가지고 있다. 리액트 특성상 js파일 내에서 스테이트를 관리하고 기능들을 빌드하게 되는데, 이 부분에서 별도의 css작업 없이 클래스를 입력하기만 하면 스타일이 입혀지기 때문에 귀찮게 css파일 작업을 할 필요가 없어진다.
단점
1. 근데 이거 사실 css아님?
이걸 쓰면서 가장 크게 들었던 의문이 들었던 부분 이였다. 결국엔 스타일 입히는 작업을 편하게 해주는 것 뿐 결국에는 사용자의 스타일을 잘 입히는 역량이 필요했다. 근데 이건 어느 라이브러리도 같을 듯.
2. 복잡한 스타일 입히는 데는 불리함
스타일을 입히는 작업 특성상 flex박스를 만들어 정렬하거나 grid박스를 만들어 작업을 하기 때문에 복잡한 스타일을 입힐 때 굉장히 불편하기 때문에 사실상 scss를 할줄만 안다면 오히려 scss 임포트 하는 게 편한 작업도 많았다. 그렇게 되면 결국엔 이걸 쓸 이유가 없어진다는 불편한 사실이 있었다.
3. 클래스 이름이 굉장히 더러워짐
클래스 이름에 스타일을 직접 입히는 것 이기 때문에 클래스가 굉장히 굉장히 더러워진다.
이게 고작 한 박스에 담긴 클래스 이름이기 때문에 클래스 이름이 더러워 지는 걸 보기 싫어 하는 사람은 쓰기가 굉장히 힘들어 진다.
4. 미디어 쿼리 및 가상 선택자 다루기가 귀찮음
반응형 웹 및 애니메이션을 입히기 위해서는 가상 선택자를 사용 하는 경우가 많은데 위의 문구 처럼 내가 직접 하나하나 클래스를 지정해야 하기 때문에 이 부분을 작업 할 때는 차라리 css나 scss나 styled-componenets를 쓰는 게 백배 이백배 편하다...
총평
정말 간단하게 스타일을 입히거나 내가 css파일을 만들어 별도의 스타일을 입히기 귀찮을 때 사용하기에 굉장히 좋은 라이브러리 임은 틀림이 없다. 게다가 제공하는 컬러툴이 꽤나 예쁘기 때문에 별도의 작업 없이 웹을 꾸미고 혼자 작업 할 때 빛을 발하는 라이브러리라 생각이 된다. 하지만 본인이 scss를 잘 사용하거나 styled-components를 사용 중이라면 tailwind로 넘어 갈 필요가 없지만, 한번쯤은 사용 해 봄직한 라이브러리라 생각 된다.
