next 13 tailwind 적용하기

Imnottired·2023년 2월 24일
1

유데미 에서 영어로 되어있는 강의를 끊었다.
트렌디함을 따라가기 위한 도전이었다.
그런데 강의를 듣다보니.. next보다는 tailwind에 치우쳐 있는거 같아서 환불했다.

열심히 적엇떤 내용들이어서 나중에 기억에서 찾을거같아서 남긴다.

https://beta.nextjs.org/docs/installation
첫 내용은 NEXT를 install하는 내용이었다.

인상적이었던 것은 NEXT 13부터는 TS를 제공한다는 것이 었다.
역시 NEXT는 본인들이 통제하는 것을 좋아하고 트렌디하게 업데이트하는 것이 마음에 든다.

강의에서는 TS를 설치하지 않았다.
나는 TS까지 공부하고 싶었어서 TS도 같이 설치했다.
(next13에서 ts적으로 부족한 부분이 있나..? 라는 의문을 가졌지만
next에서 ts 설치를 권장하는 것을 생각해보면 할 수 있을 것 같았다.)

기존에 페이지와 스타일링을 pages에서 처리했었는데 13부터는 app으로 넘어왔다.

  <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />

https://beta.nextjs.org/docs/installation
Image 태그에 priority말이 있었는데 우선시 한다는 말이었다.
로딩 중에 우선으로 불러 온다는 뜻이다.

page.tsx 태그창을 비우고 h1을 써주었다.
습관적으로 <div>로 적었는데, 확실히 HTML 이해도 높은 사람은
H1하고 H4의 이해도가 확실하다


이전에는 Head 사용하는 창을 만들었는데
13부터는 직접 제공한다.
이외에도 layout 페이지도 직접 제공한다.

tailwind css install

https://tailwindcss.com/docs/guides/nextjs
를 보면 next 전용 css 설치가 있다. 이를 통해 맞춰서 설치할 수 있다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

마지막 문장을 치면 tailwind.config.js 가 생성이 되는데 복사해서 붙여 넣으면 된다.

    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",

src안에 있기때문에 app,pages,components를 삭제해준다.
@tailwind base;
@tailwind components;
@tailwind utilities;
global css에 넣어주고

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

yarn dev를 통해 빌드한 것을 시작해주면 된다.

몇가지 확장을 추천 받았는데

GitHub Copilot
주석이나 함수 이름에 담긴 의미를 파악하여 코드를 자동 완성해, 단순하고 번거로운 작업을 자동화한다는 점이 특징이다.
(유료라서 사용하지 않았다.)

Code Spell Checker
스펠링 체크

Dark Low Contrast Themes
눈에 대한 부담감을 줄여주는 테마

ES7+ react/redux/react-native snippets
메크로로 빠르게 작성가능

Inline Fold - VSCode Extension
클래스네임을 가려준다. Tailwind에 적합해보여서 받았다.

Tailwind CSS IntelliSense
tailwind가 더 부드럽게 돌아가도록 도와준다.

tailwind는 편한것이 작성할 때 빠르다.

.을 쓰고 탭을 누르면 클래스명이 담긴 div가 만들어진다.

https://react-icons.github.io/react-icons/
리액트와 호환되는 아이콘을 받아서 만들 수 있다.

import { AiFillHome } from "react-icons/ai";
이런식으로 불러올 수 있다.
export 대괄호를 사용한다.

import { AiFillHome } from "react-icons/ai";
import { BsFillInfoCircleFill } from "react-icons/bs";
react-icons를 쓰고 뒤에는 불러오는 아이콘의 앞단어를 쓰면 된다.

타입은 IconType을 쓴다.

profile
새로운 것을 배우는 것보다 정리하는 것이 중요하다.

0개의 댓글