Algoroot's space

안녕하세요. 오늘은 제가 현재 현업에 종사하고 있는 똑똑한개발자의 시스템 팀으로서 모노레포(Monorepo) 환경에서 효율적인 배포 플로우를 구축한 경험들을 공유하고자 합니다.   제목이 조금 심심해서 고민하던 중, 어릴 적 즐겨보던 [무서운게 딱 좋아] 시리즈가 생각이 났어요.. 스물아홉의 전 [귀찮은게 질색이야] 편으로 써볼까 합니다.  조금 개인적인 이야기를 쓰자면 어릴 적 제 별명이 √2(루트2, 2의 제곱근) 였어요. 친구들과 코너 길에서 길을 걸을 때 "대각선으로 걸어다니면√2를 절약할 수 있어" 라고 했더니 이후로 친구들이 그렇게 부르고는 했었습니다. 학교가는 길도 신호등 시간까지 기억하고 시간 맞춰 등교하기도 하고요. 유난이었죠.. 지금은 윤리적인 사고가 쌓여서 그렇게까지 하지는 않지만 ..

안녕하세요. 오늘은 JavaScript의 Proxy 객체를 활용하여 벨리데이션 체크를 하는 방법에 대해 소개해드리려고 합니다. 조금 지난 얘기이지만 지난 3월 보일러플레이트의 의 Analytics(GA, 카카오 픽셀 등 분석도구 모음) class로 리팩토링한 후, 테스트를 하지 않아서 문제가 발생했습니다. 그래서 이슈 픽스 할 겸, 리팩토링 과정을 거쳤는데 그 과정에 Proxy를 사용한 경험을 소개하고자 합니다. Proxy란 무엇일까요??Proxy는 JavaScript에서 객체에 대한 동작을 가로채거나 수정할 수 있는 강력한 도구입니다. 객체의 속성에 접근하거나 값을 설정할 때, 이를 중간에서 처리할 수 있습니다. Proxy 기본 사용법1. Proxy 객체 생성먼저, Proxy 객체를 생성해보겠습니다.c..

안녕하세요. 오늘은 React Query에서 유용하게 활용할 수 있는 util 함수와 hook을 소개해드리려고 합니다. 특히, 여러 API 요청을 동시에 처리할 때 쿼리의 로딩 상태를 관리하는 데 도움을 줄 수 있는 방법을 다루겠습니다. 리액트 애플리케이션을 개발하다 보면 여러 API 요청을 동시에 처리해야 하는 상황이 자주 발생합니다. 이런 경우 각 요청의 로딩 상태를 효과적으로 관리하고 UI에 반영하는 것이 중요합니다. 오늘은 React Query를 활용하여 다중 쿼리의 로딩 상태를 깔끔하게 관리하는 방법을 공유해보려고 합니다. 왜 다중 쿼리의 로딩 상태 관리가 필요할까요?예를 들어, 블로그 애플리케이션을 생각해보세요. 이 애플리케이션에는 두 개의 탭이 있어, 각각 "최신 글"과 "인기 글"을 표시합..

안녕하세요. 오늘은 제가 현재 회사에서 프론트엔드 팀의 보일러플레이트 관리를 위해 모노레포를 도입한 경험을 공유하고자 합니다.틈새 어필 [updated 24.09.02] 관련하여 적은 글이 회사 공식 블로그에도 기술되어있습니다. 시스템 팀의 본질적인 고민과, 방향성을 담은 부분도 있으니 궁금하신 분들은 찾아봐주세요!  똑똑한개발자 프론트엔드 시스템팀은 이렇게 일해요.  똑똑한개발자 프론트엔드 시스템팀은 이렇게 일해요.FE 시스템팀은 무슨일을 할까? 어떻게 일할까?blog.toktokhan.dev 올해 시스템 업무를 맡게 되면서, 가장 먼저 계획했던 일이 바로 보일러플레이트의 모노레포화를 추진하는 것이었습니다. 회사의 보일러플레이트는 초기 프로젝트 세팅에 필요한 코드나 공통 컴포넌트, 유틸리티, 훅 등을 ..

안녕하세요, 오늘은 React Query의 setQueryData 함수를 편리하게 사용하기 위해 만든 useSetQueryData 훅에 대해 소개하려고 합니다.배경 이전에는 주로 캐싱 데이터를 업데이트할 때 UI 업데이트를 위한 Optimistic Update 용도로 사용하고는 했는데, 최근 프로젝트에서 수많은 ApI 요청으로 인한 서버 비용을 개선하기 위해 캐시를 수정하게 되었습니다.  동기 Optimistic Update를 처음 접했을 때 인피니티 쿼리에 적용하면서 다가가기 어렵고, 시간도 꽤 소요되었던 경험이었어, 처음 접하시는 분들이 더 쉽게 활용할 수 있도록 쿼리 캐시 수정용 훅을 만들었습니다. setQueryData 용도빠른 UI 업데이트어떠한 데이터를 수정, 삭제, 생성 (mutate) 한 ..

안녕하세요 오늘은 nextJS에서 제공하는 layout(v.13) getLayout()에 대해 다뤄보겠습니다. 회사 보일러플레이트에서는 현재 기존에 전역레벨에만 사용하던 Redux toolkit을 과감히 버리고 현재는 전역 / 지역마다 상태를 관리할 수 있는 React context API를 사용하고 있습니다.  실제로 사용하는 범위에서 상태와 핸들러를 관리하다보니 코드의 응집도가 높아서 매우 만족하며 사용하고 있습니다. context api의 렌더링 이슈는 use-context-selector가 나온 뒤로 적용시켜 리랜더링의 이슈도 (어느정도는)해결 되었죠.  공통된 로직과 패턴에는 provider를 각 페이지마다 감싸줘 공통된 로직과 패턴이라면 같이 사용할 수 있어 유용하게 사용하고 있는데요.작업을 ..

7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 지난 6개의 포스팅에 걸쳐 클로저에 대해 깊게 이해해 보는 시간을 가졌습니다. 특히 지난 포스팅에서는 클로저 사용 시 주의할 점도 살펴보았는데요. 만약, 예상치 못한 성능이슈가 발생한다면 어떤 방법으로 디버깅할 수 있을까요? 이번 포스팅에서는 feconf 2023 토스플레이스 세션 메모리 누수 디버깅 가이드를 듣고 적용해본 경험을 공유합니다. * 간단히 다룰 포스팅이기 때문에 자세한 설명은 링크로 첨부된 세션을 직접 보시는 것을 권장합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (fe..

6. 클로저 사용 시 주의할 점 지금까지의 내용을 정리해보면 클로저의 특징을 이해하고 리액트에서 클로저가 어떻게 사용되는지 살펴보았습니다. 이제 저희는 클로저를 이해했으며, 리액트에서의 훅이 클로저와 밀접하게 관련되어 있음을 알게 되었습니다. 따라서 클로저를 잘못 사용한다면 즉, 훅을 올바르게 활용하지 못한다면 예기치 않은 문제가 발생할 수 있다는 점을 생각하시게 될 것 같습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 그리고 이슈가 발생했을 때 이슈를 바라보는 관점도 달라지실 것 같습니다. 클로저를 제대로 이해하기 전에는 흔한..