개요 리팩토링 계획 중 getStaticProps, getServerSideProps를 사용해 서버 측에서 데이터를 요청하는 방법을 해보려고 하던 중 난관에 봉착했다. 처음 마주한 문제는 getStaticProps, getServerSideProps의 경우 page에서 요청해야 된다는 내용이었다. 해당 오류에 맞게 어서 최상단의 Page에서 요청을 했으나 이번엔 다른 문제가 발생했다. Next 13 버전부터는 해당 함수들을 지원하지 않고 다른 데이터 요청 방법을 사용해야한다고 한다. 뭐가 문제인지를 확인하고, 적절한 data fetching 방식을 알아보자. getStaticProps 사용 불가?아래 사진을보면 Next 공식문서에서 Pages Router 방식과 App Router에서 사용되는 방식의 ..
개요 새해가 밝은 지금, 지금까지 번들사이즈를 측정하고 감소시키려고 여러 시도를 했다. 오늘은 마지막으로 로컬 폰트로 변경, Next 이미지의 Objectfit 속성 전환, size 지정을 해주었다. 최종 번들사이즈 결과를 비교하고, 성능 점수를 보고 번들사이즈에 대한 리팩토링을 마무리 해보자 로고 폰트 로컬 폰트로 변경개발 마무리 단계가 아닌 초반부터 의아했던 점이 있는데 늘 Lighthouse 성능 평가의 LCP 부문에서 유독 낮은 점수를 받았다. 근데 다름 아닌 텍스트인 FLEX 로고 부분에서 매번 낮은 붉은색 경고가 보이곤해서 무슨 문제일까 냅두다가 우리 전역 폰트인 Pretendar와는 다르게 로고에서 사용중인 폰트는 웹폰트로 사용중이어서 이부분에서 문제인가 하고 접근하게 되었다. 먼저 로고..
개요 이전글에서 측정한 번들크기를 보고 여러 방법을 시도 후 얼만큼 번들크기를 감소시켰는지 확인해보자 번들 사이즈에 대해 검색하며 배운 방법들을 사용해보려 한다. 1. 불필요한 파일,코드 삭제2. 코드 스플리팅3. 미사용 라이브러리 의존성을 삭제 및 Third-Party 라이브러리 최소화 (가능하다면) 추가로 저번 시간에 활용하지 못한 방법중 하나가 cloc을 통해 코드의 줄 개수를 측정하는 것이다.cloc : 코드 라인, 주석 라인, 빈 줄 등을 계산해주는 CLI 도구cloc . // 프로젝트의 전체 코드 라인 수를 출력 물론, 적은양의 코드가 항상 옳다고는 할 수 없지만, 가독성과 로직이 유사하다면 아무래도 적은 양의 코드가 좋은 평가를 받는다. cloc을 통한 코드, 파일 수의 비교와 저번..
개요 프로젝트가 마감되고 12월 셋째 주를 쉬고 크리스마스도 보내고 가족들과도 많은 시간을 보냈다.이제껏 진행했던 여느 프로젝트처럼 막판에 부랴부랴 기능이 돌아가고 오류가 나지 않게끔 하느라 애썼다.하지만, 불편하고 불필요한 코드가 계속 눈엣가시처럼 걸려서 한 번은 치워야겠다 하고 다짐을 했다. 이제는 정말 1월이 되기 전 끝 마쳐야 할 거 같아서 진행하려하고 당장 생각한 목표는 다음과 같다.번들사이즈 감소무한 스크롤 미반영 컴포넌트 반영getServerSideProps 활용한 데이터 페칭불필요한 파일, 코드삭제비효율적인 로직 변경 각 요소들이 시간이 얼만큼 잡아먹을지는 모르겠지만, 첫 매듭을 번들 사이즈를 줄이면서 시작하려고 한다. Next 프로젝트의 번들사이즈NextJS로 만든 애플리케이션을 사용하려..
개요 랜딩페이지가 어느정도 완성되어 다른 기능들을 하나 둘 개발 중, 메인 화면에 유독 컨텐츠들이 많아 실제 배포환경에서 렌더링이 늦거나 유저경험을 저해하는 해프닝이 생길까 하고 검사를 받아보고 싶었다.마침, 크롬 브라우저의 관리자 모드에서 제공하는 Lighthouse가 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화), 그리고 기타 웹 품질 지표를 분석하고 개선할 수 있도록 도와주는 오픈 소스 도구라고 해서 사용해보았다. Lighthouse 사용검사를 받고 싶은 페이지에서 개발자 모드를 킨 후, (윈도우는 f12, 맥은 cmd+option+i 또는 fn+f12) 하단의 요소들 중 Lighthouse를 선택한다.모드, 기기, 카테고리를 선택 후 페이지 로드 분석을 클릭 나의 경우 모드 : 기본 값,..
개요SW아카데미 수업 중 모니터링에 관한 수업을 들었다. 교수님께서 진행중인 서비스에도 모니터링 시스템을 도입하면 좋을 것 같았다.수업에서 들은 모니터링, 옵저빙 툴은 여러 종류가 있었지만, Datadog의 경우 많이 들어보기도 했고, 팀원의 강추가 있었다.또한, Next와의 연결 문서도 나름 잘 정리되어있는 Datadog을 선택했다. (비용이 세다는 말이 많아 좀 걸리긴 했다..) Datadog?클라우드 기반 애플리케이션과 인프라를 모니터링하고 분석하는 종합적인 모니터링 및 데이터 분석 플랫폼으로 주요 기능은 다음과 같다.1. 모니터링 및 관찰성 : 애플리케이션, 서버, 컨테이너, 데이터베이스, 네트워크 등 모든 인프라와 애플리케이션 계층에서 데이터를 수집하고 시각화2. 로그 관리 : 중앙 집중화된 로..
