분류 전체보기 753

[TIL] 20210907 intersection observer lazy loading

이미지 레이지 로딩 2021.09.08 - [WEB/REACT] - [REACT] React swiper에 image lazy loading 적용하기/ intersection observer [REACT] React swiper에 image lazy loading 적용하기/ intersection observer 오늘의 과제 페이지 로딩 속도를 빠르게 만들어보자! 이 페이지의 로딩 속도를 빠르게 만들고 싶다. 지금 FINISH부분을 보면 무려 거의 28초나 걸린다. 물론 3G 환경에서. 왜그렇나 보니. 지금 컬렉 sso-feeling.tistory.com

TIL 2021.09.07

[WIL] 항해 99 12,13주차 회고록 (21.08.23~ 21.09.03) 실전 프로젝트 5,6주차

최종 발표회! 이번주의 가장 큰 이슈는 최종 발표회이다. 협력사분들이 온 자리에서 전체로 발표회를 진행하고 부스에 기다리면서 qna를 받았다. 전체적으로 협력사 분들이 많이 오지는 않은 것 같다. 다른 조 다 돌아봐도 한분도 안오셨다는 조도 있고, 우리조는 한 분 정도 왔다. 그리고 우리팀 분위기가 좋다고 전체를 채용하고 싶다고 하셨는데, 우리조만 그랬는지 다른조에도 그랬는지 모르겠지만 기분이 좋았다. 슈퍼주니어처럼 다이~버에요! 라고 외치고 다녔던 것이 효과가 있었나. 발표를 준비하면서 프론트엔드에서 기술적 챌린지를 한 것이나, 대단히 잘한점을 뽑기가 굉장히 어려웠다. 어려운 것을 했다고 하더라도 다른 팀원분이 한 것이라서 내가 어필할 부분이 거의 없었다. 그리고 중요한 것은, 당시에는 어려워보였는데 ..

TIL 2021.09.05

[REACT] 리액트 lottie-web 으로 애니메이션 넣기

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..

WEB/REACT 2021.09.01

[REACT] 리액트 메모에 대한 공부 링크

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%..

WEB/REACT 2021.09.01

[TIL] 20210827 react google analytics

2021.08.27 - [WEB/REACT] - [REACT] react-ga로 리액트 프로젝트에 google analytics 적용하기 [REACT] react-ga로 리액트 프로젝트에 google analytics 적용하기 우리의 프로젝트에 구글애널리틱스를 심어보자! 알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다. 이렇게만 하면 된다. 1. 구글애널리틱스에 가서 속성만들기 구글애널리 sso-feeling.tistory.com

TIL 2021.08.31

[REACT] react-ga로 리액트 프로젝트에 google analytics 적용하기

우리의 프로젝트에 구글애널리틱스를 심어보자! 알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다. 이렇게만 하면 된다. 1. 구글애널리틱스에 가서 속성만들기 구글애널리틱스가 업그레이드가 되었다고 하는데 우리가 쓸 라이브러리는 이전버전이므로 유니버셜 애널리틱스 속성을 만들어준다. 2. 코드심기 왼쪽 하단 설정-> 추적정보-> 추적코드에 들어가면 id와 코드가 이렇게 나온다. 이 코드를 index.html의 head태그 안에 넣는다. 3. react-ga 설치 https://www.npmjs.com/package/react-ga react-ga React Google Analytics Module www.npmjs.com 4. App.js에서 추적하기 useEffect(()=>{ ReactG..

WEB/REACT 2021.08.27