reese.dev

레거시 프로젝트에 TailwindCSS 적용기 - 절망편 / 희망편

date
Aug 1, 2023
slug
-applying-tailwindcss-tolegacy-pj
author
status
Public
tags
Etc
summary
type
Post
thumbnail
category
updatedAt
Mar 30, 2024 10:45 AM

tailwindcss 설치하기 (절망편)

 
npm install tailwind → npm ERR! - update-browserslist-db is empty
회사 프로젝트에서 설치부터 쉽지 않았던 tailwindcss (ㅠㅠ)
  1. tailwind css docs의 nuxt2 install guide 참고해 설치하려 했으나 설치가 되지 않았습니다.
  1. update-browserlist-db를 비롯해 여러 package들의 의존성 부분이 빈 객체가 찍히더군요!
관련해서 찾아보니, cache 관련 issue라고 나왔으며 package-lock.json파일을 삭제 후 다시 설치하라도록 권한다. → package-lock.json파일 삭제 후 다시 install
 
그에 더해, browerlist-db와 관련해 주기적으로 update하라는 권고를 해당 repo의 이슈들에서 확인했습니다. https://github.com/browserslist/browserslist/issues/552

browserslist라는 패키지가 뭘까용…?

Browserslist는 프로젝트 또는 애플리케이션이 지원해야 하는 대상 브라우저 및 버전 목록을 지정하기 위해 웹 개발에 사용되는 널리 사용되는 패키지입니다. 생성된 코드가 특정 범위의 브라우저와 호환되도록 하여 개발자가 이전 브라우저 버전과의 호환성을 유지하면서 최신 JavaScript, CSS 및 기타 웹 기술을 작성할 수 있도록 합니다. 즉, 브라우저마다의 환경을 쿼리 문법으로 쉽게 정의할 수 있는 것입니다. 예를 들면, ie 7-10을 입력함으로써 인터넷익스플로러를 7에서 10버전만 지원한다는 식의 환경을 만들어줄 수 있습니다. → browserslist를 사용하여 FrontEnd 프로젝트가 여러 브라우저에서 정상적으로 동작할 수 있도록 환경을 만들어 크로스 브라우저를 해결할 수 있는 것입니다. Browserslist 패키지는 Babel, Autoprefixer 및 Stylelint와 같은 다양한 빌드 도구와 함께 사용하여 빌드 프로세스 중에 적용해야 하는 변환, 폴리필 또는 CSS 접두사를 결정할 수 있다. 대상 브라우저 집합을 정의함으로써 개발자는 제공하려는 지원 수준에 대해 정보에 입각한 결정을 내리고 프로젝트와 관련이 없는 브라우저에 대한 불필요한 코드 증가를 방지할 수 있습니다.
 
→ 프로젝트의 package.json안의 borwserslist 패키지를 살펴봅시다.
`last 2 version`: 여기에는 모든 주요 브라우저의 마지막 2개 버전이 포함된다. 최신 버전의 널리 사용되는 브라우저에 대한 지원을 보장한다.
`IE >= 9`: Internet Explorer(IE) 버전 9 이상이 포함된다. IE 9 및 모든 이후 버전에 대한 지원을 보장한다.
`ie_mob >= 10`: 여기에는 Internet Explorer Mobile 버전 10 이상이 포함된다. IE Mobile 10 및 모든 이후 버전에 대한 지원을 보장한다.

`edge >= 12`: 여기에는 Microsoft Edge 버전 12 이상이 포함된다. Edge 12 및 모든 이후 버전에 대한 지원을 보장한다.

`chrome >= 30`: 여기에는 Google Chrome 버전 30 이상이 포함된다. Chrome 30 및 모든 이후 버전에 대한 지원을 보장한다.

`chromeandroid >= 30`: 여기에는 Android 버전 30 이상용 Google Chrome이 포함된다. Android 30 및 모든 이후 버전용 Chrome에 대한 지원을 보장한다.

`android >= 4.4`: 여기에는 Android 브라우저 버전 4.4 이상이 포함된다. Android 4.4 이상을 실행하는 장치에서 Android 브라우저에 대한 지원을 보장한다.

`ff >= 30`: 여기에는 Mozilla Firefox 버전 30 이상이 포함된다. Firefox 30 및 모든 이후 버전에 대한 지원을 보장한다.

`safari >= 9`: 여기에는 Safari 버전 9 이상이 포함된다. Safari 9 및 모든 이후 버전에 대한 지원을 보장한다.

`ios >= 9`: 여기에는 iOS 버전 9 이상이 포함된다. iOS 9 및 모든 이후 버전에 대한 지원을 보장한다.
⇒ 프로젝트가 Chrome, Firefox, Safari 및 Edge와 같은 최신 버전의 주요 브라우저와 이전 버전의 IE 및 다양한 모바일 브라우저를 포함하여 광범위한 브라우저를 지원하도록 되어있었습니다. 언급된 특정 버전은 나열된 브라우저 버전 및 최신 버전과의 호환성을 보장해줍니다.
(참고) browserlists 구성법
별도의 .browserslistrc 파일에 저장하거나 package.json 또는 package.json의 browserslist 필드와 같은 다른 구성 파일에 포함할 수 있다. 그러면, 빌드 도구는 이 구성을 읽고 지정된 대상 브라우저를 기반으로 적절한 변환을 적용할 수 있다.
 
