CoStudo 프로젝트 3주차 주간 회고록 🙂

2022.09.26(월)

TIL 🧐

• 프로젝트
  • 전체 슬라이드 개수는 홀수(짝수)인데 slideToScroll은 짝수(홀수)인 경우 index 계산
  • arrows, slidesMargin, initialSlide 옵션 추가
  • Slide 사이 간격 슬라이드 계산
  • 슬라이드 중 버튼 throttle로 중복 클릭 방지
  • option 중에 number 타입 자연수 체크
  • slideLength 받아오는 로직 context 사용해서 변경
  • infinity: false 일 때 버튼 비활성화

주절주절 😗

슬라이드 많이 했다..!

슬라이더 옵션을 추가하면서 계산 로직을 추가하고, 슬라이드 개수를 slider에서 children의 children으로 계산하던걸 slider.list에서 children 개수를 context로 보내주는 식으로 바꿨다.
기존에 방식은 arrows 옵션이 없어서 slider의 자식이 list와 arrows이고, list 자식인 item이였는데 arrows 옵션이 추가되면서 arrows가 있을 때도 있고 없을 때도 있었다. 그래서 고민하다가 자식인 list에서 children 개수를 받는게 제일 안전해서 context와 reducer를 사용해 slider가 상태를 가지고 있고, 자식인 list가 mount되면 reducer로 slideLength를 업데이트 하고, list와 형제 관계인 arrows에서 slideLength 상태를 사용할 수 있게 수정했다. 변경할 상태가 currentIndex 밖에 없어서 useState로 했었는데 reducer로 변경하면서 오랜만에 타입스크립트의 고통을 맞봤다. 휴ㅠ

const reducer = (state: SliderContextValues, action: SliderAction) => {
  const { type, payload } = action;

  switch (type) {
    case 'UPDATE_CURRENT_INDEX':
      return { ...state, ...payload };
    case 'SET_SLIDES_LENGTH':
      return { ...state, ...payload };
    default:
      return state;
  }
};

...

