Rendering ·
[Optimization] Lighthouse 분석을 통한 사이트 성능 최적화
이전 포스트에서 이미지를 최적화 하는 방안에 대한 내용을 학습하였습니다. 이번엔 Chrome 에서 제공하는 Lighthouse 의 분석을 토대로 차근차근 최적화를 진행해보도록 하겠습니다. Lighthouse 는 Google Chrome 에서 재공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다.
hippo/devloghippo/devlog글 7개
Rendering ·
이전 포스트에서 이미지를 최적화 하는 방안에 대한 내용을 학습하였습니다. 이번엔 Chrome 에서 제공하는 Lighthouse 의 분석을 토대로 차근차근 최적화를 진행해보도록 하겠습니다. Lighthouse 는 Google Chrome 에서 재공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다.
Rendering ·
우리가 웹 사이트를 운영하면서 가장 중요한건 사용자가 체감하는 유저경험일 것입니다. 속도 그리고 번들사이즈 등 다양한 요소들이 최적화가 필요한 부분이고 이에 대해 필자가 운영하고 있는 사이트에 대해 최적화를 진행해 보았습니다.
Next.js ·
현재 개발하고 있는 NextJS 에서 전역 상태관리할 부분이 생겨서 Recoil 을 사용하려던 찰나, 아래와 같은 에러가 발생하였다. 원인은 NextJs 에서 HMR 시 상태 Key 가 재생성 되는 부분이 문제인것이다.
Next.js ·
Emotion 에서 Styled Component 로 변경 후 잘 사용하던 중 문제가 발생하였다. 현재 Typhograpy 라는 공용성 컴포넌트를 만들어서 사용하고 있는데, 관련된 Props 를 전달하는데 이런 이슈가 발생하는 부분이었다.
Next.js ·
요즘 회사일과 개인적인 일이 바빠서 따로 작업은 하였지만, 포스팅을 오랜만에 하게 되서 조금 반성하게 되는 하루이다. 현재 회사에서 하는 일 외로 짧더라도 집에서 NextJS 로 블로그를 변경하는 작업을 진행 중 이다.
Next.js ·
최근에 시간이 많이 없어 현재 프로젝트의 기술 셋에 대하여 간략하게 정하였고, 이에 대한 포스팅을 진행한다. 이번에 NextJS 가 13버전으로 올라가면서 많은것이 변경되었다고 한다. 이전 버전은 사용해보지는 않아서, 자세한부분은 좀 더 확인해봐야겠지만 전반적으로 NextJS 의 버전업 속도가 생각보다 빠른것 같다.
Next.js ·
블로그 프로젝트를 어느정도 완성하고 이제는 UI 에 집중하는 것이 아닌 개발에 집중하는 프로젝트를 진행해보고 싶었다. 물론, 이전 프로젝트에서도 개발을 안한건 아니지만 시작 자체가 UI 적으로 어느정도의 CSS 실력을 높이기 위해 시작했던 부분도 있었다.
