본문 바로가기

트러블슈팅(Trouble Shooting)

[트러블슈팅] 첫 페이지 로딩 시간 지연 - 아리아
[트러블슈팅] 첫 페이지 로딩 시간 지연 - 아리아 2024. 3. 30. 💣 문제 발생 일러스트 학원이라는 특성 상, 이미지 자료가 많다 보니 처음 사이트를 입장할 때 첫 페이지 로딩 시간이 길어지는 문제가 발생했다. 🎯 개선 방향 React는 싱글 페이지 애플리케이션(SPA, Single Page Application) 방식이기 때문에 일반적으로는 모든 컴포넌트를 읽고 난 후에야 첫 페이지를 로드하는데 아마, 이것 때문에 로딩 속도가 늘어난게 아닐까 한다. 그래서 생각한 방법이 react-router-dom에 존재하는 lazy() 함수를 사용하기로 결정했다. lazy() 함수는 컴포넌트를 동적으로 로드할 수 있게 도와주는 함수이다. ✅ 개선 결과 lazy() 함수를 사용함으로써 모든 페이지가 아닌 해당 컴포넌트만이 로드되게 하여 첫 페이지 입장 시 로딩 시간을 크게 단축시키..
[트러블슈팅] 컴포넌트 요소 언마운트 이벤트 - 아리아
[트러블슈팅] 컴포넌트 요소 언마운트 이벤트 - 아리아 2024. 3. 29. 💣 문제 발생 강사 페이지 배너 이미지의 슬라이드 애니메이션을 일반적으로 사용되는 옆으로 넘기는 효과가 아닌 서서히 fade-out 되며, 다음 이미지가 fade-in 되는 방식을 사용하기로 결정. 처음엔 이미지들을 동일한 div요소 안에 모두 넣어 visibility속성을 hidden으로 맞추고 state값에 따라 이미지가 나타나도록 설정했다. 그렇게 호기롭게 나는 하나의 state값에 현재 나타나야하는 이미지의 정보를 넣어주며, 이 상태값에 해당하는 이미지만 fade-in애니메이션을 주고 나머지 이미지를 fade-out 애니메이션을 주어 완벽하게 구현하나 싶었는데... 엥?! 이렇게 하니 이미지가 나타날땐 부드럽게 fade-in이 되었지만 이미지가 사라지는 fade-out 효과는 정상적으로 작동하지 ..

티스토리툴바