블로그 만들기

기본 세팅
1. ESLint
  
  기본적으로 Next.js는 ESLint가 설정되어 있다.
```
{
  "extends": "next/core-web-vitals"
}
```
  이는 공식 문서에서는 “엄격한 코어 웹바이탈 규칙 집합과 함께 Next.js의 기본 ESLint 구성으로 포함한다.” 라고 설명되어 있으며, ESLint 기본 설정이라고 생각하면 될 거 같다.

b. Prettier

이번 블로그 만들기에서는 prettier도 함께 적용해보려 한다.

먼저 공식 문서대로 설치를 진행.

yarn add --dev --exact prettier

다음으로 프로젝트에서 .prettierrc파일을 생성하여 규칙들을 정해준다.

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

prettier와 eslint를 함께 사용할 때 충돌할 수도 있기 때문에 공식 문서에서는 다음과 같은 절차를 따라 eslint-config-prettier를 설치하라고 한다.

yarn add --dev eslint-config-prettier

그리고 .eslintrc.json 파일에 extends를 추가해주도록 한다.

{
  "extends": ["next/core-web-vitals", "prettier"]
}

c. tailwind css 세팅

Next.js는 기본적으로 tailwind를 추천한다.

그 이유는 복합적으로 여러가지가 있다고 하는데,

첫번째로는 tailwind의 장점 때문이기도 하다. 개발 경험 향상이 큰 이유이다.

두번째로는 CSS in JS는 SSR에서 제대로 작동하지 않는다.

자세한 내용은 해당 블로그에서 참조하였다. 이후 다시 정리해보도록 하고 우선 프로젝트 세팅을 진행한다.

https://velog.io/@shinhw371/CSS-why-Nextjs-recommand-Tailwind

먼저 eslint-plugin-tailwindcss를 설치해준다.

왜? : classname의 순서와 여러 클래스명을 속기로 병합해주는 등 다양한 기능을 추가해준다.

https://www.npmjs.com/package/eslint-plugin-tailwindcss

설치 후 .eslintrc.json 파일의 extends를 추가해준다.
```
{
  "extends": ["next/core-web-vitals", "prettier","plugin:tailwindcss/recommended"]
}
```

Class Variance Authority

tailwindcss는 변수들을 미리 설정하고 적용하기가 CSS-in-JS와 같은 라이브러리에 비해 어렵다.

이에 영감을 받아 만든 라이브러리라고 소개하고 있으며, 해당 기능을 수행하게 해준다.

예를 들면 실제 프로젝트에서 사용했던 tailwindcss에서 아래와 같이 Button 컴포넌트를 정의할 수 있다.

import { cn } from '@/utils/style';
import { VariantProps, cva } from 'class-variance-authority';
import React, { ButtonHTMLAttributes } from 'react';

const ButtonVariants = cva('', {
  variants: {
    variant: {
      blue: 'bg-blue-500 text-white shadow-md transition hover:bg-blue-400',
      white:
        'border border-gray-300 bg-white text-black shadow-md transition hover:bg-gray-200',
      gray: 'bg-gray-200 text-gray-500 transition hover:bg-gray-100',
    },
    shape: {
      primary: 'rounded-lg',
      full: 'rounded-full',
    },
    size: {
      small: 'px-2 py-1 text-xs',
      medium: 'px-3 py-1.5 text-sm',
      large: 'px-6 py-3 text-lg',
    },
    weight: {
      light: 'font-light',
      normal: 'font-normal',
      bold: 'font-bold',
    },
    defaultVariants: {
      variant: 'blue',
      shape: 'primary',
      size: 'small',
      weight: 'normal',
    },
    disabled: {
      true: 'cursor-not-allowed opacity-50',
    },
  },
});

interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof ButtonVariants> {
  children: React.ReactNode;
  disabled?: boolean;
}

const Button = (props: ButtonProps) => {
  const { variant, shape, size, weight, children, disabled } = props;
  return (
    <button
      className={cn(ButtonVariants({ variant, shape, size, weight, disabled }))}
      {...props}
    >
      {children}
    </button>
  );
};

export default Button;

공식 문서를 토대로 설치해보자.

yarn add class-variance-authority

추가로 cva함수 내부에서도 tailwind css inteligence를 작동하게 하기 위해 작업영역에 대한 setting.json 파일에 추가해주라고 한다.

이렇게 해주면 variant 내부에서도 이제 잘 작동을 한다.

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\\\(([^)]*)\\\\)", "[\\"'`]([^\\"'`]*).*?[\\"'`]"],
    ["cx\\\\(([^)]*)\\\\)", "(?:'|\\"|`)([^']*)(?:'|\\"|`)"]
  ]
}

tailwind-merge 추가

해당 라이브러리는 cva를 사용할 때 중복되는 classname을 자동으로 merge하게 해준다.

tailwind-merge 로 설치

https://github.com/dcastil/tailwind-merge
twMerge와 cva를 같이 쓸 수 있게 해주는 util 함수 추가하기.

cva에서 제공하는 cx함수는 tailwind css가 좀 더 가독성이 좋게 해주는데, 예를들면 아래 코드와 같다.

