[mobile] FE 패키지 마이그레이션 및 리팩토링 아이디어

[jaryapp]

FE 패키지 마이그레이션 및 리팩토링 아이디어를 남겨주세요~

[nohgijin]

next13 사용해보기!

[kingyong9169]

1. 렌더링 최적화하기(최대한 memo자제하여)
2. yarn 3 & Zero-Install로 모노레포 패키지 마이그레이션
3. yarn-plugin-workspace-since도입하여 CI/CD 최적화
4. 모바일 UX 개선(pull to refresh, 페이지 전환 애니메이션, 스와이퍼로 페이지 전환, 에러 메시지 및 토스트 메시지 내용 구체화 등)
5. MFA 도입해봐도 좋을 것 같아요!

[nohgijin]

mfa는 무엇인가요?

[kingyong9169]

Micro Frontend Architecture입니다~

[thdwlsgus0]

@kingyong9169

1번 같은 경우에는 렌더링 최적화하는 것도 좋겠지만
lighthouse나 performance 탭을 이용해서 파일 로딩과정에서 길게 네트워크 요청이 발생하는 지점을 찾아서 개선하는 방법도 좋아보입니다.

2번은 향후 적용할 next.js와 호환이 잘 되나요??

4번은 좋을 것 같아요! 저도 개선해보고 싶네요 ㅎㅎ

[kingyong9169]

1번 동감입니다!
2번 제 경험으로도 이상없고 많은 기업들에서 사용하는 것으로 알고있어요.

[nohgijin]

#650 (comment)

[thdwlsgus0]

개인적으로 컴포넌트 한 번 갈아엎었으면 합니다
컴포넌트를 재사용이 쉽도록 할 수 있는 기준이 있으면 좋을 것 같다는 생각을 했습니다!
next.js로 전환하는 시점에 이 부분도 논의해보면 어떨까 생각합니다.

[nohgijin]

동감하는바입니다아🥹👍

[kingyong9169]

접근성 개선도 해보면 좋을 것 같아요!

[thdwlsgus0]

@kingyong9169
혹시 접근성 개선이면 아래와 같은 부분들 중에 하나를 생각하시는건가요??

1. 보이스오버 테스트를 이용한 장애우분들까지 고려 (ex. blind 텍스트 제공, alt 텍스트 제공)
2. 시맨틱하게 웹 마크업
   • div와 span 도배가 아닌 다른 의미에 맞는 적절한 태그의 사용(ex. heading 태그 적절하게 사용, 무분별하게 strong, em 태그 사용 자제)

만약 위와 같은 접근성 개선 방식이면
한 번은 구체적으로 회의를 할 필요는 있어보입니다.
공통 컴포넌트에 대한 구분이 필요할 것 같고요~ 각 컴포넌트에 쓰임에 따라서 적절한 태그의 사용이 필요해보여서요!
혹시 다른 의견 있으시면 알려주시면 감사하겠습니다!

[kingyong9169]

말씀해주신 부분 둘 다 포함하는 것이였습니다! 추가로 div 태그에는 랜드마크 롤, 키보드 이벤트도 신경쓰면 좋을 것 같고 PC, 모바일 접근성 둘 다 대응해보면 좋을 것 같아요!

[thdwlsgus0]

충림이 끝나고 일의 우선순위를 정하면 좋을 것 같아요!
만약 새로운 기능을 출시해야한다면 그전에 마이그레이션 및 리팩토링 과정이 이루어지면 좋을 것 같아서요! ㅎㅎㅎ

많은 학습과 공부가 될 것 같습니다!

[nohgijin]

#858 (comment)
z-index의 값이 integer라 최대 2147483647여서 9단위로 적는다면 9/99/999 로 적어도 좋을 것 같습니당

https://www.codegram.com/blog/stop-ab-using-z-index/

[kingyong9169]

플록스도 유지보수할 수 있는 디자인 시스템을 만들면 좋을 것 같아요. Framer-motion, zeroheight 등등 고려해보면 좋을 것 같습니다!