테일윈드, 오픈API 사용 연습

테일윈드 CSS에 대해서는 과거 잠깐 알바하던 시절의 동료로부터 대략적인 개요를 들었었다. 스타일드 컴포넌트가 말 그대로 스타일링을 컴포넌트 식으로 만드는 것이면 테일 윈드는 클래스 명에다 CSS를 붙이는 거라고. 그런데 CSS를 클래스 명에다 붙이는 건 기본적인 HTML의 방식 아니었나? 하는 생각과 컴포넌트 재사용성을 몇 번 겪어본 경험 때문에 어떻게 쓰는 건지는 알지만 따로 프로젝트에 적용하지는 않았었다. 그러므로 약간 복습하는 겸하여 간단한 토이 프로젝트에 붙여넣기로 했다.

 

우선 직전 프로젝트에서 사용했던 마비 옛채 폰트 파일을 적용해본다.

 

index.css 파일에 적용

테일윈드 css에 적용

 

실행한 결과 제대로 폰트 적용이 완료되었다. 이렇게 글로벌 폰트를 지정했으니 이제 App.css 파일에서 이 div를 중앙정렬 시킬 css를 만들어보자.

 

 

 

이렇게 클래스 네임에 꽂으면 된다.

 

 

사용하면서 느낀 점

1. 확실히 편리하다.

이정도면 정말 간편하게 사용할 수 있는 수준이다. css에 스타일링 추가해서 클래스 네임에다 꽂으면 알아서 적용이다.

2. div가 지저분해진다.

편리함에 집중하여 기본적인 가독성을 어느정도 '타협'한 것 같다고 처음 소개해주었던 사람이 말했지만 직접 써보니 타협 정도가 아니라 아예 고려하지 않은 것 같다.

3. 이럴거면 그냥....

클래스 네임에 스타일링을 할당하는 방식, 이 방식으로 할거면 HTML CSS랑 다른게 뭐지? 추가적인 몇 가지 기능 때문이라지만 정말 테일윈드를 쓰는게 맞나?

4. 스타일 컴포넌트가 더 좋은 듯?

스타일드 컴포넌트를 본격적으로 썼던 사람으로서, div가 더러워지는 것을 도저히 눈뜨고 보기 힘든 심정이다. 아니 div 안에 css만 넣을 것도 아니고 pros 전달하고 할 거 많은데 여기에서 왜 가독성을 포기해서.....