[1팀 전명익] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍 #35
Conversation
There was a problem hiding this comment.
DartMode를 훅으로 만드셨네요..! 좋은 아이디어 같습니다ㅎㅎ
아실 수도 있는데 tailwind에서 class="bg-white dark-bg-slate-800" 이런 식으로도 설정할 수 있는 것 같아요!
그럼 remove, add 를 하지 않고 위 코드처럼 넣어만 둬도 동작할 것 같습니다..!
There was a problem hiding this comment.
저도 tailwindcss에 dark 접두사를 써서 바꾸려고 했었는데 저도 이부분에 대해서 아쉬웠던 부분이기도 합니다 ㅎㅎ;
os 셋팅 컬러 prefers-color-scheme 가 dark 모드이더라도 화이트 모드 버튼을 눌러서 화이트로 바뀌게끔 하고싶었는데
해당 tailwind의 drak 접두사의 경우는 prefers-color-scheme에 따라서 색상을 보여지게 하는부분이고 해당 값은 읽기전용 값이라서 강제로는 바뀌지 않더라구요. 좀더 깊게 고민해서 해볼려고 했지만 임시방편으로 그렇게 처리했었습니다..! 코멘트 감사합니다! 👍
| export const isSystemDarkMode = (): boolean => { | ||
| return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; | ||
| }; |
| const [fontSize, setFontSize] = useState(16); // 초기 font-size: 16px | ||
|
|
||
| const increaseFontSize = () => { | ||
| setFontSize((prev) => Math.min(prev + 1, 23)); // 최대 23px | ||
| }; | ||
|
|
||
| const decreaseFontSize = () => { | ||
| setFontSize((prev) => Math.max(prev - 1, 9)); // 최소 9px |
There was a problem hiding this comment.
폰트사이즈 까지 동적으로 관리 할 수 있게 처리하셨네요 👍👍👍
최소, 최대 초기 값들에 대한 number들이 로직에서 매직넘버로 사용되고 있는 것 같은데 상수로 분리하면 의도가 명확하고 관리하기가 쉬워질 것 같은데 명익님은 어떻게 생각하시나용?!
There was a problem hiding this comment.
확실히 상수로 분리해서 관리하는 편이 좋다고 생각되네요.. ! 전 주차에 그렇게 해놓고 이번주차에는 제 머릿속이 포맷이 된 모양이군요 ㅋㅋㅋㅋㅋ 다시한번 정리해보겠습니다! ...! 의견 남겨주셔서 감사합니다 👍
과제 체크포인트
기본과제
React의 hook 이해하기
함수형 프로그래밍에 대한 이해
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
심화과제
뷰데이터와 엔티티데이터의 분리에 대한 이해
엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
과제 셀프회고
과제에서 좋았던 부분
과제를 하면서 새롭게 알게된 점
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문