jfmam 개발 블로그

개요 node v16을 지원하는 툴 (vercel) 들이 점점 deprecated 되는 과정에서 node v20으로 마이그레이션 하는 법을 알아보기로 하였다. 실제 유지보수 하는 서비스의 경우에도 마이그레이션 하는 일이 발생할 것 같아 진행해 보았다. 시나리오 nvm을 사용해서 원하는 버전(20)으로 변경한다. yarn.lock을 삭제하고 .yarn/cache를 삭제한다. yarn 명령어를 실행하여 다시 의존성을 설치한다. 까지가 원래의 시나리오 였다. 문제 발생 yarn을 통해 의존성들을 설치하는 과정에서 failed가 발생하면서 다음과 같은 에러가 발생했다. Only URLs with a scheme in: file, data, and node are supported by the default ES..

개요 사이드 프로젝트 백엔드를 서버리스로 배포하는 방법에 대해 정리한다. 포트폴리오 시 링크를 달아야 할 때 서버리스로 배포하면 비용절감에 도움이 될 것이라 생각함 클라우드 서비스에 좀 더 익숙해지기 위해 사용 단점 nestjs + lambda를 적용하기 전에 단점부터 알아보자. 일단 nestjs 전체를 묶어서 올리는 것이기 때문에 무겁다. api gateway에서 routing을 한번, nestjs에서 routing을 한번 더 하기 때문에 속도가 느리다. 즉, 실제 고객한테 제공하는 서비스를 만들 예정이라면 쓰지 않는 것을 추천한다. 방법 순서 serverless 환경설정 serverless에 필요한 의존성 설치 serverless yml 작성 serverless offline으로 먼저 동작하는지 배포..

개요 파일을 배포하기 전에 최적화를 진행한다. 먼저 파일의 리소스 용량을 줄임으로써 사용자는 더 빠르게 페이지를 로드할 수 있게 된다. 리소스 용량을 줄이는 방법에 대해서 알아보자. 방법 먼저 코드 스플리팅을 통해 불필요하게 렌더링 되고 있는 부분을 lazy 하게 로딩한다. next dynamic next-bundle analyzer 를 이용해서 코드스플리팅을 진행하려 한다. 1. next bundle analyzer를 설치하고 next config js에 적용한다. https://www.npmjs.com/package/@next/bundle-analyzer @next/bundle-analyzer Use `webpack-bundle-analyzer` in your Next.js project. Lates..

개요 프론트엔드 개발을 하면서 정상적으로 동작하는 UI 외에 에러가 발생했을 때 적절한 UI 및 페이지 이동을 통해 더 안정적이고 사용성을 고려한 서비스 개발이 필요 했습니다. 가장먼저, Error Boundary를 도입하고자 하였습니다. https://ko.legacy.reactjs.org/docs/error-boundaries.html 다음 링크를 통해 간략한 에러발생 시나리오를 파악해보면 하위 컴포넌트에서 에러발생 getDerivedFromError에서 fallback UI가 보이도록 설정해주고 componentDidCatch를 통해 logging을 지원합니다. 다음은 링크를 참고하여 간략하게 작성한 APIErrorBoundary 코드 입니다. // ApiErrorBoundary.tsx import..

ErrorBoundary를 왜 설정하려 하는가? ErrorBoundary에 대해 처리해서 Error상황이 발생하였을 때 사용자에게 어떤 원인으로 문제가 생겼는지 알려줘야 한다. 현재 Error에 대해서 잡아주는 코드가 없기 때문에 Error 코드 설정을 따로 해야한다. 생각하기 if (error) return if문으로 뺄 경우 error, loading, ui, data 없을 때 4가지로 분기가 되야한다. 어떻게 구현할까? error만 따로 관리해서공통컴포넌트처럼 관리해보자. catch해야 할 error는 무엇이 있을까? AuthError (ApiErrorBoundary 에서 처리) network Error (ApiErrorBoundary 에서 처리) Unkown Error AuthError 어떻게 구..

문제 Parsing error: Your application tried to access next, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound. next.config,js, jest.config.js, jest.setup.js 파일에서 위와 같은 에러가 발생 하였다. 다음 링크를 통해 eslint가 원인임을 알 수 있었다. https://stackoverflow.com/questions/74446466/need-help-setting-up-eslint-in-a-monorepo-using-yarn-3-and-typescript 해결방법 해결 방법은 간단하다. next/babel과 ..

실행환경 yarn berry nextjs v13 react v18 babel-loader v8 babel-core v7 문제 Next.js를 사용하게 되면 next/babel에 의해서 import React from 'react';구문을 작성하지 않아도 자동으로 만들어준다. 그렇기 때문에 상단에 해당 구문을 적는 것이 불필요하나 스토리북을 통해 렌더링 하게 되는 경우 import React from 'react';가 없으면 React is not defiend 에러를 발생하게 된다. 해결 방법 해결 방법에 대해 여러가지 방면으로 생각해 보았다. import React from 'react'를 모두 작성해주기 stroybook preset에 next/babel 추가해주기 결론부터 말하자면 1번의 경우에는 ..

modal 창 달기 modal 창 달기 시 컴포넌트가 여기저기 분리가 되어 있다. menu icon에 있는 state에 따라 modal창이 켜질지 말지 여부가 정해져 있다… modal창은 header영역의 색도 같이 변해야 한다. 때문에 또한 어떤 페이지에서도 동작해야 하기 때문에 위치해야 하는 컴포넌트는 app.tsx가 되야 될거같다. 방법 이번 프로젝트 중 modal창 toggle 기능을 만들어야 했다. modal창을 켰을 때 menu icon 버튼 디자인 변경 header background color 변경 contents component 대신 modal창 켜져야함 다양한 컴포넌트에서 변경이 일어나기 때문에 modal toggle state를 전역적으로 관리하기로 변경하였다. 그래서 해결방법으로 ..