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

서론

웹 개발을 배우는 과정에서 실질적인 개발 스킬뿐만 아니라, 그 과정을 통해 얻는 인사이트와 지식이 중요하다. 최근에 진행한 두 강의, ‘React Profiler’와 ‘Profiler 성능 측정을 위한 앱 생성하기’는 React 애플리케이션의 성능 최적화와 디버깅에 대해 깊이 있게 다루었다. 이 두 강의를 통해 React 애플리케이션을 개발하면서 마주칠 수 있는 성능 이슈를 해결하는 방법에 대해 배우는 귀중한 시간이었다.

본론

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

첫 번째 강의: React Profiler 두 번째 강의: Profiler 성능 측정을 위한 앱 생성하기

첫 번째 강의: React Profiler

React Profiler 강의는 React의 성능 분석 도구인 React Profiler에 대해 소개하며 시작했다. 기대했던 것은 이 도구를 이용한 심도 있는 분석과 디버깅 방법에 대한 것이었으나, 실제로는 React 애플리케이션에서의 데이터 페칭과 이를 이용한 디버깅 프로세스 구축에 더 초점을 맞췄다. 강의에서는 Jsonplaceholder라는 무료 API 서비스를 이용하여, 데이터를 쉽게 가져와서 테스트하는 방법을 배웠다. 간단한 코드 예시는 다음과 같다.

이 코드는 React의 useEffect 훅을 이용하여 컴포넌트가 마운트될 때 데이터를 가져오고, useState의 setter 함수를 통해 상태를 업데이트하여 리렌더링되도록 하는 기본적인 패턴을 보여준다.

두 번째 강의: Profiler 성능 측정을 위한 앱 생성하기

두 번째 강의에서는 두 가지 컴포넌트를 동시에 렌더링하면서 그들 사이의 성능 차이를 비교하는 앱을 만드는 과정을 배웠다. 특히, 데이터를 가져와 화면에 텍스트 리스트로 출력하는 컴포넌트와, 상단에 텍스트 입력 상자를 두어 입력될 때마다 실시간으로 두 컴포넌트 모두를 리렌더링하는 로직을 구현하는 방법을 학습했다. 아직 B 컴포넌트의 구현이 완료되지 않았으며, 그 부분은 다음 강의에서 다루기로 했다. 이러한 실습을 통해 실시간 데이터 처리와 컴포넌트의 성능 최적화에 대한 중요성을 배울 수 있었다.

결론

‘React Profiler’와 ‘Profiler 성능 측정을 위한 앱 생성하기’ 강의를 통해, React 애플리케이션 개발에 있어 성능 최적화와 디버깅 기술을 배웠다. 이론적 지식과 실질적인 코드 작성을 병행하며, 효율적인 웹 애플리케이션 개발을 위한 실용적인 접근법을 익힐 수 있었다. 앞으로 이 지식을 바탕으로 더 나은 사용자 경험을 제공하는 애플리케이션을 만드는 데 큰 도움이 될 것이다.

 

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

https://bit.ly/48sS29N