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으로 먼저 동작하는지 배포..

개요 지금의 상태관리 라이브러리가 생겨난 이유에 대해 알아보자 지난 면접에서 물어본 mvc, mvvm 패턴에 대해 이해하고 현재의 라이브러리들이 상태관리를 위해 어떠한 패턴을 도입했는지 알아보자 MVC 패턴 도입 mvc 패턴이란? Model, View, Controller의 줄임말로 패턴을 이용해서 구조화 된 코드를 작성하는 방식이다. 일반적으로 백엔드에서 주로 사용되었으며 각각 해당하는 부분은 다음과 같다. Model: 데이터를 수집 가공 한다 (데이터 베이스 내용 조회, 생성) Controller: Router (Request, Response) View: 뷰 생성 이전에 수업에서 JSP를 사용했을 때 주로 사용하던 패턴이였다. View 부터 데이터베이스 까지 강하게 의존성이 엮어서 위의 다이어그램 ..

개요 react suspense의 사용법에 대해 자세히 알아보자 react suspense 이전의 코드와 현재의 코드를 비교해서 장,단점을 비교해보자 react suspense가 나오게 된 계기는? 동시성(concurrent) 동시성모드 이전의 react는 stack 기반으로 동작 하였습니다. 태스크를 stack 담고 빌 때까지 동기적으로 처리를 하였습니다. 이러한 방법은 많은 태스크를 처리해야 할 때 문제점을 다가왔습니다. 예시로 현재 유저가 검색으로 list를 불러온다고 했을 때 당장에 생각해봐도 loading component를 보여주고 자동완성 UI도 보여주고 api 요청도 하고 유저로부터 input처리도 받게 되고 등 등 요구사항이 늘어날수록 처리해야 되는 것도 많아집니다. 그러다 보니 태스크가..

개요 파일을 배포하기 전에 최적화를 진행한다. 먼저 파일의 리소스 용량을 줄임으로써 사용자는 더 빠르게 페이지를 로드할 수 있게 된다. 리소스 용량을 줄이는 방법에 대해서 알아보자. 방법 먼저 코드 스플리팅을 통해 불필요하게 렌더링 되고 있는 부분을 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..

useCallback 과 useMemo 문제 useCallback과 useMemo는 캐싱을 통해 최적화를 하는데 모든 변수, 함수에 왜 안쓰나? 이유가 있다면 언제 써야 하나? useMemo: 이전에 계산된 값을 기억하여 더욱 빠르게 값을 반환한다. dependency가 변경될 때 함수가 실행된다. useCallback: useMemo는 값을 기억하고 있다면 useCallback은 함수를 기억한다. 작동방식은 useMemo와 같다. useCallback, useMemo 모두 이전에 사용된 값들을 저장하고 있기 때문에 오히려 무분별하게 사용할 경우 최적화가 되지 못하고 가비지 컬렉터가 되지 못해 메모리 사용측면에서 비효율적이 된다. 그렇기 때문에 언제 사용해야 할지 아는 것이 중요하다. 해결방법 일반적으로..

https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 방법 먼저 문제 유형부터 파악하기가 어려웠다. 지금까지 봐았던 dfs 문제가 아니기 때문이였는데 다음 사항 때문에 완전탐색이라고 생각하게 되었다 banned_id에 일치하는 user_id value 값을 찾는 과정에서 단계가 넘어가도 반복적인 코드가 발생한다. banned_id[0]을 user_id를 순회하면서 찾게 되면 다음 banned_id[1]에서도 똑같이 반복 banned_id 배열의..