뇌 채우기 공간

지금까지 리액트를 잘 사용하고 있었는데 리액트가 왜 등장하게 되었고 왜 사람들이 많이 사용하고 인기있는지가 궁금해졌다. 그래서 이 글에서는 React가 무엇인지, 어떻게 등장을 했는지, 특징이 무엇인지 살펴보자. 🏃‍♂️ React란? - 리액트는 UI 자바스크립트 라이브러리 - 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리 - 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있다 - 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-route와 같은 추가적인 라이브러리를 사용해야 한다. 🖼 프론트앤드 ..

오늘의 과제 페이지 로딩 속도를 빠르게 만들어보자! 이 페이지의 로딩 속도를 빠르게 만들고 싶다. 지금 FINISH부분을 보면 무려 거의 28초나 걸린다. 물론 3G 환경에서. 왜그렇나 보니. 지금 컬렉션들이 눈에는 6개밖에 이미지가 안보이지만, 전체 이미지가 다 불러와지기 때문에 속도가 느린것이다. 그러면 이미지에 LAZY LOADING을 적용해야한다. Lazy Loading 이란? 쉽게 말해서 눈에 보이는 이미지만 불러온다는 것이다. 그러니까 미리 이미지를 다 불러오지 말고, 스와이프를 넘겨서 옆의 이미지가 나왔을때, 이미지를 불러오는 것이다. 라이브러리의 lazy loading적용하기 먼저, 나는 react swiper라는 라이브러리를 사용해 저 스와이퍼를 구현하고 있었기 때문에 swiper을 적용..

■ Intersection Observer란? IntersectionObserver는 DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API이다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다. 페이지 스크롤에 따른 이미지/콘텐츠의 레이지 로딩 구현 무한 스크롤 웹사이트 구현 광고 수익 측정을 위한 광고 문구 노출 여부 계산 사용자가 결과를 볼지 유무에 따라 애니메이션 또는 작업 실행 여부 결정 이미지 레이지 로딩? 2021.09.07 - [TIL] - [TIL] 20210907 intersection observer lazy loading ■ 기존의 이미지/콘텐츠 레..

https://lottiefiles.com/ Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web. lottiefiles.com 귀여운 애니메이션 요소들을 넣어 우리의 웹사이트를 더욱 풍요롭게 만들어보자! 1. lottie-web라이브러리 설치 https://github.com/airbnb/lottie-web GitHub - air..

REACT MEMO PROFILER https://velog.io/@hoi/React-Functional-Component%EC%9D%98-React.memo-%EC%82%AC%EC%9A%A9%EA%B8%B0 React.memo 적용기와 Profiler를 사용한 성능 변화를 확인해 보자 Functional Component의 React.memo에 사용기에 대한 공유를 하고자 이 글을 작성합니다. React와 렌더링(rendering) 위의 사진은 React의 LifeCycle에 대한 다이어그램입니다. React LifeCycle 다이어그램은 Rea velog.io https://ui.toast.com/weekly-pick/ko_20190731#3-%EC%96%B8%EC%A0%9C-reactmemo%EB%..