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

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

잘 되어있는 React를 사용하고 있는데, 왜 Next.js가 필요할까요??오늘 다루어 볼 주제는 Next.js의 라우팅인데, 먼저 Next.js가 무엇인지 알아봅시다.Next.js 란?Next.js는 Vercel에서 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 기능들을 제공합니다. 리액트는 클라이언트 사이드에서만 작동하기 때문에, 첫 화면을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기기도 하고 SEO 효과를 거의 볼 수 없었습니다.이 문제를 해결하기 위해 웹 어플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했고,서버 사이드 렌더링을 통해 리액트 앱을 HTML 페이지로 미리 렌더..