행복을 담는 블로그

Next.js에서 폰트 적용하는 방법우선 Next.js에서 font를 적용하는 방법으로는 google font를 적용하는 방법과 font 파일을 다운받아서 직접 localFont로 적용하는 방법이 있다.그 중에서 이번엔 localFont를 직접 적용하는 방법을 시도해보았다. 1. 폰트 다운로드하기우선 public 폴더 > fonts 폴더 안에 다운로드 받은 폰트 파일을 저장하였다. 2. Next.js에 localFont() 적용하기이후 fonts.ts 파일을 만들고 next/font/local로 부터 localFont를 import 해와서 내가 저장한 폰트를 종류별로 저장한다.import localFont from "next/font/local";export const hakgyoansim = local..

4. Rendering v12 v.s. v13 차이? Next.js 왜 쓰셨어요? : 렌더링 패턴으로 대답하자. CSR, SSR, ISR, SSG next.js 12버전 : 렌더링 방식이 page 단위로 렌더링 방식 규정함 next.js 13버전 : react 18버전에서 제시한 서버컴포넌트/ 클라이언트컴포넌트 를 적용하여 component 단위 렌더링 방식을 규정 기본적으로 app 폴터 하위 모든 컴포넌트는 서버컴포넌트이다 (그냥 외우자) "use client" 표시가 없다면 모두 서버 컴포넌트다. 내가 쓰는 터미널 = 웹 서버 = 소소코드가 돌아가는 환경이 서버컴포넌트 = runtime environment : node.js 환경 브라우저에서 콘솔 안 떠 -> "use client"를 쓰는 순간 브라..

3. Routing Next.js 프로젝트 시작하기 1) Next.js 프레임워크 설치하기 npx create-next-app@latest yarn create-next-app@latest ▶️ 프레임워크답게 필요한 라이브러리를 한 번에 설치 할 수 있다! 2) 폴더 구조 살펴보기 : .eslintrc.json, next.config.mjs,package.json, tailwind.config.ts, tsconfig.json 등 필요한 파일일 모두 생성된 것을 확인 할 수 있다. ▶️ src 폴더 > app 폴더 안에 layout.tsx, page.tsx 파일이 존재한다. ✅ layout.tsx 파일 : Metadata를 가지고 있는 파일로, title을 변경할 수 있으며, RootLayout을 가지고 ..

1. Next.js란? : React.js를 기반으로 만들어진 프레임워크이다. 풀스택이 가능하다. 백엔드 기능까지 가능 by Route Handler (1) Next.js는 React.js를 기반으로 만들어진 프레임워크이다. 프레임워크 : 모든게 세팅된 상태로 사용가능 라이브러리 : 내가 직접 다 세팅해야함 Next.js는 웹에 대한 리액트 프레임워크이다. 풀스택 웹 어플리케이션을 만들 수 있는 역할을 한다. 📌 프레임워크(Framework) v.s. 라이브러리(Library) (면접 단골 질문) ✅ 프레임워크(Framework) : 개발자가 기능 구현에만 "딱" 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 ex) Spring Framework : Java 기반 웹(백엔트) 프..