이처럼 좀더 가독성이 좋게 해주는 유틸함수이다.
```
<div
      ref={dropdownRef}
      className={cx(
        'relative flex cursor-pointer items-center justify-between bg-white  transition',
        isOpen ? 'rounded-t-lg shadow-2xl' : 'rounded-lg',
        type === 'editor' ? 'w-20 px-2 text-gray-500' : 'h-8 w-36 px-4',
        className,
      )}
      onClick={toggleHandler}
    >
```
cx를 사용하게 됐을 때 중복되는 스타일링을 twMerge와 함께 더 쉽게 사용하는 방법으로 v

src/utils/styles.ts 파일을 생성해주고

cn이라는 함수를 생성해주도록 한다.
```
import { cx } from 'class-variance-authority';
import type { ClassValue } from 'class-variance-authority/types';
import { twMerge } from 'tailwind-merge';

export * from 'class-variance-authority';
export type * from 'class-variance-authority';

export const cn = (...args: ClassValue[]) => twMerge(cx(args));
```
inteligence 도 작동할 수 있게 하기 위해 settings.json파일도 cx에서 cn으로 수정해주도록 한다.
```
{
  "editor.fontSize": 14.5,
  "tailwindCSS.experimental.classRegex": [
    ["cva\\\\(([^)]*)\\\\)", "[\\"'`]([^\\"'`]*).*?[\\"'`]"],
    ["cn\\\\(([^)]*)\\\\)", "(?:'|\\"|`)([^']*)(?:'|\\"|`)"]
  ]
}
```
마지막으로 eslint도 cva나 cn 내부에서 작동할 수 있도록 할 수 있게 해준다.

공식 문서에서는 callees 내부에 추가해주면 된다고 하니 똑같이 따라해보자.

.eslintrc.json 파일에 해당 내용을 추가해준다.
```
{
  "extends": ["next/core-web-vitals", "prettier","plugin:tailwindcss/recommended"],
  "rules" : {
    "tailwindcss/classnames-order" : [
      "warn",
      {
        "callees": ["cva", "cn"]
      }
    ],
    "tailwindcss/enforces-negative-arbitrary-values" : [
      "warn",
      {
        "callees": ["cva", "cn"]
      }
    ],
    "tailwindcss/enforces-shorthand" : [
      "warn",
      {
        "callees": ["cva", "cn"]
      }
    ],
    "tailwindcss/no-contradicting-classname" : [
      "warn",
      {
        "callees": ["cva", "cn"]
      }
    ],
    "tailwindcss/no-custom-classname" : [
      "warn",
      {
        "callees": ["cva", "cn"]
      }
    ]
  }
}
```
- "tailwindcss/classnames-order": Tailwind CSS 클래스 이름의 순서를 검사합니다. 경고 수준으로 설정되어 있습니다.
- "tailwindcss/enforces-negative-arbitrary-values": Tailwind CSS에서 음수 임의 값의 사용을 강제합니다. 경고 수준으로 설정되어 있습니다.
- "tailwindcss/enforces-shorthand": Tailwind CSS에서 축약형 문법의 사용을 강제합니다. 경고 수준으로 설정되어 있습니다.
- "tailwindcss/no-contradicting-classname": 서로 모순되는 Tailwind CSS 클래스 이름의 사용을 금지합니다. 경고 수준으로 설정되어 있습니다.
- "tailwindcss/no-custom-classname": 사용자 정의 Tailwind CSS 클래스 이름의 사용을 금지합니다. 경고 수준으로 설정되어 있습니다.

데이터 베이스 세팅
1. Prisma
  
  사용이유?
  - Node.js 기반의 ORM 도구로 데이터베이스 상호작용 단순화하며 개발 생산성이 향상된다.
  - SQL쿼리를 직접 작성하는 대신 JS코드로 쿼리 작성하고, 타입 세이프한 쿼리 작성.
  위와 같은 이유와 더불어 프론트엔드 개발자가 SQL쿼리를 배우지 않아도 API 생성이 쉽다.
2. Supabase
  
  사용이유
  - PostgreSQL기반 데이터베이스를 제공하여 스키마를 관리하고 복잡한 쿼리를 실행.
  - 오픈소스 백엔드 플랫폼.
  - 매우 간편하고, 경제적이다!
  - Firebase는 NoSQL기반으로 제약이 있지만 Supabase는 PostgreSQL기반.
세팅하기
- 설치: yarn add —dev prisma
- init : npx prisma init
- supabase와 연동
  - env파일에 supbase에서 프로젝트 생성하여 url과 비밀번호 세팅
- prisma client : yarn add @prisma/client

블로그 기본적 기능 완료 후

웹 성능 평가 및 측정

Core Web Vitals

최대 콘텐츠 렌더링 시간 (LCP) - Largest Contentful Paint
- 로드 성능을 측정한다.
- 첫 2.5초 이내에 LCP가 발생하도록 해야 우수한 사용자 경험 제공.
첫 입력 지연 (FID)
- 상호 작용을 측정.
- 100밀리초 이하여야 한다. (사용자와 상호작용하는 시간)
레이아웃 변경 횟수 (CLS)
- 시각적 안정성 측정
- CLS를 0.1이하로 유지해야 우수한 사용자 경험 제공.

Javascript

Javascript의 실행 속도에 대해서 고민해야하는 시점?

한 페이지에 렌더링할 요소가 점점 많아질 때.
- ex) 채팅 페이지에서 점점 대화 내용이 많아질 경우..
클라이언트에서 실행될 로직이 복잡할 때.
다양한 환경에서 코드가 실행될 때.

웹 렌더링 방법론