next js 14 + tailwindCSS폰트적용하기 2 이번에 포트폴리오 사이트를 만들면서 로컬 폰트가 아닌 눈누에서 제공하는 폰트는 어떻게 사용해야되나하면서 여기저기 찾아보다가 방법을 터득해서 까먹을까봐 작성합니다. globals.css@tailwind base;@tailwind components;@tailwind utilities;@font-face { font-family: "PretendardVariable"; src: url(/src/app/_fonts/PretendardVariable.woff2);}@font-face { font-family: "LOTTERIACHAB"; src: url(/src/app/_fonts/chab.otf);}@font-face { font-family: "LeferiPoint-BlackA"; src: ur.. Next Js에서 msw 사용하기 하이것도 쉽지않습니다.아주 요긴하게 쓰는 msw 알고 씁시다 msw... 이것 뭐예요?msw란 mock service worker의 약자로 service worker api를 사용해서 실제 요청을 가로채는 api mocking 라이브러임! 왜 써요?프로젝트 시작하면 같이 시작하다보니 백엔드가 api를 만들때까지 프론트는 화면 먼저 그리다가 다 끝나면 백엔드에서 api 내려줄때까지 하염없이 기다려야함.. 그때 msw를 사용하면 시간 낭비를 덜한다! 임시로 만들어서 데이터 잘 왔다갔다 하는지 확인하고 api만 바꾸면 되니까 아주 좋음 설치 및 파일 추가리액트로 할때는 괜찮았는데 next로 하려니 뭐가 이렇게 다 다른건지 엉엉운다yarn add msw --dev또는npm install msw --save-de.. Next JS 버전 14 로컬 폰트 적용하기 -------------- 하 진짜... 이름값 한다... 왜 안돼요./... 이번에 프로젝트 시작하면서 nextJs 를 사용해보려고 야심차게 깔고어려워서 계속 헤맨다.그냥 react 같았으면 폰트적용 뚝딱 했을텐데 이번엔 tailwindcss랑 같이 쓰다보니더 헷갈려서 나중에 또 써먹을일 있을까봐 기록용으로 써둠. 일단 폰트들은 public/fonts에 담아둿음 뭐 블로그 찾아보니까 app 폴더에 fonts 폴더 넣어도 된다고는 하는디..그냥 찝찝해서 나는 퍼블릭에 넣엇음 app 안에있는 글로벌.css에 백날천날 폰트페이스, 폰트패밀리 적용해도 소용 1도 없다.... 우선순위 다 밀림.. 내가 봄. next/fontnext/font는 불필요한 외부 네트워크 요청을 없애고, 폰트를 자동적으로 최적화 해.. 1일차 Next js 또. 찍먹 시작. 노드 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 없으면 설치 프로젝트 설치 터미널에 명령어 입력 npx create-nex-app@latest * 꼭 설치할 폴더 경로로 가서 설치 할것. 난 데스크 탑에 폴더 따로 안만ㄷ ㅡㄹ고 명령어로 프로젝트 설치함 설치하면 이렇게 물어봄 취향대로 고르면 되는데 앱 라우터는 yes해야 된다. 이전 1 다음
