🧹 기본 세팅 🧹

박상은·2022년 6월 13일

next.js setting tailwindCSS typescript

🌱 포트폴리오 🌱

목록 보기

6/10

👇 목적

포트폴리오를 단순히 텍스트로 읽기보다는 웹 프론트엔드 개발자인 만큼 웹페이지로 만들어서 배포하고 검색엔진에 의해 검색되도록 만들어보고 싶어서 개발을 시작했습니다.

💁‍♂️ 라이브러리 선택과 이유

1. Next.js

주 목적은 SEO를 위해서고 추가적으로 각종 편의 기능들을 사용하기 위해서 선택했습니다.

2. tailwindcss

여태까지 styled-components와 tailwindcss 두 가지 밖에 사용해보지 않았지만 tailwindcss를 사용하면서 느낀게 이것보다 더 편하고 쉽고 좋은 css라이브러리, 프레임워크가 없을거라는 생각을 했을정도로 너무 편하고 좋아서 선택했습니다.
앞으로도 특별한 이유가 없다면 tailwindcss를 이용할 생각입니다.

3. TypeScript

개발을 진행할 때도 개발 완료 후 프로젝트를 관리할 때도 JavaScript보다 더 편하기 때문에 선택했습니다.

👏 세팅

1. tailwindcss

# 설치
npm i -D tailwindcss postcss autoprefixer

# postcss.config.js와 tailwind.config.js 생성
npx tailwindcss init -p

tailwind.config.js에 아래 값 추가

module.exports = {
  content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
}

globals.css( _app.tsx에서 import하는 css파일 ) 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* 폰트 설정 ( _document에서 import해준 이름 사용 ) */
  html {
    font-family: 'Jua', sans-serif;
  }
  
  /* 스크롤 제거 */
  body::-webkit-scrollbar {
    display: none
  }
}

색상, 이미지, 애니메이션 적용법

module.exports = {
  // ... 생략
  theme: {
    extend: {
      // 색상 등록
      colors: {
        // 원하는 이름과 색상 등록 ( 자동완성됨 )
        trello: "#1A76E3",
      },
      // 이미지 등록
      backgroundImage: {
        // 원하는 이름과 이미지 경로 지정 ( 자동완성됨 )
        me: "url('/me.jpg')",
      },
      // 키프레임 지정
      keyframes: {
        "appear": {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
      },
      // 애니메이션 등록
      animation: {
        "appear": "appear 1.6s ease-in forwards",
      },
    },
  },
  plugins: [],
};

2. _document

import Document, { Head, Html, Main, NextScript } from "next/document";

class CustomDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="ko">
        <Head>
          {/* 페비콘 */}
          <link rel="shortcut icon" href="/favicon.ico" />

          {/* SEO */}
          <meta name="keyword" content="프론트엔드, 포트폴리오" />
          <meta name="description" content="1-blue의 포트폴리오" />

          {/* 작성자 */}
          <meta name="author" content="1-blue" />
          {/* 문자 */}
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />

          {/* 카카오톡, 네이버 블로그 미리보기 제공할 정보 */}
          <meta property="og:type" content="website" />
          <meta property="og:site_name" content="1-blue_portfolio" />
          <meta property="og:locale" content="ko_KR" />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="600" />
          <meta property="og:title" content="1-blue의 포트폴리오" />
          <meta property="og:description" content="1-blue의 포트폴리오" />
          <meta
            property="og:url"
            content={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}`}
          />
          <meta
            property="og:image"
            content={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}/me.jpg`}
          />

          {/* 구글 폰트 */}
          {/* "jua" - https://fonts.google.com/specimen/Jua?subset=korean#standard-styles */}
          <link
            href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;

3. 절대 경로 지정

tsconfig.json

{
  "compilerOptions": {
    // ... 생략
    "baseUrl": ".",
    "paths": {
      // 여기에 원하는 이름과 실제 경로 등록
      "@src/*": ["src/*"]
    }
  },
  // ... 생략
}

박상은

...

이전 포스트

TOC ( Table Of Contents ) 구현

다음 포스트