FrontEnd (437) 썸네일형 리스트형 프론트엔드 성능 최적화 가이드 스터디 4장 프론트엔드 성능 최적화 가이드의 4장을 스터디한 내용입니다 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 이전 시리즈 2022.11.15 - [웹성능최적화] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 itchallenger.tistory.com 2022.11.15 - [웹성능.. vue3의 반응성(reactivity) 원리 간단 정리 출처 : https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js vuejs.org 아래와 같은 코드가 실행된다 가정하자 import { ref, watchEffect } from 'vue' const A0 = ref(0) const A1 = ref(1) const A2 = ref() watchEffect(() => { // tracks A0 and A1 A2.value = A0.value + A1.value }) // triggers the effect A0.value = 2 1. 이펙트(ex: watchEffect,computed 내부 함수) 함수가 전역 변수에 할당되며 파라미터로 받은 업데이트 함수를 실행.. 프론트엔드 성능 최적화 가이드 3장 스터디 해당 도서의 3장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 홈페이지 최적화 이전 시리즈 보기 2022.11.15 - [분류 전체보기] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 해당 도서의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 itchallenger.tistory.com 2022.11.. 프론트엔드 성능 최적화 가이드 2장 스터디 프론트엔드 성능 최적화 가이드 2장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 올림픽 통계 서비스 최적화 이전 시리즈 보기 2022.11.15 - [분류 전체보기] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 해당 도서의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 itchallenger.tis.. 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 성능 최적화 개요 성능 최적화가 중요한 이유 구글 : 성능이 곧 매출 성능이 저하되면 사용자가 떠나고 매출이 감소한다 즉, 성능을 최적화하면 더 나은 UX, 높은 가입율과 전환율, 낮은 이탈율을 확보하여 더 많은 수익을 창출할 수 있음 성능 최적화는 어떻게 이루어질까 웹 성능 결정 요소는 로딩 성능과 렌더링 성능으로 나눌 수 있음 로딩 성능 웹 페이지와 웹 페이지 표시에 필요한 기타.. API 디자인 : API 디자인의 기본과 API 디자인 테이블 해당 책을 읽으며 정리한 내용입니다 : http://www.yes24.com/Product/Goods/94462254 일상 속 사물이 알려주는 웹 API 디자인 - YES24 웹 API는 새로운 서비스나 앱을 만들 때 기존에 존재하던 서비스가 제공하는 기능을 활용할 수 있도록 해준다. 굳이 기존 서비스에 대한 자세한 소스 코드를 알지 않더라도 개발자가 만드는 프로 www.yes24.com 해당 게시물이 다룰 내용 Rest에 뿌리를 두지만 맹목적이지는 않도록 실무에 적용할 수 있는 API 디자인 방법 API 디자인과 OpenAPI 완벽한 API가 아니라 컨슈머에게 올바른 API API 제공 조직의 디자인을 모르게, 사용자 관점의 디자인 여러 API 형식 REST gRPC GraphQL 일상을 소프트웨어처럼.. CSS Position Sticky 문제 해결하기 Sticky는 생각처럼 동작하지 않는 경우가 많습니다. 다음 체크리스트를 이용해 일반적인 트러블슈팅 방법을 알아봅시다. 원문 : https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working#checking-if-a-parent-element-is-a-flexbox How to Fix Issues With CSS Position Sticky Not Working? Learn possible reasons why CSS position sticky might not be working for you www.designcise.com CSS position:sticky 속성이 동작하지 않는 데에는 여러.. 리액트 쿼리 : 쿼리 취소하기 쿼리 취소에 관하여: 직접 useFetch와 같은 훅을 구현할 경우, unmount된 경우에도 상태 설정 훅을 호출하여 개발 환경에서 오류 메세지를 마주치는 경우가 많죠. 즉, 보통은 요청을 일단 보내면 이후에 필요 없어져도 요청은 그대로 두고 응답받은 내용을 사용 안 하는 식으로만 구현합니다. React-Query와 같은 라이브러리를 사용하여도 해당 전략은 마찬가지입니다. ...기본적으로 프로미스가 리졸브되기 전에 마운트 해제되거나 사용되지 않는 쿼리는 취소되지 않습니다. 즉, 프로미스가 리졸브된 후 결과 데이터를 캐시에서 사용할 수 있음을 의미합니다. 이 동작은 쿼리 수신을 시작했지만 완료되기 전에 컴포넌트를 마운트 해제한 경우 유용합니다. 컴포넌트를 다시 마운트하였을 때, 쿼리가 아직 가비지 수집되.. 이전 1 ··· 14 15 16 17 18 19 20 ··· 55 다음
