폰트 최적화 알아보기에서 설명한 폰트 preload를 실제로 구현해봤습니다.Vite 기반 리액트 프로젝트폰트 파일, CSS 파일, JS 파일 등 정적 파일은 빌드되면 BMYEONSUNG-94085197.woff2 같이 파일 이름 뒤에 해쉬값이 붙습니다. 이는 빌드 전에는 어떤 해쉬값이 붙을지 알 수 없습니다. 따라서 폰트 Preload를 할 때 아래와 같이 단순히 파일명만 지정하면 프로덕트에서 해당 폰트 파일을 찾을 수 없습니다.관련 Vite 플러그인을 설치빌드된 HTML 파일에 를 삽입하기 위해 관련 플러그인을 설치합니다.npm i -D vite-plugin-inject-preload플러그인 설정vite.config.ts 파일에 설치한 플러그인을 등록합니다. match 속성에 preload하고 싶은 ..
이 글은 24.04.13 기준으로 작성되었습니다. 따라서 이후에는 NextAuth가 업데이트 되었을 수 있습니다. Next.js 공식문서 튜토리얼을 통해 처음 NextAuth를 알게 되었고 이를 활용하여 로그인 인증을 구현했습니다. 이후, NextAuth 없이도 로그인 인증을 구현했습니다. NextAuth Next.js 애플리케이션에서 사용할 수 있는 인증 및 인가 솔루션입니다. 이를 사용하면 다양한 인증 공급자(예: Google, Facebook, GitHub 등)를 통해 사용자를 인증하고, OAuth 및 OpenID Connect를 통해 사용자의 프로필 및 권한 정보를 가져올 수 있습니다. 기술 사양 이 글은 다음과 같은 기술 사양을 기준으로 작성되었습니다. 프론트엔드 : Next.js 14버전 이상..
1. Tailwind CSS클래스 기반으로 스타일을 지정하는 CSS 프레임워크장점클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능단점클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.서버 사이드 렌더링 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.2. styled-..
1. Next.jsNext.js는 Node 버전 18.17 이상을 요구한다.자동 설치 시 설치 방법이 굉장히 간단하다.npx create-next-app@latest // 설치npm run dev // 개발 서버 실행2. ESLint일관성 있는 방식으로 구현할 수 있도록 해준다.코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구에디터에 적용해서 사용하는 것으로 eslint Extension과 eslint 라이브러리를 모두 설치해줘야 된다.프로젝트에 적용Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공, 현재로서는 딱히 건들게 없어보인다.3. Prettier줄 바꿈, 공백, 들여 쓰기 등 텍스트를 일관되게 작성할 수 있게 해준다.개발자가 작성한 코드를 정해진 코딩 스타일에 맞게..
