테크/Next.js

오랜만에 글을 쓰네요. 요근래 취업 준비, 기존 프로젝트 리팩토링 등을 수행하며 글 쓰기를 자꾸 미뤘던 것 같아요. 이번 글에서는 가장 최근에 작성한 프로젝트 회고 글에서 언급했던, 현재 운영 중인 웹 사이트의 느린 서버 사이드 렌더링 속도 문제를 개선한 경험에 대해 공유해보려 합니다. 체감되는 느린 서버 사이드 렌더링 제가 만들었음에도 너무 느려 보였습니다. 특히 맨 처음 웹 사이트에 접속하게 되면, 서버리스 애플리케이션 특성 상 발생하게 되는 콜드 스타트(Cold Start) 문제로 인하여 더욱 느려 좋지 않은 사용자 경험을 유발합니다. 콜드 스타트가 뭐냐구요? 아래 ChatGPT 답변을 참고해주세요 😅 이러한 콜드 스타트에 느린 서버 사이드 렌더링 속도(분석 결과 약 1.33초)까지 더해진 상태가 ..

최근 개발 프로젝트 하나를 마쳤습니다. (https://www.sejulbook.com 많이 방문해주세요 😁) 해당 프로젝트에서 처음으로 아토믹 디자인 시스템을 도입해봤습니다. 디자인 시스템을 컴포넌트로 파편화하여 쉽게 재사용하고 확장하고 싶었기 때문입니다. 하지만 아토믹 디자인 시스템은 제가 느끼기에 꽤 모호했어요. 그리고 NextJS에서 아토믹 디자인을 사용하면서 하나의 문제가 발생하기도 했구요. 그래서 아토믹 디자인 시스템을 잘써보기 위해 제가 이행했던 것들을 공유해보겠습니다. 아토믹 디자인? 아토믹 디자인(Atomic Design)은 화학적 관점에서 영감을 얻은 디자인 시스템입니다. 모든 것은 원자(Atom)으로 이루어져 있으며, 원자들이 결합하여 분자(Molecule)이 되고, 분자가 더 복잡한..