20241018(금) ▶️ 개인프로젝트 테일윈드 러닝커브, shadcnUI

 

20241018 금 - TIL

본격적인 코딩을 시작하기 앞서, 테일윈드 css의 사용법을 알아야 해서 테일윈드에 대한 css 내용을 공부했다.

기존에 팀 프로젝트를 하면서 한번 사용해 본 것이 전부여서, 간단하게 어떻게 쉽게 적용하는지 공부하게 됐고, 본격적으로 세팅을 시작했다.

 

오늘은 header, footer와 메인페이지 뼈대를 빠르게 만들고 싶었는데

테일윈드 러닝커브로 인해 header, footer 컴포넌트까지 완성했다. 😂

 

 

✏️ 테일윈드의 색다른 반응형...

테일윈드는 모바일에 최적화된 CSS이기 때문에 모바일 기준으로 먼저 생각해야한다.

pc버전으로 먼저 만들고, 반응형을 제작하려고 보니 기존에 생각했던 방식과 달랐다.

 

기존 CSS는 모바일사이즈로 접근 했을 때, @media 로 대부분 모바일(이하)로 조절하는 방식이었는데

테일윈드는 screens 속성으로 768px로 설정했으면 그 이상의 사이즈를 조절하는 것이었다. (즉 768px이상이면 pc버전)

 

    screens: {
      sm: "480px",
      md: "768px",
      lg: "1024px",
      xl: "1320px",
    },

 

이렇게 선택하면, lg값을 주면 1024p 이상 사이즈는 다르게 조절할 수 있는 것이었다.

오늘 알고 나니 정말 신세계였다 😂

 

 

 

✨ shadcn UI 적용기

바퀴를 재발명 하지 마라

 

내가 이번 개인프로젝트에서 UI 라이브러리를 사용하게 된 이유는

 

1. 시간절약

2. 버그 최소화 

 

딱 두가지였다.

 

원래는 css로 직접 짜는게 편해서 이전 팀 프로젝트에서도 직접 짜게 됐는데 생각보다 개발보다 CSS적용하는 시간이 오래걸렸다.

퍼블리셔로 업무했을때도 생각해보면 어느정도 CSS를 짰지만, 여러 라이브러리를 잘 사용했는데

팀 프로젝트에서 직접 CSS로 애니메이션 까지 만들면서 기능 만들기 바쁜데 CSS에 공수를 둘 수 없었다 😂

그리고 라이브러리를 잘 사용하고 잘 적용하는 버릇을 들여야 프로젝트에서도 금방 가져와서 쓸 수 있다고 생각한다.

퍼블리셔로 있었다보니 라이브러리를 가져오는 것 보다 직접 만드는 것이 오히려 편했었는데, 기능개발까지 신경쓰려니 CSS까지 빠르게 구현을 할 수 없었다...

 

그래서 Shadcn UI를 채택하게 된 이유도 있다.

라이브러리에 의존하지 않고, 내가 원하는 컴포넌트만 가져가서 직접 만들 수 있다는 장점이 있었고 복잡도가 낮기 때문에

Headless UI 방식이 마음에 들었다.

 

✨ Headless

headless UI는 시각적 디자인과 컴포넌트의 기능을 분리하여 각각 독립적으로 개발된 디자인 시스템이다.
컴포넌트의 외관과 동작이 분리되어 있기 때문에 디자인과 기능을 독립적으로 조정할 수 있어 유연한 대응이 가능하다.
높은 재사용성으로 구현에 걸리는 시간이 줄어드는 등 장점이 많기 때문에 상당한 최신 웹 애플리케이션에서 채택하고 있다.

 

 

---

 

 

🔥 본격적인 프로젝트 세팅

 

 

tailwind.config.js

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        "silver-gray": "var(--silver-gray)",
        "dark-gray": "var(--dark-gray)",
      },
    },
    screens: {
      sm: "480px",
      md: "768px",
      lg: "1024px",
      xl: "1320px",
    },
  },
  plugins: [],
};
export default config;

 

테일윈드에서 큰 뼈대 색상은 메인페이지 만들면서 추가 할 예정이다.

오늘은 CSS만 적용해 둔 상태라 진전되지 못해서 아직 텅텅 비었다.

 

 

 

 

---

PC 버전

 

 

 

 

모바일 버전

 

 

 

모바일로 진입 시, 햄버거 버튼을 만들어서 클릭하면 gnb영역들을 aside로 보이게 만들었다.

여기서 aside로 만들 때 shadcnUI로 만들어 보았다.

처음이라 적용하는데 시간이 오래 걸렸지만, 점점 만들다보면 빨라지겠지?

 

오늘의 코딩은 여기까지!