개발

선언형 프로그래밍과 명령형 프로그래밍 (feat. React 18 Concurrent Mode)

선언형React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) 리액트 공식 홈페이지에서 React는 선언형 라이브러리로 소개되었다. 프로그래밍에서 선언적이라는 것이 어떤 것을 의미할까? 프로그래밍 패러다임프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해 주고, 결정하는 역할을 한다. 대표적인 프로그래밍 패러다임으로는 객체지향 프로그래밍, 함수형 프로그래밍 등이 있다...

[AlgoITNi] 홈 화면 성능 개선하기: 7. 최종 결과

앞서 했던 다양한 최적화의 적용 결과는 위와 같다. 같은 조건에서 여러번 테스트 했을 때 프로덕션 최고 점수는 아래와 같다. 최종결과 최종적으로 아래와 같은 개선 결과를 얻을 수 있었다. 개발환경 성능 점수: 56 → 68 (약 21% 개선) 프로덕션 성능 점수: 79 → 평균 90 (약 14% 개선) 아쉬운 점 마지막 까지 해결하지 못한 부분은 LCP와 관련된 부분이다. 로드 지연을 줄여볼 수 있었지만 렌더링 지연의 경우 JS의 실행에 걸리는 시간 때문이라 생각한다. (주의: 잘못되었을 수 있음) 개발자 도구의 Performance 탭을 보더라도 특별히 병목이 발생하는 부분을 찾을 수 없었다. 지금까지 다양한 최적화 기법을 사용해볼 수 있었으며 목표했던 평균 90점을 달성할 수 있었다. 마치며 마지막으..

[AlgoITNi] 홈 화면 성능 개선하기: 6. 코드 스플리팅 (3)

문제점 많은 코드들을 분리했지만 아직 uuid가 함께 다운로드 되고 있으며 Home에 의해 다운로드 되고 있는 파일 중 가장 큰 크기를 차지하고 있다. 현재 홈에서 uuid가 필요한 경우는 방생성 버튼을 클릭했을 때 밖에 없다. 따라서, 버튼을 눌렀을 때 uuid와 관련된 코드를 받을 수 있도록 분할해본다. // Home.tsx import { v4 as uuidv4 } from 'uuid'; const handleMakeRoomClick = () => { const roomId = uuidv4(); navigate(`/${roomId}`); }; 방생성 현재 코드 상태이며 파일의 최상단에서 uuid 라이브러리를 import 하고 있다. 개선 후 // Home.tsx const handleMakeRoom..

[AlgoITNi] 홈 화면 성능 개선하기: 5. 코드 스플리팅 (2)

문제점 앞에서 결론으로 필요 없은 JS의 양을 더 줄여야 이미지의 렌더링 개선이 이루어 질 수 있을 것이라 판단했다. 따라서, 현재의 Home에서 더 줄일 수 있는 JS 코드가 있는지 확인해봤다. 이전에 코드 스플리팅을 한 번 수행했지만 여전히 Home에서 필요없는 파일들이 다운로드 되고 있었다. 좌측의 사진에서 우측의 사진을 제외한 부분은 Home에서 필요하지 않은 파일들이다. 대표적으로 Home 컴포넌트에 필요없는 모달 관련 코드가 있다. import { lazy, Suspense } from 'react'; import ReactDOM from 'react-dom/client'; import { QueryClientProvider } from '@tanstack/react-query'; import..