패스트캠퍼스 환급챌린지 44일차 미션 (3월 15일) : 인터랙티브 웹 강의 후기

서론

웹 개발의 세계에서는 효율성과 성능이 매우 중요하다. 특히 React와 같은 프론트엔드 라이브러리를 사용할 때, 컴포넌트의 성능을 이해하고 최적화하는 능력은 사용자 경험을 크게 향상시킬 수 있다. 최근에 들은 두 강의, 'B컴포넌트 생성하기'와 'React Profiler로 성능 측정하기'는 이러한 컨텍스트에서 매우 유익한 시간이었다. 이 강의들을 통해 개발 과정에서 성능을 분석하고 개선하는 방법에 대해 깊이 있게 탐구할 기회를 가졌다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: B컴포넌트 생성하기
• 두 번째 강의: React Profiler로 성능 측정하기

첫 번째 강의: B컴포넌트 생성하기

이 강의에서는 이전에 구상했던 B컴포넌트를 완성하는 과정을 배웠다. B컴포넌트의 핵심 기능은 메시지 입력 시 p태그에 즉시 리렌더링되어 텍스트가 업데이트 되는 것이었다. 또한, API 요청을 통해 받아온 더미 데이터를 활용하고, 앱 전체를 세 개의 컴포넌트로 나누는 구조를 설계했다. 이 과정에서 사용된 기본적인 코드 예시는 다음과 같다.

이 간단한 컴포넌트는 메시지를 props로 받아 텍스트를 렌더링하는 역할을 한다. 메시지가 변경될 때마다 컴포넌트가 리렌더링되어 새로운 메시지를 보여준다.

두 번째 강의: React Profiler로 성능 측정하기

두 번째 강의에서는 React Profiler, 크롬 확장 프로그램을 설치하고 사용법을 익혔다. 이 도구를 통해 애플리케이션의 렌더링 성능을 측정할 수 있었다. 레코드 버튼을 누르고, 텍스트 업데이트와 같은 동작을 수행한 후, 정지 버튼을 눌러 해당 기간 동안의 컴포넌트 실행 속도를 분석했다. A컴포넌트와 B컴포넌트의 텍스트를 업데이트 시키며 성능 차이를 비교한 결과, A컴포넌트는 약 0.3ms, B컴포넌트는 2.2ms로 7배 이상의 차이를 보였다. 이러한 발견은 다음 단계인 React.memo를 활용한 성능 최적화의 중요성을 강조했다.

결론

'B컴포넌트 생성하기'와 'React Profiler로 성능 측정하기' 강의를 통해, React 애플리케이션의 성능 분석 및 최적화 기술을 배울 수 있었다. 이는 개발자로서의 성장뿐만 아니라, 사용자에게 더 나은 경험을 제공하기 위한 필수적인 능력이다. 앞으로 이 지식을 활용하여, 성능이 우수하고 유지보수가 용이한 애플리케이션 개발에 집중할 예정이다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N