𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

풀스택 여정의 45일 차를 맞이했습니다.

어제는 정적 HTML 페이지를 위한 Express 라우팅을 배웠습니다. 오늘은 Tailwind CSS에 집중했습니다.

거대한 CSS 파일에서 벗어나, 이제는 유틸리티 우선(utility-first) 워크플로우를 사용합니다. 덕분에 디자인 작업 속도가 빨라졌습니다.

Tailwind는 유틸리티 클래스를 제공합니다. 이 클래스들을 사용하여 HTML에서 직접 커스텀 레이아웃을 구축할 수 있습니다.

저의 기술적인 작업 과정은 다음과 같습니다:

  • CDN 대신 npm 패키지를 사용하여 Tailwind를 설치했습니다.
  • npm install -D tailwindcss로 컴파일러 코어를 설치했습니다.
  • npx tailwindcss init으로 설정을 완료했습니다.

또한 Tailwind가 어떻게 파일 크기를 줄이는지도 배웠습니다. 사용하지 않는 스타일을 제거하기 위해 트리 쉐이킹(tree-shaking)을 사용합니다.

HTML 및 JS 파일을 스캔할 수 있도록 tailwind.config.js에서 content 경로를 설정했습니다:

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 설정을 통해 최종 CSS 파일의 크기를 작게 유지하고 속도를 빠르게 만들 수 있습니다.

출처: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3