본문 바로가기

분류 전체보기339

React Developer Tools https://jsramblings.com/how-to-check-if-your-component-rerendered-and-why/ How to check if your component rerendered - and why! If you're like me, you're probably using console.log a lot to check the React rendering lifecycle of your components 😅 When it rerendered, why - was it a setState or something else ?! - or even just to get a better handle of React fundamentals. This can jsramblings.com 2023. 7. 10.
3장 홈페이지 최적화 (2/2) [프론트엔드 성능 최적화 가이드] 체크 포인트 동영상 최적화 방법 1. 동영상 압축 2. 호환성을 고려한 태그 활용 동영상 최적화: 동영상 압축 동영상 콘텐츠 분석 동영상은 한번 요청으로 다운로드가 완성되지 않는다. : 파일 크기가 크기 때문에, 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드. 1. 동영상 압축 - 가로, 세로 사이즈 줄이기: 화질을 낮추는 작업 - 압축 방식 변경 https://www.media.io/ Media.io - Online Video, Audio, Image AI Tools Unlock the power of AI with our all-in-one online media processing tools for video, audio, and image. Perfect for content cr.. 2023. 7. 6.
3장 홈페이지 최적화 (1/2) [프론트엔드 성능 최적화 가이드] 체크포인트 1. 이미지 지연 로딩 - 뷰포트에서 보이지 않는 이미지를 나중에 다운로드 하는 방법 - 네트워크 탭으로 다운로드 순서 확인 - throttling으로 아주 느린 네트워크를 설정 (1) '이미지'를 감지하는 방법: Intersection Observer (2) callback 및 option 설정 (3) 이미지 태그의 dats-src라는 임시 속성에 이미지를 저장, observe될 때 src 속성에 대입 2. 이미지 파일 용량이 큰 기준? 웹 페이지에서 일반적으로 사용되는 이미지의 용량은 몇 십 킬로바이트(KB)에서 몇 백 킬로바이트(KB) 정도입니다. 9MB의 이미지는 네트워크로 전송하는데 많은 시간이 소요되며, 사용자의 인터넷 연결이 느릴 경우 로딩 시간이 길어지거나 이미지가 정상적으로 표.. 2023. 7. 3.
2장 올림픽 통계 서비스 최적화(1/2) [프론트엔드 성능 최적화 가이드] 지난 시간까지는 FCP, IS, LCP, TTI, TBT 이미지를 외부에서 받아와 사용할 때, 크기 조절 하는 것 메모리를 많이 사용하는 코드(함수)를 발견했고, 해당 코드를 최적화한 것 코드 자체를 압축한 내용 Lighthouse 패널에서 확인할 수 있는 것 - DIAGNOSIS - OPPORTUNITY 네트워크 패널에서 확인할 수 있는 것 - Disable cache, Fast 3G Performance 패널에서 확인할 수 있는 것 - Performance 탭의 CPU: throttling - Performance 탭: Memory 체크 체크 포인트 1. HTML 파싱으로 DOM 트리 생성, CSS 파싱으로 CSSOM 생성, DOM과 CSSOM으로 렌더트리 생성, 렌더트리로 리플로우, 리페인트, 컴포.. 2023. 6. 26.
1장 블로그 서비스 최적화(2/2) [프론트엔드 성능 최적화 가이드] 지난 주 복습(지난주에 기억하지 못한 내용) FCP SI LCP TTI TBT First Large Interact block 책을 읽어나가면서 든 생각 글을 읽기 → 이 책을 읽는 목적을 다시 떠올리기 결국 최적화를 하는게 목적인데 (1) 무엇을 (2) 어떻게 해야하는지를 봐야할 것 같다. 그리고 Lighthouse에서 Oppertuntiny와 DIAGNOSTICS를 통해 최적화 가능성을 찾아야 한다. 제목이 굵은 글씨로 이번 소제목은 '병목 코드 최적화' 라는 것을 알려준다. 그래서 '병목 코드 최적화'를 하겠군. 하고 따라가다 보니 왜? '병목' 코드라는 것을 알 수 있었지? 해서 다시 처음으로 돌아왔던 것. 병목코드를 확인하자! 가 아니라, Lighthose가 어떤 DIAGNOSTICS를 제시하는.. 2023. 6. 22.
CH1 블로그 서비스 (1/2) [프론트엔드 성능 최적화 가이드] 프로젝트 켜고(npm start/ npm run server), 크롬의 검사 탭 클릭 이미지 크기 확인: Elements 해당 요소 클릭 후, img의 src 요소에 마우스 올리기 실제 이미지 크기와 화면에 출력되는 이미지 크기는 다르다면, 화면에 출력되는 이미지 크기의 2배를 사용 정적(static) 이미지 API를 통해 받아오는 이미지 직접 이미지 크기 조절 CDN 활용 *CDN: Content Delivery Network로 물리적 거리를 해소 (1) 미국 서버에서 직접 다운로드 하는 대신 (2) 미국 서버를 복제한 한국 서버에서 다운로드 이미지 CDN: 이미지 리사이징, 포맷 변경 이미지 CDN 주소 예시 http://cdn.image.com?src=[img src]&width=크기&height=.. 2023. 6. 19.
31장 RegExp (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● RegExp 메서드 메서드 결과 예시 RegExp.prototype.exec 1. 매칭 결과를 배열로 반환 2. 매칭 결과가 없는 경우 null 반환 ※ 매칭 첫번째 결과만 반환 ["패턴", index: 인덱스, input: "주어진 문장", groups: ] RegExp.prototype.test 1. 매칭 결과를 불리언 값으로 반환 true/false RegExp.prototype.match 1. 매칭 결과를 배열로 반환 ※ g 플래그가 지정되면, 모든 매칭 결과를 반환 ["패턴", "패턴", '패턴"] ● 플래그 ● [ ] 대괄호 : 그룹이 아님. 그 중에 하나 ● \D: 숫자가 아닌.. 2023. 6. 8.
35장 스프레드 문법 36장 디스트럭처링 할당 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 스프레드 문법(전개 문법)는 이터러블에 한정. Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments ● 이터러블이 아닌 일반 객체, 유사 배열 객체는 불가능 ○ 스프레드 문법의 결과는 값이 아니다(개별적인 값의 목록) => 변수에 할당 불가능 ○ Rest 파라미터 vs 스프레드 문법: 반대 개념(똑같이 생김) Rest 파라미터 스프레드 문법 인수들의 목록 => 배열 배열(과 같은 이터러블) => 개별적인 값드의 목록 ● 이터러블을 배열로 변환 => [...이터러블] 기존 방식 ★스프레드 문법★ concat [1,2].c.. 2023. 6. 5.
40장 이벤트 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 이벤트 핸들러: 이벤트 발생 시, 브라우저에 의해 호출될 함수 이벤트 핸들러는 (1) 이벤트 타깃에 바인딩 (2) 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩 ● 발생한 이벤트는 객체! (1) 이벤트 핸들러의 첫 번째 인수로 전달 (2) 매개변수 e, 명시적으로 선언 필수! ● 이벤트 전파 DOM트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. ● 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로, DOM 트리를 통해 전파 (1) 캡쳐링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파 (2) 타깃 단계: 이벤트가 이벤트 타깃에 도달 (3) .. 2023. 5. 28.

티스토리툴바