Frontend

오류 발생 VSCode로 React + Typescript환경에서 테스트코드를 작성하는 과정에서 toHaveClass가 없다는 오류가 발생했다. 오류 상세 import Button from "./Button"; import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; test("when the Button is clicked, then background color changes red to blue", async () => { const user = userEvent.setup(); render(); const button = screen.getByRole("but..

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 컬러를 등록하는 방법을 다룬다. 1. Tailwind CSS의 컬러 커스터마이징 Tailwind는 기본값으로 지정된 Color Palette을 변경하거나, Alias를 붙이거나, 특정 색상에 이름을 붙여서 사용할 수 있게 하는 기능을 제공한다. 모든 작업은 tailwind.config.js(혹은 ts) 를 수정해서 간단하게 변경할 수 있다. 2. Color Palette 변경하기 Tailwind는 Default Color Palette를 제공해서 톤에 맞는 색상을 편하게 사용할 수 있다. 만약 기본 팔레트가 마음에 들지 않는 경우에는 변경할 수 있다. 예를 들자면 팔레트를 보다 작은 단위로 사용할 수 있게 50 단위의 색상을 추가하거..

이번 포스팅에서는 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..