전체 글

리액트 렌더링 최적화를 위한 useDeferredValue 는 debounce 의 완전한 대체제가 아니다.

리액트 18 버전에서 추가된 기능입니다. useDeferredValue 는 말그대로 "지연된 값을 사용" 하는 훅 입니다. 이 훅에 대해서 오해가 있었는데요. 값을 지연한다고 하기에 debounce 의 대체제 라고 생각했습니다. 그래서 너무나 당연히 이렇게 쓰면 API 요청이 지연되어서 들어간다고 생각 했었으나, 실상은 그렇지 않았습니다. const [input, setInput] = useState(''); const deferredInput = useDeferredValue(input); useEffect(() => { if (deferredInput) { fetchData(deferredInput); } }, [deferredInput]); 그렇습니다... 지연된 값을 가지고 매우 무거운 렌더링 작..

tailwind 레이어가 뭔데? postcss.config 는 뭐지?

tailwind 빌드 시점에 HTML 파일에서 tailwind css 클래스를 찾아서 이를 바탕으로 ccs 정적 파일을 구성합니다. 브라우저 렌더링 과정에 직접 개입하지 않으므로, 런타임에 비용이 들지 않습니다. 전통적인 인라인 스타일과의 차이가 있다면, 미디어 쿼리를 사용할 수가 있게 되고 사전 정의된 디자인 시스템에서 스타일을 선택할 수 있다는 것, 마우스오버, 포커스 등의 상태에도 대응 가능하다는 점입니다. 숫자로 보기: Atomic CSS를 사용한 1년 반 - John Polacek 아니요, 유틸리티 클래스는 인라인 스타일과 동일하지 않습니다( Algolia의 Sarah Dayan 작성). GitHub의 유틸리티 클래스 사용에 대한 Diana Mounter의 팟캐스트 인터뷰 레이어 @tailwin..

Next.js 의 ServerSide 에서 Apollo Client Cache 데이터가 모든 사용자 간에 공유되는 이슈

마이페이지에 다른 사람의 정보가 보이는 문제가 발생했습니다!!! 회사에서 개발 중인 사이트의 마이페이지는 사용자의 정보를 Next.js getServerSideProps 에서 Apollo Client Query 로 가져온 다음에 캐시 데이터를 클라이언트 Apollo Client 인스턴스의 캐시와 병합시키고, 그 캐시 데이터를 클라이언트 단에서 뽑아서 화면에 보여주는 방식으로 개발 했었는데요. 이것은 rehydreate 를 하는 여러 방법 중에 보편적으로 알려진 방식입니다. 대부분 Next.js + Apollo 궁시렁 검색하면 이렇게 나올겁니다. ClientSide 에서 useQuery 사용시 _app.tsx 에서 pageProps 를 useApollo hook에 전달 useApollo 에서 initia..

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

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

리액트 프론트엔드 개발자 입장에서 프로젝트 단계별로 일어나는 일 정리해보기

리액트 프론트엔드 개발자 입장에서 프로젝트 단계별로 일어나는 일 정리해보았습니다. 지난 2년 동안 프론트 개발해보면서 겪으며 경험해본 것들을 정리한 것이겠네요. 프로젝트 시작단계 프로젝트에 무슨 기술을 사용할 지 정하게 됩니다. 이미 서비스중인 프로젝트에 사용하던 익숙한 기술을 그대로 가져와서 적용하는 게 가장 빠르고 쉬운 길입니다. 그러나 신기술을 도입하기에 이 단계보다 더 쉽고 간단한 단계는 없습니다. 또한 기존에 사용하던 기술에서 느꼈던 불편함을 어쩌면 신 기술 도입으로 개선할 수도 있습니다. 이전 프로젝트에서 사용하던 기술에서 무엇이 불편했는지 정리하고 신기술 탐색 및 기존 불편함 점을 해결할 수 있을지 검토해야 합니다. 예를 들면, 기존 CRA 프로젝트에서 서버사이드 기능이 많이 필요해서 별도 ..

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 폴더로 하드링크를 만듭니다. 하드링크는 디스크상 원본 파일이 있는 위치를..

22년, 23년 가장 많은 애정을 쏟았던 곳, 24년은?

