프론트엔드 개발

npm/yarn 모든 패키지 종속성에 대한 버전 정보를 나열

패키지 버전 관리가 늘 어려움에 있어서 찾아보니, 명령어로 손쉽게 패키지 버전 확인이 가능하더군요. yarn outdated 명령어 Color 빨간색 = 주요 업그레이드(및 모든 주요 버전 0 ) 청록색 = 마이너 업그레이드 녹색 = 패치 업그레이드 Version Current : 프로젝트에 현재 설치된 버전 Wanted : package.json에 지정한 패키지의 버전에서 호환성을 보장하는 버전을 의미합니다. yarn upgrade를 통해 변경 되는 버전을 말합니다. Latest : 패키지의 현재의 최신 버전입니다. yarn outdated 명령어는 yarn v1 명령어고, 모던에서는 yarn upgrade-interactive 명령어라고 합니다. 참고로 yarn upgrade-interactive 명..

Next.js 서버사이드/클라이언트 사이드 분산추적/모니터링 툴 elastic-node-apm, elastic-rum 설치 이슈와 해결방법

elastic-node-apm 이란 무엇입니까? Elastic APM(애플리케이션 성능 모니터링)은 Elasticsearch, Kibana 및 Logstash를 지원하는 회사인 Elastic에서 제공하는 도구입니다. Elastic APM은 개발자가 애플리케이션 성능을 실시간으로 모니터링하고 분석할 수 있도록 설계되었습니다. 이를 통해 애플리케이션의 다양한 구성 요소 성능을 추적하고, 병목 현상을 식별하고, 문제를 효율적으로 해결할 수 있습니다.특히 Node.js 애플리케이션에 맞게 조정된 Elastic APM의 일부를 나타냅니다. 트랜잭션 추적, 오류 캡처, 성능 지표 수집 등 Node.js 애플리케이션의 성능을 모니터링하기 위한 계측 및 도구를 제공합니다.  서버 사이드 모니터링을 위해 elastic-..

설치된 패키지가 많아져서 빌드 속도가 심각한 수준으로 느려진 경우pnpm 을 도입하라

pnpm이란 무엇입니까? PNPM은 "빠르고 디스크 공간 효율적인 패키지 관리자"를 의미합니다. 이는 npm 및 Yarn의 일부 제한 사항과 단점을 해결하도록 특별히 설계된 JavaScript 프로젝트를 위한 대체 패키지 관리자입니다. 기존 패키지 관리자와 달리 pnpm은 패키지 설치 및 저장에 독특한 접근 방식을 취합니다. 주요 특징 공간 효율성 : pnpm의 뛰어난 기능 중 하나는 디스크 공간을 효율적으로 사용한다는 것입니다. npm과 Yarn은 각 프로젝트에 대해 별도의 종속성 복사본을 만드는 반면, pnpm은 전역 저장소를 사용하여 각 패키지 버전의 복사본 하나만 저장합니다. 전역 저장소에서 프로젝트의 node_modules 폴더로 하드링크를 만듭니다. 하드링크는 디스크상 원본 파일이 있는 위치를..

Next.js + React Native 크로스 플랫폼 개발을 위한 Solito, NativeWind 소개

최근에 회사에서 Next.js 로 개발한 웹 서비스를 앱으로도 서비스 해야할 수도 있는 가능성이 생겼습니다. 간단하게는 React Native 껍데기에 Webview 로 웹 서비스를 띄울 생각이었으나, 찾아보니 이쪽 분야가 예전보다 꽤 많이 발전하고 있는 것 같아서 시험삼아 찍먹 해볼까? 그런 생각이 들 정도더군요. 예전에 프로젝트를 하면서 모노레포로 웹/앱 간 코드를 공유하여 크로스 플랫폼을 개발할 수 있으면 참 좋겠다 싶었는데 최근에는 그런 방식으로 개발을 할 수 있게 생태계가 정말 많이 성장 했습니다. 제 경험상 웹 개발에서 ReactNative 개발을 찍먹 할때 어려웠던 부분은 라우팅/내비게이션, View 등을 새로 배워야 한다는 것과 css 스타일 적용 방식이 달라서 그 부분을 다시 배워야 하고..

리액트 컴포넌트를 pdf 파일로 저장하기 (html2canvas, jspdf)

react-pdf 라이브러리를 사용해서 전용컴포넌트로 한땀한땀 쌓아올려서 pdf 파일을 만들어도 되지만 그건 너무나 귀찮습니다. 저희는 웹페이지의 화면을 캡쳐해서 pdf 파일로 다운로드 받는 편한 방법을 사용할 것입니다. 아래의 두 패키지를 설치합니다. yarn add html2canvas jspdf html2canvas 는 리액트 컴포넌트를 이미지로 변환해주는 라이브러리고 jspdf는 그 이미지를 pdf파일로 만들어주는 라이브러리 입니다. 이슈들 그런데 사용해보면 바로 이슈가 터져 나옵니다. 이슈 해결하면서 해결된 코드도 같이 보겠습니다. 이슈1 : 페이지 높이가 너무 높아서 (내용이 너무 길어서) pdf 파일안에 다 담기지 않고 잘리는 이슈 처음에 인터넷에서 흔한 코드 긁어와서 pdf파일의 widt..

