끄적이는 개발노트

기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다. 1. font 파일 추가public/assets/fonts에 다운로드한 폰트를 추가한다. 2. layout 수정localfont를 사용하면 custom 폰트를 지정할 수 있다.// layout.tsximport type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const gmarket = localFont({ src: [ { path: "../../public/assets/fo..

Next.js 에서 css를 다루는 방법에는 기본적인 built-in 방식과 Styled Component, TailwindCSS 방식이 대표적일 것이다.물론, Next.js에서는 기본적으로 create app을 할 때부터 TailwindCSS 적용 옵션을 설정하면 기본 세팅을 해줄 정도로 가장 편리하고 공식적으로 추천하는 방법이다. (본인 역시 TailwindCSS를 선호한다.) 하지만, Styled-Components 역시 아직까지 꽤나 사용되는 방법이기에 적용 방법을 정리해둔다. 1. 작동 방식Styled-Components는 css-in-js 방식으로 작동한다.CSS-in-JS?Javascript 코드 내에 css를 생성하는 로직이 담기는 방식이다.그렇기 때문에 변수에 접근이 가능하여 props와..