[Next.js] Tailwind CSS, ESLint, Webpack

 

 

1. Tailwind CSS

GitHub과 Next.js 공식 사이트에서 사용하고 있습니다.

 

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 `m-1`,  `flex` 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다.

 

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

 

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

 

2. ESLint

: ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트입니다. Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공합니다.

ESLint는 ES 와 Lint를 합친 것입니다.

 

ES = Ecma Script

= Ecma라는 기구에서 만든 Script = 표준 Javascript

 

Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미

따라서, ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다.

 

 

 

3. Webpack

 : 은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler) 입니다. 대부분의 프레임워크들은 편리한 배포를 위해, Webpack파일을 알아서 만들어준다.

 

번들링이란 .js, .css, .png ... 각각의 파일들을 모두 모듈로 보고, 이 모듈들을 배포용으로 하나의 파일로 통합시켜주는 작업이다.

 

 

 

 

 

 

 

---

https://wonny.space/writing/dev/hello-tailwind-css