[TIL] 23.01.17 프리온보딩 챌린지 3회차

• 한 번쯤은 build한 결과물을 열어서 내가 작성한 코드가 어떻게 변환되어 있는지 확인해보자.
• 프론트엔드 또한 인프라 환경에 관심을 가져야 한다. 특히 웹 서비스의 많은 부분이 컨테이너 기반으로 돌아가기 때문에 도커는 언제든지 공부해두면 무조건 도움이 된다!
• redux는 flux 패턴을 자바스크립트로 표현한 구현체라고 생각하면 된다.
• redux-thunk는 까보면 53줄 밖에 안된다.(코드 보기 전부터 겁먹지 말자)

 

• React Query뿐만 아니라 SWR 등의 캐시 패러다임의 라이브러리들이 채택하고 있는 전략이 stale-while-revalidate이다.
• stale-while-revalidate로 최신 상태 유지(꼭 읽어보기)
• stale-while-revalidate는 1) 캐시된 응답이 오래될 수도 있다고 가정하는 부분과 2) 캐시된 응답을 재검증하는 프로세스로 나뉜다.

Cache-Control: max-age=1, stale-while-revalidate=59

• 1) Cache-Control 헤더의 max-age를 확인해서 아직 만료되지 않았으면 아무것도 하지 않는다.
• 2) 만료되었다면 stale-while-revalidate 값을 확인하고, 해당 값을 넘지 않았다면 일단 캐싱된 값을 반환한 후 동시에 향후 사용을 위해 데이터를 요청해 최신화한다. 값을 넘었다면 데이터를 새로 요청해서 최신화한다.

 

• UI/UX를 잘 고려하자.
• alert는 닫힐 때까지 메인 스레드가 정지되기 때문에 다른 상호작용이 불가능해진다. -> 잘쓰자.
• 로딩 표시를 한다고 무작정 isLoading && <Component /> 하게 되면 로딩 과정동안 레이아웃이 불안정하게 변화할 수 있다(-> Layout Shifting. 실제로 겪어보면 진짜 짜증남). 영역을 미리 잡아놓고 Spinner를 렌더링하면 좋다.
• 수정, 삭제, 제출에 대한 확인 처리를 잘 하자.
• 파괴적 버튼: 탈퇴, 삭제, 취소 등 되돌리기 어렵거나 불가능한 경우에 파괴적 버튼을 사용하는 것이 좋다. 일반적으로 Dialog를 출력하고 빨간색 레이블처럼 해당 동작의 중요도를 선명하게 알려줄 수 있는 색상의 버튼을 배치.
• 방어적 버튼: 게시물 작성 등 최종적인 동작을 결정하는 버튼은 우측 상단처럼 일반적으로 브라우징을 하다가 사용자가 실수로 클릭하지 않도록 누르기 힘든 위치로.
• onbeforeunload: 입력이 많은 form등이 있는 페이지에서 사용자가 입력하다가 실수로 뒤로 가기를 할 경우 "정말로 이동하시겠습니가?" 경고 창을 띄워주는 것이 좋다.
• 내부 컨텐츠가 넘칠 경우 overflow, ellipsis 등 처리를 잘 해주자.
• 의미 단위로 컴포넌트와 커스텀 훅을 끊는 연습을 하자.

 

• 읽어보면 좋을 내용
• https://web.dev/stale-while-revalidate/
• onbeforeunload 관련 링크 1, 링크 2
• https://toss.tech/article/smart-web-service-cache