2022년 : 개발 확실히 22년도에는 개발에 가장 많은 애정을 쏟았던 것 같습니다. 퇴근 하고도, 주말에도 쉬는 날 가릴 것 없이 닥치는대로 공부하고 코딩했었는데요. 확실히 그렇게 많은 시간을 들이면서 노력했기 때문에 실력이 가파르게 상승했음을 정말 많이 느낍니다. 특히 언제 느끼냐면요. 나 이정도면 개발 쫌 잘하는것 같은데? 뭐든 만들 수 있을 것 같아! 처럼 오만한 자만심에 빠졌을때 작성했었던 코드를 지금 와서 보면, 정말 가관이더군요... 고쳐야 할 것들이 산더미 처럼 보이면서, 아 내가 그동안 많이 성장했구나 느낍니다. 2023년 상반기 : 취미 23년도에는 취미생활에 많은 애정을 쏟았습니다. 이전 블로그 게시글 몇 개만 보아도 모임, 자전거, 독서와 같은 좀 생산적이고 건강한 취미를 가지려고 ..

지난 6개월의 회고. Next.js, graphql, tailwind.css 개발 경험

지난 6개월 회고 정말 오랜만에 블로그 글을 쓰게 되었습니다... 2023년 올해 초 부터 회사에서 시작하였던 신규 서비스 준비에 매우 정신없이 보냈습니다. 한 마디로 영혼을 갈아 넣었죠.. 8월에 MVP 출시 목표가 9월, 10월, 11월 까지 미뤄지고, 결국 서비스 출시는 12월 까지 미뤄지게 되었습니다. 지금은 본서비스를 위한 프리런칭 버전의 서비스를 출시를 하고, 협약할 기관들을 컨텍 중이랍니다. 이런거 보면 사업이라는게 참 쉽지 않다고 느껴지네요. 기획이라는 것은 곧 사람 생각이니, 다음날 아침이면 바뀌고, 뒤돌아서면 바뀌고, 눈깜빡이면 바뀌는 것 같습니다. 프론트엔드 개발자로 이번 서비스를 하면서 사용해본 것들, 느낀점 한번 시원하게 털어놔 보겠습니다. Tailwind.css css 파일에 스..

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..

4-5월 재충전의 시간 (걷기, 익명의 편지 모임)

 4-5월 재충전의 시간 오랜만에 휴가를 쓰고 여유가 생겨서 근황을 쓸 수 있게 되었습니다. 걷기 모임 이전 스토리에 이어서... 때는 4월 중순이었습니다. 그때 진짜 몸도 마음도 아프고 힘든 시기어서 그냥 다 내려놓고 좀 쉬고 싶고 싶었습니다. 그냥 아무 생각없이 걷고 싶었는데 우연히 걷기 모임을 발견해서 걸으러 나갔습니다. 이 모임의 좋았던 부분은 수요일 퇴근 후 널널한 시간에 만나서 진짜 그냥 걷기만 하다가 돌아간다는 것이었습니다. 뒷풀이가 없고, 술자리가 없고, (회차는 계속 있지만) 일회성 모임이기 때문에 모임 사람들과 관계 유지에 힘쓸 필요도 없고, 그냥 그날 하루 보내고 오면 된다는 것, 그런 부분들이 참 좋았습니다. 그러나 모든게 다 좋았던 것은 아닌데요. 그 모임이 이미 회차가 꽤 진..

나의 해방일지 줄거리, 감상평(스포주의)

소개 2022년 4월 9일 ~ 2022년 5월 29일 방영한 JTBC 드라마 입니다. 연출은 진지한 상황에서도 유쾌하고 유머러스한 연출을 잘 표현하시는 김석윤 PD님 극본은 또 오해영, 나의 아저씨 등을 집필한 박해영 작가님 살면서 마음이 정말로 편하고 좋았던 적이 얼마나 있었나? 항상 무언가 해야 한다는 생각에, 어떻게든 하루를 알차게 살아내야 한다는 강박에 시달리면서도, 몸은 움직여주지 않고, 상황은 뜻대로 돌아가지 않고... 지리한 나날들의 반복. 딱히 큰 문제가 있는 것도 아닌데 왜 행복하지 않을까? 그렇다고 문제가 없다는 말도 못 한다. 문제가 있는 것도 아니고, 문제가 없는 것도 아니고. 정확하게 말할 수 있는 한 가지는, 행복하지 않다는 것. 해방. 해갈. 희열. 그런 걸 느껴본 적이 있던가..

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

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