2025/01/15 3

🚀 프론트엔드 성능 개선 가이드 #1. React DevTools 컴포넌트 & 프로파일러 기능 활용

왜 이걸 써아함?저는 평소에 웹 개발(프론트 개발)을 할때면 에러가 발생하거나 콘솔에다가 찍어 디버깅을 해볼때 개발자 도구에 많이 들어갑니다.개발자 도구에서 여러 DOM 요소를 관찰해서 스타일링 할때 참고한다거나 등등 하는데 생각보다 그렇게 편리하게 모든 것이 다 보이진 않았습니다.  프론트엔드 개발 시 성능 이슈를 빠르게 찾아내는 것은 최적화를 위한 필수 단계입니다. Chrome React Developer Tools는 React 컴포넌트 트리와 렌더링 동작을 시각화해 성능 병목을 손쉽게 파악할 수 있는 강력한 도구입니다. 이번 포스팅에서는 React DevTools의 컴포넌트 및 프로파일러 기능을 활용해 성능 문제를 분석하고 최적화하는 방법을 다룹니다. 1. React Developer Tools 설..

FrontEnd Develop 2025.01.15

🎬 추락의 해부, 유죄 혹은 무죄

🎬 작품 개요 • 감독: 쥐스틴 트리에 • 장르: 드라마 / 법정 스릴러 • 출연: 산드라 휠러, 사무엘 테이스, 밀로 마차도 그라너 • 수상: 제76회 칸 영화제 황금종려상 수상 칸 영화제의 황금종려상을 수상했다는 소식을 듣고 개봉 당시 거의 바로 봤던 영화입니다.영화를 보고 좋았던 기억이 흐릿해질 듯 하여, 기록을 남기고 싶어 남깁니다. 📖 줄거리 소개 프랑스 알프스에 있는 외딴 산장, 작가 산드라와 남편 사무엘은 평화로운 듯하지만 미묘한 긴장이 감도는 부부였습니다. 그러나 어느 날, 남편 사무엘이 산장 2층 창문 아래로 추락해 숨지는 사건이 발생합니다.사고일까, 아니면 살해일까? 경찰은 사건 당시 현장에 있던 산드라를 용의자로 지목합니다. 유명 작가이자 독립적인 여성인 산드라는 법정에서 자신을 ..

Cinema_Review 2025.01.15

📚 React Query, 과연 써야 하는가? 그리고 구조분해할당 친절한 분석

🔍 서론React Query는 클라이언트 애플리케이션이 서버와 통신할 때 데이터 페칭, 캐싱, 동기화 및 상태 관리를 단순화하기 위해 개발된 라이브러리입니다.이번 포스팅에서는 **“왜 React Query를 사용하는가?”**라는 질문을 시작으로, 기존 방식과 React Query 방식의 코드를 비교하여 개선된 부분을 설명하겠습니다. 아래의 코드는, 패션 아카이브 프로젝트에서의 서버 통신시에 기존에는 React Query를 쓰지 않고 그냥 axios로 처리를 하는 법과, React Query를 써서 서버와의 통신을 할때의 차이점을 공부한 내용입니다. 모든 코드가 아닌 핵심 코드만 넣겠습니다 ( 보시는 분의 가독성을 위하여,,) 1️⃣ 기존 코드 리뷰 🔧 기존 코드 (Axios + useEffect 방식..