반응형 2022/0513 LightHouse 점수보고 충격, 어떻게 해야하지 LightHouse LightHouse라는 걸 알게 되었다. LightHouse는 사이트 성능 측정 도구정도로 생각하면 된다. 크롬 개발자도구의 lighthouse탭에 있다. 각종 지표들 회사 랜딩페이지를 검사해보았는데 그리 나쁘진 않은 것 같다. 유저가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정한 것인데 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다. 우리 회사의 FCP는 0.7초이다. 다행히 선방치는것 같다. 그런데 FCP빼고는 다 쓰레기다. 예를들어 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한 값인데, 그러니깐 TTI가 4.7s라는 것은 '사용자가 우리 홈페이지와 상호작용하려면 로드되.. 2022. 5. 13. 이미지스프라이트 입사 초기에 마크업 공부한답시고 네이버 홈페이지에서 개발자도구 키고 따라치면서 분석했던 적이 있다. 그냥 똑같이 따라치는데, background-image가 이렇게 되어있어서 심히 당황했었다. 그렇게 몇달이 지나고 오늘, 이미지 스프라이트 라는 것을 알게 되었다. 이미지 스프라이트 기법 여러 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법 해당 기법을 사용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한 많은 이미지 파일을 개별로 관리하지 않고 특정 스프라이트 이미지만 관리하기 때문에 유지보수가 용이하다. 우리 회사도 적.. 2022. 5. 13. Chart.js Chart.js를 사용하면 그래프를 손쉽게 구현할 수 있다. React에서 사용하려면 react-chartjs-2 를 사용하면 된다. 나는 구글링을 하며 간단히 html에서만 구현해보았다. //index.html 캔버스 밑에 글 는 chart.js를 import해오는 스크립트이다. 는 차트가 들어갈 태그이다. canvas 태그의 width와 height단위는 px이다. vh를 넣어도 px이다. //canvas.js //코드 출처는 https://nomalcy.tistory.com/23 new Chart(document.getElementById("bar-chart"), { type: "bar", data: { labels: ["Africa", "Asia", "Europe", "Latin America",.. 2022. 5. 12. Generic 코딩애플 강의를 사고 한참동안 안보다가 프로젝트에서 동료분에 제너릭을 사용하는 것을 보고 강의에서 찾아보았다. 그니까 코딩애플 강의내용을 복습한단 뜻 Generic을 사용하면 타입을 파라미터로 입력할 수 있다. 함수에 를 열면 파라미터를 입력할 수 있는데, 이 꺽새괄호 안에는 타입만 입력할 수 있다. Generic 사용 전 generic을 사용하기 전 예제부터 살펴보자. function func(x:unknown[]){ return x[0]; } let a = func([4,2]) console.log(a) // 4 console.log(a+1) // Error a는 숫자 같지만 타입은 unknown이다. 타입추론을 해주지 않고 unknown으로 남아 있기에 타입지정을 :number 이런걸로 강제하기 전.. 2022. 5. 9. 이전 1 2 3 4 다음 반응형
