[React]UX, 최적화

UX

사용자가

• 사용하기 익숙한 형태로,
• 로딩 지연시간이 최대한 짧게,
• 사용하기에 불편함이 없도록(응답이 안됨. 알림 메시지가 안떠서 진행상황 전혀 알 수 없음, 취소 버튼 없음...),
• 더불어 사용하기 편하도록(입력 마쳤을 때 자동으로 다음 입력란으로 포커싱 혹은 페이지 넘김, 한 눈에 파악하기 편한 UI ...)

서비스를 지원해야 한다.

코드를 가볍게

• 코드를 가볍게 하기 위해선 역시 코드양을 줄이는 게 최고다!
  - 그렇다고해서 코드를 너무 압축해서 다른 사람이 코드를 알아보지 못한다면 안된다.
• 안쓰는 CSS 정리는 꼭 해주자
• 번들링할 때 minimize해주자

코드 스플리팅

• 코드 스플리팅 => 하나의 파일로 번들링x 특정 기준에 따라 몇 개로 나눠서 파일을 번들링,실제로 사용될 때 쪼갠 것을 로딩하도록 해서 초기 로딩 시간이 너무 길어지지 않도록 함.
• 코드가 하나의 js파일로 번들링이 되어 있으면 초기 로딩시간이 길어지므로 당연히 좋지않음.
• 방법1) React.Lazy 사용(SSR에도 곧 도입된다고 문서에 적혀있음)
• 방법2) 동적 import 사용
• 방법3) webpack을 이용한 코드 스플리팅
• 코드 스플리팅 가장 간단한 기준 => 페이지 별로 나누기

SEO(Search Engine Optimization)

• 구글 서치봇 => 웹 페이지를 크롤링해서 검색할 때 사용함. 그러면 웹 사이트가 검색엔진의 상단에 뜨게하기 위해서는 봇이 크롤링을 잘 해갈 수 있도록 해주어야 함
• 메타 데이터, 타이틀을 페이지별로 잘 뜨게 해주자. - React의 경우 React Helmet을 이용해 각 페이지 별로

SSR(ServerSide Rendering)

• SPA의 경우 SEO 최적화가 힘듦. 그럼 페이지를 만들어서 응답하는 서버사이드렌더링을 사용해 meta, title,...을 페이지별로 잘 작성해서 크롤링이 잘 되도록 도와주면 좋겠다.
• React만으로도 SSR은 가능하지만, 사용하기 불편.
• SSR 프레임워크인 Next.js를 사용해보자
• Next.js의 특징
  - 직관적인 페이지 기반의 라우팅 시스템(+다이나믹 라우트 제공)
  - 프리렌더링이 지원됨.
  - 자동적으로 코드 스플리팅(페이지 뼐로 코드스플리팅. 더 빠른 페이지 로딩 지원)
  - Built-in CSS, Sass , CSS-in-JS 지원
  - 서버리스 기능으로 API 엔드포인트를 구축하는 API 라우팅

캐싱

• 수많은 요청과 응답.
• 모든 요청에 일일히 응답을 해주면 사용자 수가 적을 땐 괜찮을 수 있어도 사용자 수가 일정 수준 이상으로 많아지면 응답이 많이 지연될 수 있다.(모든 요청을 일일히 처리하고 응답해주어야 하기 때문에 처리하는데 시간이 많이 걸려 응답시간이 지연된다.)
• 사용자가 자주 요청하는 것은 캐싱해놓고 같은 요청일 경우 캐시에 저장된 내용을 반환해준다.(서버로는 요청x) 그러면 서버로 향하는 요청 수가 적어져 응답 할 거리도 적어지니 응답시간 지연률이 적어짐.
• http통신을 할 경우 GET 요청은 기본적으로 캐시를 사용한다.