철스커의 멀티 저장소

개요주식 시세처럼 실시간 데이터는 어떻게 최적화 되고 있는 것일까요?다양한 예시들을 찾아보면서, 웹 워커로 최적화할 수 있다는 사례가 있어서 한번 테스트해보고 싶었습니다. 웹 애플리케이션은 브라우저에서 실행이 되는데요.브라우저의 메인 스레드를 렌더링 엔진과 JS 엔진이 같이 사용하고 있기에 렌더링 작업이나 연산 작업이 오래 걸리면 애플리케이션이 멈추거나 버벅거리는 현상이 발생하는 것입니다. 실시간 데이터를 API 방식이든, 네이티브 앱에서 받든 웹 애플리케이션 입장에서는 외부에서 받을 텐데요. 웹 애플리케이션은 데이터를 가공하는 연산 작업을 거쳐 브라우저의 렌더링 작업을 통해 화면에 데이터를 UI 형태로 보여줄 것입니다. Mock 데이터 만들기실시간 데이터이 오는 주기는 0.01초, 0...

오랜만에 무한스크롤링을 구현해보려고 합니다.실무에서 무한스크롤링로 이미지를 계속해서 로딩하다보니, 성능적인 이슈가 발생했는데요.비슷하게 기능을 구현하여 성능 이슈를 해결해보고 싶었습니다..!그전에... 무한스크롤링을 구현해보기로 했습니다. 이미지를 가져오는 API가 필요했는데요.Unsplash API를 사용해보기로 했습니다. Unsplash API 사용하기 Unspash는 개발자를 위한 문서를 제공해주고 있는데요.Pagination도 구현되어 있어서 페이징으로 Unspash 이미지를 가져올 수 있습니다. API 요청 횟수는 제한되어 있습니다. demo 모드에서는 한 시간에 50회 요청으로 제한됩니다.더 많은 요청을 원한다면, 유료로 플랜을 바꾸거나 Unsplash에 문의가 필요할 듯합..

요구사항 ✏️실무에서 요구사항이 다음과 같았습니다."지도에서 특정한 매장만 보이도록 지도를 줌인/줌아웃 할 수 없나요?" 일단... 고민거리가 많이 생겼습니다.유저가 지도의 줌인을 많이 했을 수도 있고,반대로 지도의 줌아웃을 많이 했을 수도 있습니다. 유저의 지도레벨은 유저마다 다르다 😵‍💫카카오맵에서 지도를 확대/축소할 수 정도를 지도레벨이라고 표현하고 있는데요. - 지도레벨이 13이라면, 특정한 매장만 보이게 지도레벨을 얼만큼 줌인해야 할지..?- 지도레벨이 5정도라면, 지도레벨을 얼만큼 줌아웃해야 할지...? 판단하기 어렵습니다. 유저가 보고 있는 지도의 레벨이 얼마인지도 모르고,얼만큼 줌인해야할지, 얼만큼 줌아웃해야할지 모릅니다. 케이스가 다양해서 복잡하다 🔁또, 매장의 갯수..

