[ FE ] [ DDeong ] 월, 화 진행 사항

[jjunyjjuny]

진행 사항

협업룰

• 네이밍, 커밋규칙, 브랜치, 이슈, 기타 등등 협업 룰 작성

Feature List 설계

• 컴포넌트 트리 및 기능 정리.
• 구성 중 공통에 해당하는 Card, Badge, Carousel을 먼저 작업 진행 중

회고

Seong

• 평소에 CSS를 정리하는 걸 귀찮아하고, 협업 때도 남한테 미루기만 했었는데 결국 대가를 치르게 되었다. 디자이너 분이 피그마로 다 정리 해줬음에도 불구하고 맘처럼 쉽게 되지 않는다. 그래도 이번 기회로 styled-component를 더 잘 다루게 될 것 같아 다행이다.
• 또 CRA로 만든 구성은 다 의미가 있다는 걸 배웠다... index.html나 public 폴더 수정했다가 곤욕을 치뤘다. entrypoint? 리액트가 렌더링하는 방식을 알았다면 헤매지 않았을텐데 더 공부해야겠다.
• 지금은 백엔드 부분을 애써 무시한 채 진행 중인데 Oauth가 어떤 친구일지 두려워진다.

DD

• Carousel을 만드는 중인데, React에서 범용성 있는 컴포넌트로 만들려다 보니 생각보다 고려해야할 요소가 많았다.

• 가장 고민하고 있는 부분은 '한 번 렌더링 된 DOM을 계속 유지할 것인가?'이다.

• 결론적으로 현재 작업하고 있는 방향은 최초에는 하나의 list만 렌더되며, 렌더링한 DOM을 유지한다 이동 방향에 이미 렌더했던 DOM이 있다면 리렌더링 없이 translate만 변경한다. 더 이상 DOM이 없다면 새로운 DOM을 렌더해서 추가하거나, 반대편 요소를 옮긴 후 translate한다.

• lazy loading과 흡사한(?) 방식으로 만들어보려고 하는데, 아직 완성되지 않고 여러 문제가 있다..

• 이전 쇼핑하우에서는 보여지는 visiable 영역과 양쪽 hidden 영역 총 3개의 아이템이 렌더된 상태에서, 이동할 때 마다 반대편 요소는 지우고, 이동 방향에 새로운 아이템을 추가한 후에 translate를 이동시키는 방식이었다.

• 이 방식은 DOM Tree에 3개의 요소만 남게 되는데 캐로셀을 반대방향으로 넘기면 아까 렌더링했던 아이템을 다시 렌더링해야한다는 불필요한 렌더?가 발생하는 것 같다.

• 예를 들어 1,2,3에서 오른쪽으로 이동하면 2,3,4가 되며 1이 DOM Tree에서 사라지는데, 다시 왼쪽으로 이동하면 1, 2, 3이 되기 위해 1을 다시 렌더링해야 함.

• 그렇다고 한 번에 모든 list를 다 렌더링하는건 별로! 아직 진행중이니 내일까지 의도한대로 동작하게 만들어볼 예정.

질문

DD

• DOM Tree에 3개만 남기고 이동할 때 마다 필요한 item을 추가/삭제하며 렌더링 하는 방식과, 한 번 렌더링 한 item은 계속 유지시킨재로 translate하는 방식 중 어떤게 더 안티패턴일까?하는 궁금증이 있습니다.
• 전자는 만들기 좀 더 편하지만 "리렌더링"이라는 행위가 더 자주 일어나는 단점이 있고, 반대로 후자는 "리렌더링"은 덜 하지만 overflow에 가려질 뿐, 사용할 수록 많은 DOM이 존재하는 상태로 translate되는 단점이 있습니다.
• 둘 다 만들어보고 성능체크를 해야하겠지만, 막상 하다보니 후자의 경우도 소스를 많이 먹을거 같다는 느낌이 들더라구요..

[crongro]

Feature List 설계

깃헙 이슈에 '할 일'을 생각나는 대로 다 올리고,
이번주에 할 것만 milestone으로 정의하는 것도 좋죠.

현업에서는 백로그는 엑셀형태로 정리하기도 합니다.

[crongro]

수고하셨습니다.

벌써 carousel도 만들어보시고!

[crongro]

아시겠지만 async 함수를 사용하시고, try-catch 도 사용하면서 에러처리까지 해보세요.

[crongro]

이런 로직이 지금수준보다 더 복잡해지면 jsx밖으로 옮기는 것도 좋아요.

[crongro]

단축표기법을 사용하세요.

[crongro]

들여쓰기가 이상한데 포매터가 이렇게 해준건가요?

[crongro]

theme로 이런 값을 정의해두는 건 어때요?

아니면 객체형태로..mapping해두고 사용하던가요.

[crongro]

이렇게 해도 동일한 코드겠죠?

if (dir === "prev") currentSlideIndex.current -= 1;
else currentSlideIndex.current += 1;
direction.current  = dir;

[crongro]

transition 을 사용하면 애니메이션이 되는데 왜 keyframe으로 조절하시는 건가요? (궁금)

[jjunyjjuny]

@crongro

1. 현재 로직은 < 으로 이동했을 때 해당 요소가 있다면 Ref의 translate를 변경시켜 렌더없이 슬라이드 됩니다.
2. < 으로 이동할 때 해당 요소가 없다면 렌더링해서 추가해야하는데, 이 때 translate값이 -100%인 상태로 렌더가 되고, 렌더가 끝나면 translate를 0로 변경시키며 슬라이드가 실행됩니다.
3. 여기서 기본적으로 -100으로 렌더하고, 렌더가 끝나면 0으로 되돌리기 로직을 할때 transition을 사용하면
   첫 번째 문제는 -100으로 렌더할 때도 애니메이션이 적용되는 문제가 첫 번째(transition:'none'으로 껐다켰다 하는 로직이 추가 됨),
   두 번째 문제는 "렌더링이 끝나고 translate를 0으로 돌리는 로직"을 useEffect로 할 것인가, 적당히 1초 후에 실행되는 비동기 코드를 쓸 것인가(내키지 않음)하는 문제가 있습니다.
4. keyframe을 사용하면 "렌더 된 후 -100에서 0으로" 이동을 한 번에 처리할 수 있을거 같아서 적용하려 했습니다만...

또 다른 문제로 리액트가 상위 container를 렌더링하지 않는 효율성을 발휘해준 덕분에 최초 렌더에만 keyframe이 걸리고 이후에는 실행이 되지 않는건지?? 알 수 없는 문제가 발생했습니다.
디버깅을 해보니 keyframe 호출 함수가 실행되는건 확인했는데, 처음에만 슬라이드가 되고 두 번째 클릭부터는 실행만 되고 애니메이션이 적용되지 않아서 결국 transition, useEffect를 사용했습니다. 다만 내키지 않네요.. ref의 style을 직접 조종하는 로직이라 뭔가 리액트답지 않달까 ..

[crongro]

단축표기법을 사용하세요.

[crongro]

10px을 계산에 의해서 입력가능할까요? 변경되는 값 같아서 계산되어지면 더 좋을 듯.

[crongro]

CRA를 사용했는데 webpack 설정이 어떤 이유로 있는건가요?