개발자를 희망하는 초보의 자기개발 이야기

최근 프로젝트에서 useEffect 안에 비동기 함수를 쓰는 부분이 있었는데, ESLint가 loadAnimation() 호출 밑에 경고를 띄웠다. bird 변수를 선언하는 부분에서 birdNameMap[birdName]을 사용하고 있는데, ESLint는 birdName을 의존성 배열에 추가하라고 요구했다.경고에서 어떤 값 때문인지도 다 알려주기 때문에 만약 놓친부분이 맞다면 의존성 배열에 추가하면 될 것이다. 하지만 나의 경우 이 useEffect는 컴포넌트가 마운트될 때 한 번만 실행되면 되기 때문에, 의도적으로 의존성 배열을 빈 배열로 두고 있었다.대략적인 문제의 코드는 아래와 같다. useEffect(() => { const loadAnimation = async () => { t..

문제의 발단현재(24년 8월) 기준 리액트 공식문서의 CNA로 설치했고, TailwindCSS를 사용자가 클릭하는 상태에 따라 조건부 적용시키는 중이었다. 어느 순간 빌드, 푸시를 해도 배포 사이트에 적용이 되지 않다.이에 검색 및 시도한 방법을 기록한다.1. CSS 캐싱 문제사용하는 브라우저에 캐시가 남아있어서 새로운 부분이 적용되지 않는 경우.해결책은 크롬기준 Ctrl+ Shift + R을 누른다.그럼 '강제 새로고침' 또는 '강력 새로고침' 이라고 하던데 캐시까지 싹 다 새로 로딩한다.2. Tailwind CSS Purge(1)// tailwind.config.jsmodule.exports = { content: [ './app/src/**/*.{js,ts,jsx,tsx}', // /app..