react4 [React] Windowing으로 렌더링 성능 최적화하기 최근 렌더링 이슈를 경험했었다. 수 천개쯤 되는 다수의 데이터를 한 번에 렌더링했기에 발생하는 이슈였다. 이 이슈를 통해 알게 된 Windowing 기법과, 이를 구현할 수 있게 해주는 라이브러리에 대해 기록한다.Windowing 기법이란? React 공식 페이지에서도 소개하고 있는 Windowing 기법이란, 간단히 말해 전체 목록의 일부만 렌더링하는 기법이다. 수백, 혹은 수천개의 항목을 한 번에 렌더링 하는 건 큰 부하를 일으킬 뿐더러, 페이지에 보이지 않는 요소까지 렌더링하는 경우가 많기 때문에 비효율적이다. 따라서 Windowing 기법은 화면에 보이지 않는 요소들을 렌더링에서 제외하고 일부만 렌더링함으로써 성능을 최적화할 수 있게 해준다. 사실 이 개념은 아주 어렴풋하게 알고 있었는데.. 2024. 6. 2. React-Query 찍어먹기 최근 React-Query를 쓰는 회사들이 꽤 많음을 짐작할 수 있었다. 마침 종종 참고하던 강의에 React-Query 내용이 있어, 강의를 듣고 간단히 써본 것을 정리한다. 강의는 Udemy의 React - The Complete Guide 2024를 시청했다. React-Query(Tanstack-query) : HTTP 요청을 보내고, 백엔드 데이터와 프론트엔드의 UI를 동기화하게 해주는 서버 상태 관리 라이브러리. 서버에 요청을 보내는 것은 굳이 이 라이브러리를 쓰지 않아도 가능하지만, React-query를 사용하면 간편함과 다양한 이점을 얻을 수 있음. ex) 코드 길이 감소, 데이터 변경 시 자동으로 새 데이터 fetch, 데이터 캐싱 등... React-Query에서 직접 HTTP 요청을.. 2024. 3. 4. [블로그 프로젝트] 0. 블로그 기획과 디자인 이전부터 나만의 블로그를 만들고 싶다는 생각을 갖고 있었다. 특히 웹 개발을 접하고 이 분야를 더 깊게 파고들고 싶다는 생각을 하고 나서부터 그런 생각이 더 깊어졌다. 새해도 되었고, 그동안 조금씩 계획하고 있었던 블로그 개발의 시동을 걸어야겠다는 생각이 들어, 이제껏 개인적으로 정리해두었던 기획과 디자인 아이디어를 올려보고자 한다. 기획 단계, 어떤 블로그를 만들지 정하기 기존 블로그의 단점? 우선, 현재 사용중인 티스토리 블로그에서 느낀 불편함을 나열하자면 아래와 같다. 나만의 디자인 적용의 불편함. 스킨 기능이 있으나, 100% 나만의 개성이 드러나는 디자인을 적용하기엔 불편함이 있는 느낌이다. 에디터의 문제. 특히 코드 등을 정리할 때마다 느낀 것이지만, 다른 블로그 플랫폼인 velog 등에 비해.. 2024. 1. 15. React Testing에 대하여 Udemy의 React - The Complete Guide 강의의 Section 27: Testing React Apps(Unit Tests)를 듣고 공부한 내용을 간략히 정리. Automating Testing (테스트 자동화) 테스트는 왜 해야할까? 개발자가 개발하는 도중, 수동으로 작동 등을 확인하는 것은 '수동 테스트(Manual Test)'이다. 다만, 테스트를 수작업으로 진행할 경우 가능한 모든 테스트 케이스(시나리오)를 테스트할 수 없기 때문에 예상치 못한 에러가 발생할 수 있다. 이에 반해, 자동화된 테스트는 모든 시나리오를 자동적으로 테스트할 수 있다. 개발자가 하나하나 손으로 하는 것보다 시간도 절약할 수 있다. 따라서 수동 테스트만 진행하는 것 보다, 자동 테스트를 같이 병행함으로.. 2023. 11. 22. 이전 1 다음
