분류 전체보기

[tailwindcss] 조건부 스타일 지정, props로 스타일 지정하기

프로젝트를 진행할 때, props에 따라 스타일을 다르게 적용하고 싶은데 제대로 스타일 적용이 안돼서 tailwindcss 공식문서를 보다가 발견한 내용을 정리한다. tailwind가 클래스명을 스타일로 변환하는 방법 중 가장 중요한 점은 끊어지지 않는 완전한 문자열로 존재하는 클래스만 찾는다는 것이다. 즉, 문자열 interpolation이나 부분 문자열을 사용하는 경우 제대로 동작하지 않는다. 조건부로 스타일 지정하기 개발자도구로 element를 확인해보면 클래스명은 정상적으로 들어간다. 하지만 tailwind에서 해당 클래스명을 스타일로 변환해주지 않는다. ❌ 동작하지 않는 경우 끊어지지 않는 완전한 문자열로 존재하지 않기 때문에 tailwind는 해당 클래스를 생성하지 않는다. ✅ 동작하는 경우 ..

[typescript] 동적으로 키가 추가되는 객체의 타입 지정하기

const cache = {}; const add = (id: string, value: string) => { cache[id] = value; }; const remove = (id: string) => { delete cache[id]; }; cache 객체에는 동적으로 키가 추가되고, 삭제될 수 있다. 1. Record 사용하기 const cache: Record = {} Record의 첫번째 인수에는 key의 타입, 두번째에는 value의 타입을 지정한다. Record 객체의 키가 Keys, 값은 Type에 지정하여 객체 타입을 만들 수 있다. 2. index 타입 지정 const cache: { [id: string]: string } = {}; 인터페이스 또는 타입 사용 interface C..

컴포넌트 잘 만들기: 데이터 추상화하기

토스ㅣSLASH 22 - Effective Component 지속 가능한 성장과 컴포넌트 영상을 참고하여 글을 작성하였습니다. 제품은 항상 바뀐다. 변경사항은 자주 발생한다 좋은 제품을 위해서는 변경은 반드시 필요하다 변경은 예측 불가능하다 변경에 대응하기 Item이라는 컴포넌트 이름만 보고는 컴포넌트가 어떤 역할을 하는지, 어떻게 보여지는지 알 수 없다. 변경에 유연하게 대응하도록 컴포넌트 만들기 컴포넌트? 컴포넌트는 3가지 특징을 갖는다. 1. 컴포넌트는 데이터를 관리한다 컴포넌트는 두가지 데이터를 관리한다. 외부에서 주입 받은 데이터 내부 데이터(상태) 2. 컴포넌트는 UI를 보여준다. 컴포넌트는 데이터를 어떻게 보여줄 것인지를 결정한다. 3. 컴포넌트는 사용자와 상호작용한다. Headless 기반..

TS2339: Property 'reset' does not exist on type 'EventTarget'.

form 요소의 reset 메서드를 사용하고 싶은데 아래와 같은 에러가 발생한다. const handleFormSubmit = async (e: React.FormEvent) => { ... e.target.reset(); // TS2339: Property 'reset' does not exist on type 'EventTarget'. } TS2339: Property 'reset' does not exist on type 'EventTarget'. 해결 방법 1. 타입 단언하기 e.target에 as를 사용해서 HTMLFormElement 타입을 단언해줄 수 있다. (e.target as HTMLFormElement).reset(); const handleFormSubmit = async (e: R..

Property 'Authorization' does not exist on type 'AxiosHeaders'

현재 프로젝트에서 jwt를 사용하고 있기 때문에 axios interceptor를 이용해서 토큰에 따라 request 헤더 설정을 해주어야한다. 아래와 같이 interceptor를 설정하였다. axios.interceptors.request.use((request) => { request.headers ? (request.headers.Authorization = `Bearer ${token}`) : (request.headers = { Authorization: `Bearer ${token}` }); }); // 또는 axios.interceptors.request.use((request) => { if (request.headers) { request.headers.Authorization = `Be..

[React] useState 초기값이 undefined이 되는 오류

문제 상황 props로 전달한 값을 state의 초기값으로 사용하였다. 하지만 state 값은 props로 전달된 값 다르게 undefined로 설정되었다. 원인 useState(initialValue)에서 initialValue는 첫번째 렌더링에서만 사용된다. 그 후에는, props로 전달된 intialValue 값이 변하더라도 적용되지 않는다. props가 바뀌면 재렌더링이 일어나지 않나요? 부모 컴포넌트의 state를 props로 전달한 경우만 재렌더링이 일어난다. 위의 경우는 부모 컴포넌트의 state를 전달한 것이 아니라 변수를 전달했기 때문에 렌더링이 다시 일어나지 않는다. 해결 방법 1. useEffect useEffect 사용해서 props로 전달된 initialValue가 변경되면 set..