2023-03-09 목요일

📅 오늘 한 일

---

1. 디버깅, 디버깅, 디버깅

버그는 파도 파도 끝없이 나온다.
버그가 버그인 이유도
그레이스 호퍼가 '왜 안돼!' 문제를 찾다가 컴퓨터 안에서 나방을 발견해서 그렇다는데...
과연, 적절한 네이밍이 아닐 수 없다.

✏️ 무엇을 배웠나

---

1. 리액트 이미지 엑박 뜨는 이유

웹 로고 이미지를 public 폴더에 넣어놓고 불러와서 사용했는데, 잘 보이다가 가끔 엑박이 뜨는 현상을 발견했다.

외부 url에서 불러오도록 해결했는데, 찾아보니 이유가 다 있었다.

1. public 폴더에 든 파일은 webpack에서 처리 되지 않음
2. 이걸 해결하려면 public 환경변수를 사용해야 함

<img src={process.env.PUBLIC_URL + '/img/logo.png'} />

이런 식으로 api key 환경변수로 처리하는 것처럼 해줘야 다른 루트에서 호스티하더라도 문제 없이 작동함.

결론 : 공식 문서를 읽자

2. ant desgin 컴포넌트 커스터마이징 하는 방법

ant desgin으로 페이지네이션이랑 모달을 구현했는데, 스타일링이 안 먹고 컴포넌트 api를 봐도 스타일할 수 있는 항목이 없어서 처음부터 잘 알아보고 사용할 걸 후회를 한 번 한 다음, 모달은 직접 다시 구현했다.

페이지네이션 차례에 'UI 라이브러리인데 커스텀이 안 된다고...?'라는 의문에 공식문서를 뒤지기 시작했다. 컴포넌트가 제공하는 api에 없는 스타일링을 하고 싶으면 ConfigProvider를 사용해야 한다.

진짜 바보 같았던 게 공식 문서라는 등잔 밑을 확인해볼 생각을 전혀 안 했다는 거 😮‍💨 사용하고 싶은 컴포넌트를 ConfigProvider 컴포넌트에 감싼 다음 스타일링을 잡아주면 된다.

import { ConfigProvider, Pagination } from 'antd';
import React from 'react';

const Pagenation = ({ DATA, handleChange }) => (
	<ConfigProvider
		theme={{
			token: {
				colorPrimary: '#000000',
				colorText: '#FEFF80',
			},
		}}
>	
	<Pagination
		total={DATA ? DATA.length : 0}
		onChange={handleChange}
		defaultCurrent={1}
		defaultPageSize={12}
	/>
</ConfigProvider>
);

export default Pagenation;

결론 : 공식 문서를 읽자

---

🏷️ 오늘의 코멘트

공식 문서를 읽자