💡 프론트엔드 개선점 아이디어?

[woohm402]

SNUTT-WEB 코드 및 깃헙 세팅 등등을 보면서 이런 거 하면 좋지 않을까 싶었던 것들 정리해봤습니다. 생각날 때마다 추가해 볼게요!

코드 레벨

하면 좋겠다 싶은 거

• 🚸 SSR적용
• 🚨 린트 규칙 조금 더 엄격하게 & fix
• 🔥 React.FC 제거 & 금지 (참고: Remove React.FC from Typescript template facebook/create-react-app#8177)
• 🧪 e2e 테스트코드 작성 (cypress?)
• 🧪 ui 테스트코드 작성 (storybook?)
• 🧪 계산로직 & 비즈니스로직 테스트코드 작성 (jest?)
• ➖ 불필요한 패키지 제거 (qs 등)
• 📦 패키지 업그레이드
• 🤡 msw 셋업

개인 취향

• 🧑‍💻 폴더 구조 react 진영에서 많이 쓰는 형태로 변경 (pages / components)
• 🧱 yarn berry 으로 마이그레이션
• 🧱 yarn berry zero-install 로 마이그레이션

개선 필요

• ♻️ ev 로 쏘는 거랑 snutt 로 쏘는 거랑 axios instance 분리

세팅

깃헙

• 🧱 브랜치 자동 제거

[davin111]

@woohm402 SSR 적용은 무엇 때문에 장점이 있다고 생각했나요?

[woohm402]

@davin111 이 스레드에서 했던 얘기랑 같은 얘기긴 한데,

현재 CSR에서

1. html 다운로드
2. js 다운로드
3. js 수행
4. validation api 호출
5. api 응답
6. 리액트 렌더
7. 브라우저 렌더
8. FCM (사용자에게 보여지는 시점)

이 순서라 FCM이 후순위로 밀려있어서 사용자가 좀 느리다고 느끼는데,

SSR에서는

1. validation api 호출
2. api 응답
3. 리액트 렌더
4. html 다운로드
5. FCM (사용자에게 보여지는 시점)
6. js 다운로드
7. js 수행
8. 브라우저 렌더

이 순서로 할 수 있어서 (물론 위 프로세스기 100% 동기적이진 않고, 일부 평행하게 진행되긴 함. 이 과정은 복잡해서 설명 생략)

사용자가 느리다고 느끼지 않도록 방지할 수 있다고 생각했습니다!

[woohm402]

코드 체인지도 30줄 이내로 가능할 것 같아요. 많으면 50줄?

[woohm402]

#99

[woohm402]

호호 storybook 빼고는 다 했군요 결국