브라우저에 따라 사용해야 하는 폴리필의 내용이나 빌드 결과가 달라집니다. 이를 판별하기 위해 Babel은 browserslist를 사용하기로 결정했고, 그렇기 때문에 바벨에서 browserslist 설정을 할 수 있는 것입니다. 프레임워크를 사용중이라면, 내부에서 바벨을 사용하기에 browserslist도 사용하고 있던 것입니다.
위 패키지 말고도 regexpu-core 및 regjsparser와 같은 사용이 안되고 있던 패키지들의 의존성이 빈 객체로 되어있었습니다.
7개의 package들을 삭제한 후 다시 install 했습니다. 이후에도, 일부 라이브러리 재설치가 필요했고(e.g vue-gtag) ⇒ 에러 없이 로컬에서 개발서버를 띄울 수 있었습니다.
npx tailwindcss init를 해서 tailwind.config.js파일을 만들고 nuxt config의 빌드모듈에 추가하는 설정까지 했고 거의 다 끝났나 싶었는데… tailwindcss의 util들이 전혀 적용되지 않았습니다.(절망)
이 이슈와 관련해 찾아보다가, nuxt2와 nuxt/tailwindss 모듈 조합으로 해결한 예가 있어 초심으로 돌아가 다시 설정을 시작했습니다.
 

TailwindCSS 설치하기 (희망편)

TailwindCSS와 nuxt/tailwindcss의 차이는 무엇인가?

TailwindCSS → 미리 정의된 유틸리티 클래스 집합을 제공하는 유틸리티 우선 CSS 프레임워크입니다. 개발자에게 사용자 인터페이스 구축을 위한 고도로 사용자 정의 가능한 저수준 툴킷을 제공하는 것을 목표로 합니다. 미리 정의된 구성 요소에 의존하는 대신 Tailwind CSS는 사용자 지정 디자인을 신속하게 구축하기 위해 함께 구성할 수 있는 대규모 유틸리티 클래스 모음을 제공하는 데 중점을 둡니다.
nuxt/tailwindcss → Nuxt.js와 함께 사용하기 위해 만들어진 특정 패키지로, 서버에서 렌더링되는 Vue.js 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. nuxt/tailwindcss는 Tailwind CSS를 Nuxt.js 프로젝트에 쉽게 통합하게 해줍니다. nuxt/tailwindcss 패키지에는 Nuxt.js 프로젝트 내에서 Tailwind CSS를 사용하는 데 필요한 필수 구성 및 설정 파일이 포함되어 있습니다. Tailwind CSS 설치, PostCSS(CSS 전처리기) 구성, tailwind.config.js 및 postcss.config.js와 같은 필수 파일 생성을 처리합니다.
nuxt/tailwindcss를 사용하면 설정 및 구성 프로세스가 자동화되어 필요한 모든 파일과 종속성을 수동으로 구성하지 않고도 Nuxt.js 프로젝트에서 Tailwind CSS를 빠르게 설정할 수 있습니다.
 
  1. nuxt/tailwindcss 모듈 설치를 했습니다.
npm install nuxt/tailwindcss
  1. 시작부터 node 버전 올리라는 에러 메세지를 만났고… 해당 프로젝트 node 버전을 의존성이 안 깨지는 범위 내에서 올려보았습니다.
  1. Node.js repository의 release note를 참고해(ㅠㅠ) major version 16 중에 LTS인 16.11.0으로 올려보았으나 패키지들 의존성 산산히 부서졌습니다. 조금 더 낮은 stable version인 16.2.0으로 낮춰보았습니다. → 성공!
  1. 또 만난 새로운 에러 (with postcss) tailwindcss를 사용하기 위해선 postcss의 8버전 이상이 필요했고, postcss8이상을 사용하기 위해서는 nuxt version을 2.15.3이상으로 올려야했습니다. nuxt version을 2.15.3이상으로 올리기 위해서는 node 버전을 14.18.0 혹은 16.10.0 이상으로 올려야했고,위에서 말했듯이, 현재 16.10.0이상으로 올릴 수 없는 상황이라 (의존성 깨짐) node.js는 14.21.0(14version LTS) nuxt는 2.16.0(2 version LTS) 위와 같이 버전업을 했습니다.
  1. 적용 성공!
 
* 중간에 만났던, babel 설정 관련 warning message Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties. Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings → nuxt.config.js에서 import하는 build.js파일의 babel/plugin 설정 수정
 
*nuxtjs/color-mode 사용하여 테마 기능 구현하려했으나, nuxt-bridge(nuxt2와 nuxt3의 사이)로 넘어가야한다고 해서 우선 보류했습니다.