const SliderList = ({ children, ...props }) => {
  const [
    {
      options: { slidesMargin },
    },
    dispatch,
  ] = useSliderContext();

  useEffect(() => {
    dispatch({
      type: 'SET_SLIDES_LENGTH',
      payload: { slideLength: children.length },
    });
  }, [dispatch, children.length]);

default props

오늘 eslint에서 옵셔널 props에 default props를 사용하라고 계속 경고를 뿜어댔다.

const Slider = ({
  children,
  options = defaultSliderOptions,
}: PropsWithChildren<SliderProps>)

그래서 default prop말고 이런 식으로 설정을 해줬는데도 계속 에러가 떴다 휴 ㅠ
default prop은 함수형 사용하면서 잘 사용안해서 고민하다 일단 옵션을 off했다.
그런데 햄디도 같은 고민을 겪고 있어서 discussion에 해당 문제를 올렸다. 나는 default prop은 있어야한다고 생각한다. 오늘 보니 옵셔널로 설정한 prop을 사용하여 계산하는 로직이 있는데 해당 부분에 default prop을 실수로 설정하지 않으면 NaN 에러가 뜰 것이다. 때문에 내 생각을 좀 더 자세히 discussion에 남겼다. 내일 다른 사람들과도 토론해서 정해봐야겠다.

아쉬워요 🙁

오늘 친구 집에서 밥을 먹느라 늦게 시작했다ㅠㅠ
내일 리액트 스터디라 공부도 해야하는데 큰일이다 😇

잘했어요 🙂

그래도 생각보다 슬라이드를 꽤 했다.
햄디가 올린 discussion에도 1등으로 답을 달았다ㅎ

2022.09.27(화)

TIL 🧐

• 리액트 스터디 - 최적화

주절주절 😗

리액트 최적화의 기준은 뭘까?

오늘 리액트 스터디에서 최적화를 공부했다. 최적화라하면 useMemo, React.memo 이런게 나올 줄 알았는데 프로덕션 모드로 빌드하는 거, react-window라고 긴 목록 페이지에 무한 스크롤처럼 현재 보여지는 window 기준으로 화면이 렌더되는 라이브러리, shouldComponentUpdate(React.memo) 등 방식이 적혀있었다. 그러다 메모이제이션이 최적화 방식이면 모든 컴포넌트를 다 메모이제이션 하면 되는거 아닌가라는 생각이 들었다. 메모이제이션을 반대하는 사람들은 메모리를 많이 사용하는게 안좋다고 말하지만 요즘 컴퓨터들도 많이 업그레이드 되서 메모리 평균 수준이 올라갔는데 괜찮지 않을까 생각이 들었다. 그렇게 말했더니 햄디가 컴포넌트를 전부 메모이제이션할지 안할지 토론하는 글도 있다고 말헀다. (내일 어디서 봤는지 물어봐야지) 근데 컴퓨터 사양이 좋아진만큼 브라우저도 빨라졌기 때문에 메모리보다 브라우저 렌더가 나으려나 싶기도 하다. 사실 이게 딱 정확히 속도에 관한 수치가 정해져있는게 아니다 보니 성능체크를 직접 해보면서 해야해서 react dev tool이 나온게 아닌가 싶다. 일일히 성능체크를 해보면서 하는거도 시간이 드는 일인데.. 변화가 빠른 프론트에서 최적화는 꼭 필수인가 라는 생각도 든다.

아쉬워요 🙁

오늘 몸에 좀 힘이 없고 하루종일 졸려서 햄디랑 제이미한테 양해를 구하고 스터디를 밤으로 미뤘다. 착한 햄쨈 🥹
때문에 리액트 스터디 끝나고 플젝 좀 하려고 했는데 내일 해야할거 같다.
오늘 좀 일찍 자고 내일 일찍 깨봐야지!

잘했어요 🙂

리액트 최적화 단순히 공부하지 않고 생각을 뻗어보았다.

2022.09.28(수)

TIL 🧐

• 프로젝트
  • tsconfig UMD global 이슈
  • React.FC 타입의 장점과 써야할까 고민
  • interface vs type 및 성능 차이
  • useReducer에 initialState never로 지정되는 오류

주절주절 😗

힘들지만 재밌는 토론

오늘 discussion 토론이랑 햄디 PR을 하느라 내 코드는 밤이 되서야 시작했다.ㅎ
질문과 다른 사람 답변들을 이해도 하고 공부하면서 답을 달다보니 오래걸렸다. 그래도 오늘 몰랐던걸 많이 알게되서 좋았다.ㅎㅎ
근데 햄디가 discussion을 적극적으로 올려서ㅎㅎ 내 고민들도 올려도 되나 싶다.ㅎㅎ;
코드에 대한 고민들은 그냥 PR로 보내는게 낫겠지? 오늘 PR보내려고 했는데 children에 prop 넘겨주는 씨름과 useReducer 오류, 리팩토링 등등 했더니 새벽이 되버렸다.
PR에 고민들도 적어야해서 내일 오전에 보내야할거 같다 ^_ㅠ

아쉬워요 🙁

기능 구현한건 없는데 리팩토링하고 실패하고, 이전께 낫나 싶어 되돌리기도 하고 했더니 생각보다 오래걸려버렸다 ^_ㅠ

잘했어요 🙂

오늘 공부 많이 한거 같아 기분 좋다. 낮에 맨날 졸려서 고생했는데 오랜만에 나가서 했더니 그런거 같다. 내일도 나갈까 싶기도하고..?

2022.09.29(목)

TIL 🧐

• 프로젝트
  • React children에 prop 넘기기
  • React children 중에 원하는 children 찾기
  • context 리렌더링 최소화

주절주절 😗

리팩토링의 늪

어제 PR을 못보내서 오늘 리팩토링 마저하고 보내려고 했는데 리팩토링의 늪에 빠져버렸다.
useState로 했다가 children에게 prop으로 넘겨줬다 context로 바꿨다가 @_@
뭘해도 맘에 안들고 변수명도 맘에 안든다. 코쿼때 걸렸던 내 코드 구려병이 다시 올라오는 듯하다. ^_ㅠ
하지만 결국 PR보냈다..! 파크가 지난 주에 완성해보자 그랬는데 다들 이번 주에 거의 완성했다 ㅋㅋㅋ
파크 빼고는 headless 공부가 많이 안되있고 고민을 많이 하는 스타일이기도 하다. 또 중간 중간 토론도 많이 하느라 (그 덕분에 공부와 코드 스타이이 정해져가고 있다.) 늦어진거 같다.
초반이니 다들 적응하면 더 빨라질거 같다!

아쉬워요 🙁

오늘 Text 컴포넌트도 설계해보려고 했는데 PR만 보내고 마무리다ㅠㅠ
내일은 제이미 PR 리뷰 달고 discussion에 올라온 글 피어세션 때 정리해보자고 해야겠다.

잘했어요 🙂

그래도 Slider PR(#32) 보냈고 고민 사항도 잘 적어봤다. 혼자만 PR이 너무 긴가 싶지만 내 파일은 양이 많아 약간 위주로 봐줬으면 하는 것들을 적었다.
확실히 코쿼 초반보다는 PR을 좀 정리해서 보내는거 같다. 이것도 늘긴 늘었네ㅎ