React 2

[Frontend] Next.js 15 버전 params 에러

1. 개발 개요cursor ai에 익숙해지기 위해 사이드 프로젝트의 일환으로 블로그를 만들던 중 Next.js로 프론트엔드를 구성했는데 아래와 같은 에러를 보았다. 보아하니 블로그 상세 페이지 즉,  id를 params로 받아오는 곳의 타입 문제가 발생했는데 예전에 Next.js를 사용할 때와 동일한 코드와 로직이였는데 pwa 도입 후 테스트를 위해 build 하던 도중 발생한 에러였다. 한 번도 본 적이 없던 에러라 구글링을 해보니 Next.js 15버전부터 params와 searchParams의 접근 방식이 바뀌었다고 한다.Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'. Types ..

FrontEnd Skils 2024.12.22

Chart 라이브러리 (1) - Plotly.js

회사에서 주로 필요로 하는 요구사항이 데이터를 웹에서 시각화 해야 한다는 점이기 때문에 이 점을 집중적으로 찾다 보니 차트 라이브러리를 계속 찾게 되었는데 기존 회사 서비스에선 Python 에서 Dash로 만든 웹 사이트에 Plotly.js를 사용 했기 때문에 처음에 나도 이걸 토대로 진행 하게 되었다. 비록 현재는 다른 차트 라이브러리들을 사용하고 있지만 Plotly.js 설치 방법과 사용 방법에 대해 자세히 알아보고자 한다.  1. Plotly.js란? JavaScript로 구현된 오픈 소스 시각화 라이브러리 중 하나이다. 특히 Python Dash 같은 곳에서 함께 사용되기 좋다. 인터랙티브 시각화 도구이기도 하다. 현재는 recharts. d3.js , chart.js 등에 밀려 주류로 사용하는 ..

FrontEnd Skils 2024.07.05