이번 글을 통해 배워갈 내용 Next JS Tailwind css Font 설정 1. nextjs 설치 먼저 nextjs를 설치합니다 npx create-next-app@latest 2. NotoSans Font 다운로드 Noto Sans Korean Font를 다운로드합니다 https://github.com/bswsw/noto-sans-korean-webfont GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creat..
Typescript 기반 React에서 scroll animation 직접 구현하는 방법 이번 글을 통해 배워갈 내용 React에서 직접 isVisible 기반 스크롤 애니메이션 구현해 보기 개요 마치 스프링에 롬복처럼 aos는 편리하나 라이브러리를 설치해야 된다는 단점이 있습니다 Nextjs 13으로 업데이트하면서 aos 가 실행이 안 되는 버그가 발생해서 해결책은 찾았으나 https://stackoverflow.com/questions/75379440/the-aosanimation-on-scroll-is-not-working-in-next-13 The AOS(Animation on scroll) is not working in next 13 I Use next 13 , I wanna add AOS l..
이번 글을 통해 배워갈 내용 Tailwind CSS 사용 시 Next JS 다크모드 Next JS 라이트 모드 적용 꿀 방법 1. next-themes 라이브러리 추가 (35kb 정도 함) yarn add next-themes https://www.npmjs.com/package/next-themes next-themes An abstraction for themes in your Next.js app.. Latest version: 0.2.1, last published: 7 months ago. Start using next-themes in your project by running `npm i next-themes`. There are 141 other projects in the npm regi..
이번 글을 통해 배워갈 내용 Nextjs Tailwind CSS에 사용자 지정 글꼴 적용하기 23년 최신 방법 초간단 구글 Noto Sans Korean 폰트 적용해 보기 CDN으로 설정하면 브라우저에서 구글로 요청이 갑니다. 다운로드하여서 설정하려고 하니 귀찮습니다. 이제 Nextjs 13 버전부터는 그런 설정 걱정이 없습니다. 일단 프로젝트가 없으시면 Nextjs를 설치합니다 npx create-next-app@latest my-sample --typescript --eslint _app.tsx를 아래와 같이 설정합니다. import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import { Noto_Sans_KR, Bai_J..
이번 글을 통해 배워갈 내용 Next Js에서 Do not use 해결 하는 방법 Next Js에서 Do not use 오류 무시하는 방법 VS Code 로 Next JS 프로젝트를 진행하는 도중 Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint(@next/next/no-img-element) 라는 문구가 나오면서 오류를 해결 하라고 나옵니다. 이는 HTML '' 태그를 이용해서 이미지를 출력하는 것보다 Next.js에 탑재된 이미지 컴포넌트를 쓰면 이미지를 최적화하고 성능을 향상 시킬수 있어서 eslint가 경고를 보여주는 것입니다. eslint 설정에서 경고..
