Front-end/UI UX
DeFi 서비스에서 작은 숫자 축약 표시하기
2026.01.27
배경 및 문제 정의DeFi 거래소를 개발하면서 가장 까다로웠던 부분 중 하나가 바로 '숫자 표시'였습니다. 일반적인 웹 서비스와 달리 DeFi에서는 토큰 가격이나 수량이 매우 작은 경우가 많습니다.예를 들어, 특정 토큰의 가격이 $0.00000042일 때 이를 그대로 "$0.00000042"로 표시하면 사용자 입장에서는 읽기가 매우 불편합니다. 게다가 JavaScript의 부동소수점 연산 한계로 인해 정확한 값을 표시하지 못하는 경우도 발생했죠.처음에는 단순히 toFixed()를 사용해서 소수점 자리를 제한했는데, 문제가 발생했습니다. 0.0000001 같은 값이 그냥 "0"으로 표시되면서 사용자들이 잔액이 없다고 오해하는 일이 생긴 거죠. 실제로는 작은 금액이 남아있는데 말이에요.그래서 "0.01 미만..
Front-end/UI UX
암호화폐 UI 표시의 숨은 고민: toFixed vs toFormat
2026.01.27
암호화폐 거래소에서 마주친 숫자 표시 문제암호화폐 거래소 프로젝트를 진행하다 보면 누구나 한 번쯤 마주치는 문제가 있습니다. 사용자가 화면에서 보는 "1,234.56789"라는 숫자가 단순해 보이지만, 이를 정확하게 표시하는 것은 생각보다 복잡합니다. JavaScript의 기본 toFixed() 메서드로는 천 단위 구분자를 자동으로 추가할 수 없고, 부동소수점 연산의 한계로 인해 정밀도 문제가 발생하기 때문입니다.왜 일반 JavaScript의 toFixed()로는 부족한가?JavaScript의 부동소수점 연산은 악명 높은 정밀도 문제를 가지고 있습니다. 가장 유명한 예시가 바로 이것입니다:console.log(0.1 + 0.2); // 0.30000000000000004console.log((0.1 + ..
Front-end/NextJS
모바일과 PC를 동시에 지원하는 적응형 Tooltip 컴포넌트 만들기
2026.01.12
1. 들어가며웹 개발을 하다 보면 하나의 UI 컴포넌트로 여러 환경을 지원해야 하는 상황이 자주 발생합니다. 특히 모바일과 데스크톱을 동시에 고려해야 할 때가 그렇죠.이번 글에서는 입력 방식에 따라 자동으로 Tooltip 또는 Popover를 렌더링하는 적응형 컴포넌트를 구현한 경험을 공유하려고 합니다. 마우스가 있는 환경에서는 hover 기반 Tooltip을, 터치만 가능한 환경에서는 클릭 기반 Popover를 자동으로 선택하는 컴포넌트입니다.2. 문제 상황: Tooltip이 모바일에서 동작하지 않는다PWA로 모바일과 PC를 동시 지원하는 과정에서제 경우는 PWA(Progressive Web App)를 개발하면서 이 문제를 마주쳤습니다. PWA는 하나의 웹 코드로 모바일 앱처럼 설치도 가능하고, 데스크..
Front-end/React
React 서버 컴포넌트 보안 취약점: 터질게 터졌나?
2025.12.22
잠깐, 너 아직 업데이트 안 했어?2025년 11월 말, React 커뮤니티가 떠들썩했다. CVSS 점수 10.0 만점 - 이게 뭐하는 짓이냐고 생각할 수 있지만, 쉽게 말해서 최악의 취약점이 발견된 거다. CVE-2025-55182라고 불리는 이 버그는 인증 없이 서버 코드를 실행할 수 있게 해주는 Remote Code Execution(RCE) 취약점이다. 그리고 Next.js를 쓰는 너한테는 CVE-2025-66478이라는 버그가 추가로 날아왔다.지금 이 글을 읽는 순간에도 패치되지 않은 수천 개 서비스가 공격 대기 중이다.1. 뭐가 터진 거 정확히?CVE-2025-55182와 CVE-2025-66478의 정체CVE-2025-55182는 React 19.0, 19.1.0, 19.1.1, 19.2.0..
Front-end/JS
JavaScript로 최소공배수(LCM) 구하기
2025.12.17
최소공배수(Least Common Multiple, LCM)는 두 개 이상의 수의 공배수 중 가장 작은 수를 말합니다. 프로그래밍에서는 주로 알고리즘 문제나 수학 연산에서 자주 사용되는 개념이죠.최소공배수의 핵심 공식최소공배수는 최대공약수(GCD)를 이용하면 간단하게 구할 수 있습니다.LCM(a, b) = (a × b) / GCD(a, b)이 공식이 성립하는 이유는 두 수를 곱하면 공통 인수(GCD)가 중복으로 들어가기 때문입니다. 따라서 한 번 나눠주면 정확한 최소공배수가 됩니다.기본 구현GCD 함수는 이미 구현되어 있다고 가정하고, LCM 함수를 작성해봅시다.// GCD 함수 (유클리드 호제법)function gcd(a, b) { return b === 0 ? a : gcd(b, a % b);}//..