선언병합을 활용하여 CSS in JS의 theme 타입 추론하기
이번 글은 TypeScript와 styled-components나 emotion을 함께 사용할 때, theme의 타입을 추론하는 방법을 다룹니다. 그 방법은 간단하지만, 숨겨진 원리가 있습니다. 방법을 먼저 설명한 후, 원리를 설명하도록 하겠습니다. theme 타입 추론하기 emotion, styled-components를 사용하면 아래와 같이 theme을 선언하고, ThemeProvider에 theme을 props로 넣어줍니다. // index.tsx const theme = { primary_500: '#FF5622', primary_400: '#FF7020', primary_300: '#FF9620', primary_200: '#FFB25B', primary_100: '#FFC17B', }; roo..
[주간회고] 우아한테크코스 Level2 6주차 - 절망의 계곡 극복하기
내가 정의한 절망의 계곡은, A라는 개념을 모르는데, A를 공부해도, A를 알 수 없는 상태를 말했다. A가 검색해도 나오지 않는다거나, 여러 개념이 얽혀있어서 읽어도 이해할 수 없었다. 크루들과 대화하면서 이를 극복할 수 있었다. 내가 정확히 무엇을 모르는지 메타인지 할 수 있었다. A를 이해하려면 사실 B, C, D를 이해해야 하는데, A만 주구장창 파고든다고 A를 이해할 수 없었던 것이다. B, C, D를 이해했다고 착각했던 것이다. 이에 대하여 다음에 길게 글을 쓰겠다. Plus 월화수목 11시까지, 목요일 10시반까지 공부했다. 가방을 우테코에 두고다녔다. 집갈때에는 공부에 대한 짐을 벗어던질 수 있어, 마음이 편안함 다음날 일찍 가게 됨. 씻고 바로 자게 됨. 근로 회의를 4번이나 했다. 목적..
크루들과 나눈 우아한 대화 #1 (React rendering, commit phase, memo)
크루들과 나눈 우아한 대화 #1 아놀드, 병민, 앨버와 아주 재밌는 대화를 나누었고, 많이 배웠다. 대화의 시작은 이러했다. "Props로 item 정보가 담긴 객체와 아이템을 삭제하는 함수 (deleteItem)을 넘겨준다고 했을 때, useCallback과 memo로 초기화 하는 것이 의미가 있을까?" return ( itemList.map(item => ) ) 이 상황에서 하나의 item이 업데이트 되면, 모든 Item이 리렌더링 될 것이다. 내가 가진 의문은, 연관없는 Item 컴포넌트가 다시 그려질지언정, Item이 같은 것을 그리고 있다면 diff 알고리즘이 바뀌었다고 인식하지 않기 때문에, 리렌더링 하지 않을까? 하는 것이었다. 내가 잘못 알거나 / 얕게 알고있었던 것은 - 렌더링이란 (함수..