이슈 발생회사에서 업무를 보면서 폼 데이터를 구현할 일이 많았는데요.react-hook-form을 이용하면 폼 데이터를 쉽게 관리할 수 있었습니다.   그런데, 폼 데이터 필드 갯수가 10개를 넘어 30개 정도로 굉장히 많은 경우가 있습니다. 🤔필드별로 onChange 이벤트에 로그를 찍어서 필드값을 확인할 수도 있고,폼 전송 시, onSubmit 이벤트를 이용해서 모든 필드값을 로그로 찍을 수 있습니다.   하지만, 필드값을 반복적으로 수정하는 경우Submit 버튼을 누르는 것도 귀찮기도 하고, 번거롭습니다 ;;;   😢     react-hook-form 코드 예시import { useForm } from 'react-hook-form';const INPUTS = { input1: 'input1..

이슈 내용useMutation함수를 호출해서 정의된 mutation함수를 사용할 수 있는데요.mutation함수의 콜백에 두번째 파라미터에 옵션에 onSuccess, onError 등을 이용해서비동기함수의 성공, 실패를 처리할 수 있습니다.  useMutation함수를 정의할 때, mutationFn함수를 전달할 수 있는데요.그런데, mutationFn함수의 파라미터가 없을 수도 있습니다.   예제 코드import { useMutation } from '@tanstack/react-query'// mutationFn의 파라미터 없음!const m = useMutation({ mutationFn: () => Promise.resolve(5)})// 첫번째 파라미터에 어떤 값을 전달해야?m.mutate..

서론사이드 프로젝트에서 카카오톡 공유하기 기능을 구현해야 하는 경우가 생겼는데, 경험을 기록해둡니다.어떤 UI (버튼, 이미지) 를 클릭하면, 카카오톡 API를 통해 카카오톡 앱이 열리고 친구에게 메시지를 공유할 수 있는데요.  API를 호출할 때, 특정 정보를 전달하고 이 정보를 메시지 링크에 붙여줍니다.메시지 링크가 열리면 저희 서비스로 이동해서, 서비스에서 이 정보로 특정 액션을 할 수 있습니다.   카카오톡 공유하기 플로우      카카오톡 공유하기 API카카오에 대한 타입정의가 없기 때문에, kakao.d.ts 파일을 만들어 다음과 같은 타입정의를 하였습니다.kakao.d.ts는 tsconfig.json에서 넣어줘서 컴파일러가 타입을 정의할 수 있도록 했습니다.  // kakao.d.ts/** ..

이슈발생사이드 프로젝트 팀에서 사용하는 디자인 시스템을 Tailwind config에 적용해주었습니다.색상도 커스텀한 이름으로 적용해두었고요. Turborepo + Next.js + Tailwind 스타터킷 프로젝트를 사용했기에, Tailwind 유틸함수를 자연스럽게 사용했는데요.Tailwind에서는 텍스트 사이즈 조정을 할 때도, 텍스트 색상을 조정할 때도 유틸리티 클래스 이름이 text-로 시작합니다. Tailwind 유틸함수 cn (내부에 tailwind-merge 및 clsx 사용)을 이용해 아래와 같이 스타일을 입힐 수 있는데요.그러면, text-로 시작한 클래스를 여러개 적용해두면 마지막 클래스만 남게 되는 현상이 발생했습니다.   // 커스텀-폰트크기, 커스텀-색상className={cn('..

연결 리스트 편 (Linked List) 1. 러너 기법을 이용하는 패턴2개의 러너 slow와 fast, 2개의 포인터를 이용하여 연결 리스트를 순회하는 기법 빠른 러너(fast)는 느린 러너보다 두 배로 이동합니다. fast가 끝에 도달하면, slow는 중간 노드에 위치하는데요. 이런 특성을 이용해서, 중간 위치를 찾아 낼 수 있습니다. 예시) 1) 값을 비교하기 2) 뒤집기 3) 팰린드롬 찾기 2. node.next != null && node.next.next !== null 인 조건을 체크하기node 다음 노드를 a, node 다음+다음 노드를 b라고 할 때, node와 a, b 를 이용해서, 현재 노드와 다음 노드, 다다음 노드를 Swap 하는 등의 작업을 할 수 있습니다. let node = ..

부동 소수점의 의미영어로 floating point라고 하며, 소수점이 떠다닌다는 의미를 가지고 있습니다.컴퓨터에서 실수를 표현하는 방법으로 소수점의 위치를 고정하지 않아, 사용하는 비트 수 대비 넓은 범위의 숫자를 표현한다는 장점이 있습니다.IEEE 754에서 부동 소수점의 개념을 표준화하였습니다.    고정 소수점과의 차이고정 소수점에서는 정수와 소수 부분의 영역을 나눠서 수를 표현하지만, 부동 소수점에서는 유동적으로 소수점을 이동시킬 수 있습니다.32비트만큼을 사용해서 실수를 표현한다고 가정할 때, 고정 소수점을 부호 1비트, 정수 부분을 8비트, 소수 부분을 23비트로 표현한다고 합시다. (1+8+23 = 32)  그런데, 정수 부분은 8비트만큼만 사용할 수 있어서 -2^8 ~ 2^8 (-256 ..

문제 발생사이드 프로젝트를 진행하고 있는데, 팀 메신저로 Discord를 사용하고 있습니다.Vercel에 Next.js 웹 애플리케이션을 배포하면, 배포 완료되었다는 알림을 Discord 채널에 보내고 싶은데요.마땅한 방법을 찾지 못해, 삽질을 많이 했습니다. Vercel에서 다른 앱과 통합할 수 있는 기능을 제공하는데, Slack과의 연동은 제공해주는 것 같으나 Discord는 없는 것 같더라고요.   Integrations에서 -> Browse Market 버튼을 클릭하면, Vercel과 통합할 수 있는 앱들을 보여줍니다.     Slack은 있지만 Discord는 없습니다...   계속 구글 검색 + 챗GPT로 정보를 찾다가, Discord Pro Plan의 경우 웹훅을 Account 에서 설정할 ..