Dev/리팩토링 2

FP->LCP 시간을 줄여보자

서론ux를 위해 빈 화면이 뜨는 시간이 적고 빠른 피드백이 필요하다에는 이견이 적을 것이다.실제로 내 웹이 어떻게 전달되는지 개발자도구를 통해서 살펴봤는데, 개선점이 많아 보강도 할 겸 정리해본다. 본론현재 내 홈페이지를 개발자도구 performance 탭으로 찍어봤다.LCP가 2.85s로 조금 느린 것을 확인할 수 있다.FP는 208.8ms로 0.2088초니까...FP -> LCP 가 2.6412s 가 걸린다! 2.5초 내로 LCP가 마무리되는 것이 적절하다고 한다. https://pagespeed.web.dev/analysis/https-www-rryu09-com/u7utvt3zu5?hl=ko&form_factor=desktop PageSpeed Insights올바른 URL을 입력하세요.pagespe..

Dev/리팩토링 2024.09.13

타이포랩 리팩토링: 가이드 페이지

넥제로 약 1년 전에 급하게 만든 프로젝트를 심심해서 까봤는데 문제가 아주 많았다1년 전의 똥코드를 박제하고 리팩해보자 .. UserGuide.tsx 페이지를 살펴보면 VIEW GUIDE 버튼을 누르면 로딩 이미지가 뜨고, 로딩이 완료되면 지피티가 만들어준 설명이 렌더링된다 코드를 살펴보면 문제가 많다. 0. 구조분해할당???린트 설정이고 뭐고 냅다 tsrafce 해서 만들어진 Props 에 필요한 걸 갖다 넣어둔 모습이다.심지어 props:Props 로 받아와서 이후 모든 받아온 값에 props.element 처럼 접근해야 한다. 컨벤션의 문제이기는 하지만.. 타입 이름에 페이지명을 포함시켜줬고 구조분해할당을 시켜준 후 모든 props. 를 제거했다.스타일적인 부분들은 린트 설정 후 한번 정리하는 게 ..

Dev/리팩토링 2024.09.03