분류 전체보기

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 폰트를 선택해 등록하는 방법을 다룬다. 1. 커스텀 폰트 찾기 프런트엔드 개발을 하다 보면 밋밋한 기본 폰트 대신 개성 있는 폰트를 적용하고 싶을 때가 있다. 눈누(https://noonnu.cc/) 는 다양한 폰트를 쉽게 찾을 수 있는 유용한 서비스다. 적용하고 싶은 폰트를 눈누에서 발견했으면 웹폰트로 사용 부분을 복사한다. 2. 폰트 등록하기 다음은 전역 CSS파일에 앞서 복사한 '웹폰트로 사용'의 @font_face를 붙여 넣는다. 전역 CSS파일은 global.css, tailwind.css, application.css 등 프로젝트 컨벤션에 따라 다르니 각자 확인 해야 한다. 나는 Remix 프레임워크로 개발 중이고 Tail..

오류 발생 npx create-remix@1 Remix 프로젝트를 생성하고 실행하려는데 오류가 발생했다. 생성 시 선택한 옵션은 아래와 같다. 서버로 Remix App Server를 언어는 JavaScript를 선택했다. iksflow@Sungs-MacBook-Pro  ~/studyroom  npx create-remix@1 ? Where would you like to create your app? remix-app ? What type of app do you want to create? Just the basics ? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deploymen..

오류 발생 Next.js 프로젝트를 실행하기 위해 yarn build 이후 yarn start를 입력하면 아래와 같은 오류가 발생했다. yarn start를 실행하면 BUILD_ID 파일을 찾을 수 없다는 에러 메시지가 나온다. $ yarn start yarn run v1.22.21 $ next start ▲ Next.js 14.1.0 - Local: http://localhost:3000 \[Error: ENOENT: no such file or directory, open '/Users/iksflow/workspace/backup-peace/.next/BUILD\_ID'\] { errno: -2, code: 'ENOENT', syscall: 'open', path: '/Users/iksflow/wor..

이번 글에서는 Mac 환경에서 최신버전의 Next.js 프로젝트를 생성하는 방법과 프로젝트 구조에 대해 설명한다. 프로젝트는 TypeScript, App Router, Tailwind CSS를 사용하는 환경으로 구성했다. 1. 프로젝트 생성 Next.js는 npx create-next-app@latest 이라는 명령어로 쉽게 시작할 수 있다. 먼저 작업할 경로로 이동한 다음 터미널에서 명령어를 실행한다. 그럼 아래처럼 프로젝트 세부사항을 커스터마이징 할 수 있는 프롬프트가 나온다. $ npx create-next-app@latest ✔ What is your project named? … nextjs-backoffice ✔ Would you like to use TypeScript? … Yes ✔ Wou..