[ team12 ] 더미데이터 기반 UI, TypeScript로 Calendar library 제작 #25
Conversation
- ViewController에서 보관하던 정보, 로직 전부 ViewModel로 이동 - ViewModel 역할에 따라 공용 인터페이스 구축 Dae-Hwa/airbnb/#25
- 쓰지 않는 메소드, 중복 삭제 Dae-Hwa/airbnb/#25
- Network Manager에서 다루도록 변경 Dae-Hwa/airbnb/#25
- PopularLocation 데이터 받아오기 성공한 경우 - 받아오지 못하고 400 오류가 뜬 경우 Dae-Hwa/airbnb/#25
이 부분은 animation & keyframe 속성 때문인거 같네요. 리렌더링 되기전에 animation 속성을 제거해주는 편법이 통하려나요? ㅎ 보통 애니메이션 컨트롤은 transition을 추가/제거 하는 방법을 사용하긴하죠. |
함수표현식은 람다표기법으로 간단한 함수를 표현할때 좋은거 같고요. React.FC는 안티패턴처럼 언급되는 경우가 많은거 같아요. type, interface 만들어서 일반 함수처럼 TS 적용하는 것을 더 추천하는 경우도 많더군요. 참고하신 글등의 이유가 그 중 하나인거 같아요. |
| import CalendarProvider, { useCalendarState } from "./CalendarProvider"; | ||
| import { Direction, OnClickDay, _OnClickResult } from "./type"; | ||
|
|
||
| // type이 좋을까 interface가 좋을까 |
There was a problem hiding this comment.
대부분 interface로 정의하는것이 전 좋아보임.
type은 기존 타입을 조합해서 새로운 타입으로 만드는 용도로 좀더 어울리는 거 같네요.
|
|
||
| export default function Calendar({ onClickDay, countOfMonth }: CalendarProps) { | ||
| if (countOfMonth < 1 || countOfMonth > 12) { | ||
| throw new Error(MESSAGE.ERROR.INVAILD_RANGE_COUNT_OF_MONTH); |
There was a problem hiding this comment.
그런데 에러가 사용자에게 전달되야 하는 것이면, 실제로 화면에는 어떻게 처리되는지도 나중에는 고민해보세요.
|
|
||
| export type OnClickResult = _OnClickResult; | ||
|
|
||
| function _Calendar({ countOfMonth }: { countOfMonth: number }) { |
There was a problem hiding this comment.
요즘은 (_) 사용은 잘 안하긴해요. 같은 이름을 구분하려는 것이면 다른 이름으로~
| const state = useCalendarState(); | ||
| const { calendarList } = state; |
| <li>일</li> | ||
| <li>월</li> | ||
| <li>화</li> | ||
| <li>수</li> | ||
| <li>목</li> | ||
| <li>금</li> | ||
| <li>토</li> |
There was a problem hiding this comment.
월화수.. 반복이고 바로아래에서 또 사용하고 있으니,
동적으로 생성하는 코드로 변경해도 될 듯.
| function createDays(day: number): number[] { | ||
| const days = Array.from({ length: day }, (_, i) => i + 1); | ||
| return days; | ||
| } |
There was a problem hiding this comment.
이 함수는 렌더링될때마다 호출될까요?
그렇다면 매번 같은 결과를 만드는 경우도 있을까요?
문제가 발견되면 개선도 해보셔요~
| <DayWrapper> | ||
| <DayCircle | ||
| onClick={() => { | ||
| if (!onClickDay) return; |
There was a problem hiding this comment.
여기서도 optional chaining 문법이 가능할까요?
| import { MESSAGE } from "./constant"; | ||
| import { Calendar, OnClickDay } from "./type"; | ||
|
|
||
| export default function CalendarProvider({ |
There was a problem hiding this comment.
스스로의 컨벤션이 있으신것 같은데, 그냥 이건 취향문제인데요.
type, reducer 코드가 위쪽으로 오고,
컴포넌트 코드 중간에 자리잡고.
스타일은 맨 뒤로 가도 되고,
reducer의 경우 다른 파일로 분리하는 것도 좋고요. 커스텀 훅도 가능할테고.
그런 순서도 생각해보세요.
| const CalenderDispatchContext = createContext<Dispatch<Action> | null>(null); | ||
| const CalenderMethodContext = createContext<Method | null>(null); | ||
|
|
||
| function reducer(state: State, action: Action): State { |
There was a problem hiding this comment.
reducer 가 추가될 수도 있으니, 구체적인 이름으로 변경해보세요.
| case "MOVE_RIGHT": | ||
| newCalendarList.shift(); | ||
| newCalendarList.push(createCalendar(year, month + countOfMonth + 1)); | ||
|
|
||
| const nextDate = new Date(year, month + 1); | ||
| newCurrentDay.year = nextDate.getFullYear(); | ||
| newCurrentDay.month = nextDate.getMonth(); | ||
|
|
||
| return { | ||
| ...state, | ||
| calendarList: newCalendarList, | ||
| currentDay: newCurrentDay, | ||
| x: action.x, | ||
| }; |
There was a problem hiding this comment.
중복 코드 일부라도 함수로 분리해서 중복을 제거해볼까요?
Feat. useAxios 작업: api요청하여 요금데이터 받아옴
feat: 달력 UI 구현 중 & 폴더구조 변경 (#25)
[FE] 검색 fetch 요청, 응답으로 렌더링, 지도 api 사용, searchBar 요금 fetch 요청
UI
Calendar
중점적으로 리뷰 받고자 하는 부분
TypeScript
styled-components
표현식 vs 선언문