React Query 캐시 초기화 후 다시 받아오기

자주 사용될 일은 없지만, 꼭 써먹어야하는 순간이 있기 때문에 기록용으로 남기는 게시물입니다. (react query, tanstack query) 웹 사이트에 사용된 ReactQuery의 모든 API 캐시를 날려버리고 다시 받아와야 하는 경우가 있었습니다. 버튼 클릭시 A 테이블을 사용한 API 수십개를 B 테이블을 사용한 API 로 교체해야하는 그런 경우였습니다. Local Storage 를 사용하여 값이 true 면 A API, false 면 B API 를 사용하도록 제어 하였는데 문제는 React Query의 응답값 캐시였습니다. 이 캐시를 몽땅 비워주고 다시 API 호출할 수 있도록 queryClient.invalidateQueries() 함수를 사용하였고, 옵션으로 refetchInactive..

Apollo Subscription 으로 GraphQL 서버와 WebSocket 통신하기

구독 백엔드 데이터의 변경 사항에 대해 클라이언트에 실시간으로 알리는데 유용합니다. Query,Mutation 과 달리 지속적인 연결을 유지해야 하기 때문에 graphql-ws 라이브러리를 통해 WebSocket으로 통신합니다. 구독은 이럴 때 사용합니다. 이 경우가 아니라면 쿼리를 사용하여 간헐적 폴링을 하거나 필요한 순간에만 쿼리 하세요. 또한 구독은 외부 데이터의 변경 사항을 구독하는 것입니다. 로컬 클라이언트 캐시의 변경사항 구독에 사용할 수 없습니다! 큰 개체에 대한 작은 증분 변경 큰 덩어리 객체에서 필요한 개별 필드의 업데이트가 발생했을때 가져오는 경우를 뜻합니다. 대기 시간이 짧은 실시간 업데이트 예를 들면 채팅 앱에서 실시간 메시지를 주고 받는 경우 Apollo Client 에서 지원하는..

React에서 Apollo Client 를 상태관리 라이브러리로 사용하기

오늘은 리액트에서 Apollo Client 를 사용하는 경우 Redux, Recoil, Jotai, Zustand 와 같은 상태관리 라이브러리를 사용하지 않고 Apollo Client 만을 사용하여 클라이언트 내부 상태관리하는 방법에 대해 알아보겠습니다. 주의할 점은 Apollo Client 가 GraphQL + 클라이언트 내부 상태관리도 가능하다는 것이지, GraphQL 를 사용하지 않는 환경에서 이미 잘 사용하고 있는 상태관리 라이브러리를 대체해서는 안됩니다 🙅‍♂️ 이미 다 아시겠지만, Apollo Client 를 통해 Apollo Server 에 Query를 요청하는 방식부터 살펴봅시다. Apollo Client 를 통해 서버에 Query 요청하는 방식 Apollo Client와 GraphQL ..

VSCode 스니펫 생성하기

스니팻 생성 https://snippet-generator.app/ 사이트에 접속한뒤 원하는 템플릿 구조를 왼쪽에 작성합니다. Description : 설명을 작성합니다. Tab trigger : 저장한 템플릿을 한방에 불러올 마법의 단어를 작성합니다. Your snippet :저장할 템플릿을 입력합니다. 2-2. vscode 로 돌아와서 File > Preferences > User Snippet 을 클릭하면 상단에 사용할 언어를 쓰면됩니다. 참고로 VSCode 에서 맥북 기준으로 Command+Shift+P 를 누르고 Snippets 까지 입력하는게 빠릅니다. (커맨드 꼭 외우는걸 추천) 자바스크립트 리액트라면 javascriptreact.json 을 선택 후 사이트에서 변환된 코드를 삽입해주면 됩니..

Next.js 에서 소셜 로그인 구현하기 (next-auth.js 사용)

Next.js 에서 next-auth 라이브러리 사용하여 소셜 로그인을 구현하는 글 입니다. 소셜 로그인(카카오, 네이버) 과 커스텀 로그인 두가지 모두 구현해보겠습니다. next-auth next-auth 라이브러리는 쉽게 인증 로직을 구현하기 위한 Next.js 전용 라이브러리입니다. 모든 OAuth 서비스와 함께 작동하도록 설계되었으며 OAuth 1.0 , 1.0A , 2.0 및 OpenID Connect를 지원 하며 가장 널리 사용되는 로그인 서비스를 기본적으로 지원합니다. OAuth 동작 과정에 대해서는 이곳을 참고하세요 물론 인증 로직을 직접 구현해도 되지만, 쉽고 빠르게 할 수 있는 라이브러리를 쓰면 정신 건강에 이롭습니다. NextAuth.js Authentication for Next.j..