🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

오늘은 한주동안 있었던 주요 트러블 슈팅들을 적어보려한다.

1. tailwindCSS 컨벤션 맞출 수 없을까?

• (해결) prettier-plugin-tailwindcss과 같이 tailwind에서 제공하는 컨벤션 라이브러리로 해결

2. typescript path 설정 시, webpack이 읽어내지 못하는 이슈

• (해결) craco를 사용하여 cra를 직접 eject하지 않고도 webpack에 대한 설정을 부여할 수 있다.

3. tailwindCSS의 스타일을 props와 같이 동적으로 부여 시, 해당 스타일이 적용되지 않는다..?

• (해결) safelisting-classes

4. img 태그의 svg 파일 색상 변경..?

• (해결) import {ReactComponent as svgName} from '*.svg' 로 svg 파일 자체를 리액트 컴포넌트로 사용 가능.

5. 데이터 fetch 시, 객체 내의 객체에서 undefined 에러 발생

아래 구조에서 data.a가 undefined 일 때, 에러가 발생하며 앱이 실행되지 않음

const data = fetch('url');
// ...
return (<Temp data={data.a.b} />)

• (해결) data.a?.b 로 optional chaining 을 적용하여 해결

6. 닫힌 이슈 텍스트만 혼자 위로 떠있는 문제

<img width="655" alt="스크린샷 2023-05-19 19 40 26" src="https://github.com/codesquad-members-2023/issue-tracker/assets/86241737/ff63d402-3b46-42b5-9524-472b5b444855">

• (해결) opacity 속성을 주는 순간, 브라우저에서 합성(composition) 에서 처리하게 되어 하나의 레이어가 더 생성된다. 그래서 닫힌 이슈만 위로 붕뜨는 문제가 발생했다. z-index 로 해결 완료

📝 요약 및 하루 간단 회고

내가 생각했던 것보다 리액트는 쉽지 않았다. 평소 내가 혼자 진행해보던 프로젝트보다 상태가 조금 더 복잡해지니 구현하는 게 정말 어려웠다...😭 그래도 천천히 하나하나 배워나가면 어느순간 리액트스럽게 개발할 수 있는 날이 올 것이다!!!

오늘의 잘한 점

• 트러블 슈팅을 정리하고 기록한 점

오늘의 아쉬운 점

• 없다..! 오늘 하루도 열심히 살았다!

참고

• prettier-plugin-tailwindcss
• safelisting-classes

undefined