리액트2 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28. [React] 리액트로 만드는 파일업로더 사내에서 그동안 FTP에 직접 붙어 이미지를 업로드한 후 파일서버 URL을 직접 적어서 채용공고 등 외부공유가 필요한 이미지파일을 사용해왔다. 이미지 하나 올리고 공유하는 절차가 너무 번거로웠다. (= 이제 이미지 파일을 사내채팅방에 돌림빵하지 않아도 된다) 예전부터 이 프로세스를 간소화 할 수 있는 웹을 만들어야겠다 생각 하던중 팀내 백엔드 개발자분과 소통하여 개발하기로 결정했다. 모습은 위와 같이 이미지 선택 -> 업로드 -> 이미지 URL 응답 -> 클립보드 API 가 전부라고 할 수 있겠다. 비록 작은 프로젝트지만 사내에서 유용하게 쓰였으면 하는 바램이다. 이번에 픽한 컬러는 #766EDA , #98D8F3 Custom Components 기능적인것 보다도 UX 관점에서 조금 더 신경쓴 프로젝트였.. 2022. 1. 6. 이전 1 다음
