⌨️서론
TypeScript를 활용하기 이전에 JavaScript로 프로젝트를 진행했었고 그 당시에 tailwind를 사용했었다. 이번 프로젝트에서는 styled-components를 활용하게 되었는데 둘 다 사용을 해보면서 개인적으로 느꼈던 점을 정리해보고자 한다.
⚠️참고⚠️ : 개인적으로 사용해보면서 느낀 점이기 때문에 더 다양한 장단점이 있을 수 있다는 점을 미리 언급한다.
💨Tailwind Css
CSS 프레임워크 중 하나로 2022년도 여름에 맨 처음 프로젝트를 진행했을 때 떠오르는 CSS 프레임워크로 알려져있어서 사용하게 되었다. tailwind의 설치와 적용방법은 공식홈페이지에서 나온대로 따라해주면 된다.(‼️예시도 나와있기 때문에 공식홈페이지를 참고하는 걸 추천한다‼️) 그래도 요약해보자면 다음과 같다.
https://tailwindcss.com/docs/installation
npm 방식
1. npm install -D tailwindcss -> Create tailwind.config.js file.
2. Add the paths in your tailwind.config.js file.
3. Add the Tailwind directives to your CSS(ex) src/input.css)
4. Start the Tailwind CLI build process
terminal -> npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
5. Start using Tailwind in your HTML
공식홈페이지대로 잘 따라하게 되면 사용할 수 있게 된다 아래 예시코드이다.
//사용 예시 SenderItem.js의 일부
//...
<button
onClick={getTag}
className="flex justify h-20 w-4/5 my-7 mx-10 border cursor-pointer rounded-md shadow-md bg-white dark:bg-[#47474A] dark:border-[#47484A]"
>
<div className="h-20 flex justify-center items-center">
<div className=" ml-4 w-12">
{myArr[Math.floor(Math.random() * 4)]}
</div>
</div>
//...적용된 모습의 일부
💨Tailwind Css 장/단점
장점
1. 빠른 개발이 가능하다
기본적으로 제공하는 기능이 유용하고 다양하다. 이걸 이용해서 element에 바로 적용을 할 수 있기 때문에 빠르고 다소 쉬운 방식으로 개발이 가능했었다.
2. 네이밍이 필요가 없다😆
개인적으로 느낀점이지만 styled-components같은 경우에는 네이밍을 일일이 다 정해야한다는 점에서 초반에는 괜찮았지만 지금은 이름을 정하기가 어려운 점이 있다. 그러나 tailwind는 이러한 점을 고민을 안해도 된다는 점에서 장점을 가진다고 볼 수 있다.
3. 커스텀이 간단하다
기본으로 제공하는 부분뿐만 아니라 커스텀으로 제공하는 것도 비교적 쉽게 할 수 있다. 이는 다크모드일 때 느꼈는데 비교적 간단한 방법으로 커스텀 할 수 있었다.
단점
1. 가독성🥺
위의 코드만 봐도 알 수 있겠지만 tailwind에 익숙하지 않거나 프로젝트 중간에 투입되는 경우라면 굉장히 가독성이 떨어진다. 그래서 디자인이 완전히 바뀌는 경우에는 해당 element를 찾고 수정하는데 있어서 오히려 어려운 점이 존재했었다.
2. 진입장벽
기본적으로 css 쓰는 방법이 다소 다르기 때문에 기본적인 css지식은 갖고 있어야하며, 따로 기초적인 부분은 공식문서를 보거나 찾으면서 적용을 해야한다. 익숙해지면 문제가 되지는 않지만 초반에 적용할 때는 다소 어려운 점이 존재한다.
📚해결방법
필자는 이 사이트를 사용하고 검색하면서 많은 기초적인 부분을 배웠었다.
검색을 적극적으로 사용하는 것을 추천하는데 그 이유는 center로 검색할경우 그것만 해당하는 css정보를 제공해주기 때문이다.
만약 tailwind를 처음 사용한다면 이 사이트가 유용할 것이다.
url주소 : Tailwind css정보찾기
styled-components
styled-components는 이전 포스트 글에서 올려두었으니 링크로 걸어두도록 하겠다.
styled-components 장/단점
장점
1. CSS지만 Props를 전달가능 및 기존 CSS작성과 비슷한 방식
tailwind에서는 할 수 없었지만 styled-components에서는 가능하다는 점에서 꽤 매력적인 선택지로 다가왔었다. 또한 기존 CSS코드와 비슷하게 작성을 할 수 있다는 점에서 진입장벽이 높은 편은 아니었다.
2.Tailwind보다 깔끔해보이는 코드
element에 class를 주고 2~3줄씩 차지하는 일은 없어서 깔끔해보인다는 느낌을 받았다. 물론 후술할 단점에서 따로 파일을 정해줘야한다는 점을 명시하겠지만 styled-components파일을 따로 둔다면 파일자체의 코드량은 깔끔해보인다는 느낌을 줄 수 있다.
단점
1. 네이밍😫
현재 styled-components를 진행하면서 가장 큰 문제로 느낀 것은 네이밍이었다.... 초반에는 몇개 안되었기 때문에 네이밍에 큰 어려움이 없었지만 점점 스케일이 커지면서 이름을 짓는데 어려움이 커지고 있는 중이다. 가끔은 다시 tailwind로 돌아갈까 싶을 정도로 네이밍 작성에 있어 어려움을 겪고 있다.
2. 코드량
다른 파일로 옮겨서 진행하였지만 그럼에도 불구하고 각각의 styled-components에 따른 코드량이 결코 적지 않았었다. 이는 네이밍 문제와도 직결되는데 해당 이름을 기억하지 않는 이상 스크롤하면서 찾아야되는데 찾기가 쉽지 않다는 점도 한 몫한다.
📚임시해결방법 : 무조건 styled-component만을 위한 파일을 만들어서 import하는 방식으로 해야 다른 파일의 코드량을 줄여줄 수 있다.
💻결론
둘 다 사용했을 때 뭐가 더 좋냐의 답에는 명확히 내릴 수는 없지만 기존 CSS를 잘 알고 있고, 디자인이 크게 변동되지 않는다면 tailwind가 조금 더 매력적이라고 생각한다. 하지만 둘 다 사용해보고 본인한테 더 맞는 CSS 프레임워크를 사용하는 것이 제일 좋다고 생각한다.
다음 포스팅에서는 axios와 fetch의 차이점과 사용법에 대해서 다뤄보도록 하겠다😆.
