algml0703

폰트 적용하는 법 (next/font) * next13 버전 기준 nextjs에서 프로젝트에 폰트를 적용하기 위해서는 next/font를 이용하는데, next/font는 모든 폰트 파일에 대해 자동으로 자체 호스팅 기능을 내장하고 있다. 자체 호스팅 기능을 제공한다는 것은 어플리케이션에서 사용되는 폰트 파일을 서버에 업로드하고, 해당 서버에서 자체적으로 폰트를 제공한다는 것을 의미한다. 이를 통해 본래 사용자가 웹 사이트를 방문할 때마다 폰트 파일을 외부 네트워크를 통해 다운로드하여 가져와 렌더링하던 과정을 생략할 수 있게 된다, 서버에서 자체적으로 호스팅된 폰트를 이용함으로써 폰트 파일을 최적으로 로드하는 것이 가능하고, 폰트를 불러오기 위해 외부 네트워크에 요청할 필요가 사라지기 때문에, 웹사이트의 ..

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. 원인 Next.js의 경우 기본적으로 Server Components가 사용되는데, 이는 SSR(Server Side Rendering)즉 서버에서 렌더링 작업을 수행합니다. 위와 같은 에러는 Server Components에서 createContext와 같은 Client Components에서 사용되는 기능을 사용하려 했기 때문에 발생한 에러이다. Server Componen..

App router란? 기존에 nextjs에서 pages 폴더를 통하여 사이트의 라우팅을 하던 방식과 달리 파일 구조에 따라 사이트의 경로를 설정하는 방식이다. npx create-next-app를 통해 nextjs 어플리케이션 프로젝트를 생성할 경우 기존의 pages router 방식에서는 pages 폴더가 존재했으나 app router 방식에서는 src/app 폴더가 존재하며, 해당 폴더의 하위에 생성되는 폴더와 파일을 기준으로 사이트의 경로가 설정된다. 더불어 src/app 폴더의 하위에 기본적으로 layout.tsx 파일과 page.tsx 파일이 존재하는데, 파일명을 보면 알 수 있듯이 layout.tsx파일은 레이아웃을 정의하는 파일이며, page.tsx 파일은 사용자가 실질적으로 사이트의 루..

기본적으로 express-rate-limit은 무분별한 요청으로 인한 서버 과부하를 막기 위해 사용되는 라이브러리이다. 백엔드 서버를 제대로 구축하여 express-rate-limit을 사용하는 것은 express-rate-limit문서에 나온 그대로 사용하면 문제없이 사용할 수 있지만 next에서 express-rate-limit을 그대로 사용하면 에러가 나고 제대로 작동하지 않기 때문에 해당 라이브러리를 사용하기 위해서는 수정하여 사용하여야 한다. 기본적인 express-rate-limit 사용 ☞ 2022.06.02 - [Javascript/Node.js] - [ Node.js ] - 서버 DDos 공격 막기 사용방법 next 환경 구축 > npx create-next-app --ts // 위의 명..

next-auth next에서 사용되는 패키지의 일종으로 로그인과 같은 사용자 인증 기능을 제공하여 준다. Github, Google, Facebook, Credentials 등의 인증 옵션을 제공한다. 여러 인증 옵션 중에서 Credentials는 사용자로부터 아이디와 비밀번호를 받아 백엔드 서버를 통해 인증하는 것이다. 사용법 기본적으로 next 환경을 세팅하여 준다. > npx create-next-app --typescript 해당 명령어 입력후 프로젝트 명을 입력하고 기본설정을 선택하여 준다. next-auth사용을 위한 패키지를 설치하여 준다. > npm install next-auth or > yarn add next-auth .env파일에 NEXTAUTH_URL=http://localhos..