본문 바로가기

React/Nextjs

(4)
의존성 production install 후 next build 시 next.config.mjs 에@next/bundle-analyzer 라이브러리 못찾는 에러 해결 production install 은 devDependencies에 나열 된 패키지를 설치하지 않는 것으로, # npm npm install --production # yarn yarn install --production 하지만 위와 같이 하게된다면 next.config.mjs 에서 next build 시 에러가 발생한다. 이유는 @next/bundle-analyzer 를 찾을 수 없기 떄문이다. @next/bundle-analyzer 는 devDependencies 에 있기 때문에 production install 시에 설치되지 않는다. 물론 해당 의존성을 dependencies 로 옮기면 바로 해결 될 문제이겠지만, 이런 하드한 방법을 사용하고 싶지 않았다. 일단 에러가 나는 이유는 next.con..
nextjs 에서 antd 5.x 와 tailwind 적용 tailwind 적용은 https://tailwindcss.com/docs/guides/nextjs 참고 보통 antd 에 tailwind 를 추가로 쓰려고하는 사람은 아마? 대부분 간단한 스타일링을 할 때 (ex: padding, margin 등) inner style은 싫고, 그렇다고 css module 이나 css-in-js 를 사용해 파일을 추가로 생성하는게 부담스러울 때 쓰려고 한다고 생각한다. ※ tailwind 만으로 컴포넌트를 백프로 제작하길 원한다면 쿨하게 antd와 같은 UI 디자인은 버리기를 추천(UI Design 이중화 방지!)한다! tailwind 기본 설정이 끝났다면 tailwind.config.js 에 딱 두줄만 추가해주면 된다. /** @type {import('tailwin..
next-auth 를 활용한 jwt 인증 및 refresh 토큰 순환 next-auth는 사실 공식홈페이지에서도 소개된 것처럼 서버리스를 지원하도록 처음부터 설계된 오픈소스 인증 솔루션이다. 하지만 실무에서 서버리스로 개발하는 경우는 드물다. 그럼에도 필자가 next-auth를 도입해보게 된 이유는 프론트엔드에서 페이지 라우트별로 접근을 보다 쉽게 제한할 수 있으며, 그래도 상당히 나쁘지않은 보안적인 측면을 기본적으로 보다 쉽게 제공해주는 느낌을 받았기 때문이다. 예를 들면, 서버를 통해 accessToken을 넘겨받은 뒤, 해당 accessToken이 만료가 된다면 서버에서는 api 호출이 되지 않을 것이다. 하지만 각 라우트는 별도의 작업이 없다면 해당 페이지에 접근할 수 있게된다. 물론 HOC(High Order Component)나 각 페이지를 래핑하는 Provid..
Module not found: styled-components tried to access react-is (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. Yarn Berry + Nextjs + Styled-Component 로 개발을 하던 중 제목과 같은 에러가 발생하였다. 에러로그를 자세히 보면 Module not found: styled-components tried to access react-is (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. Required package: react-is Required by: styled-components@virtual:0487b1b8263ee74b6a800d7d32396247265bb66793913170b66fbaba014393ed5e7147a33f4bbb0..