뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

로보틱스에 대한 도메인 지식이 없는 상태에서 로보틱스 회사에 입사한 후, 프론트엔드 업무를 진행하면서 여러 어려움을 겪고 있다.그 중에서 결국 시뮬레이터 로봇을 건들여야하는 상황에서의 경험을 공유하고자 한다. 3D 뷰에서 로봇을 jog(수동 조작)할 때 "느리다 / 안 따라온다 / 가끔 튄다"는 리포트가 들어왔다."랙"이라는 단일 증상 뒤에는 서로 다른 레이어의 원인 네 개가 있었다 — stale ROS2 노드 프로세스, URDF joint limit API 공백, 상태 publish 주기 부재, 입력 중복 발사. 이 글은 증상 이름에 속지 않고 구간별 계측으로 원인을 격리 → 소스에서 수정 → end-to-end 검증하는 루프를 어떻게 돌렸는지에 대한 기록이다. 증상 이름으로 수정 위치를 정하지 ..

GPU 비용의 실체Three.js를 처음 사용할 때는 대부분 이런 흐름으로 시작한다.const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera();const renderer = new THREE.WebGLRenderer();renderer.render(scene, camera); 처음에는 잘 동작한다.하지만 프로젝트 규모가 커지면 갑자기 문제가 발생한다.FPS 하락GPU 사용량 증가모바일 발열메모리 누수브라우저 탭 크래시특정 기기에서만 느려지는 현상문제는 단순하다. 많은 개발자들이 Three.js API는 배우지만,렌더링 구조 자체는 이해하지 못한 상태로 개발하기 때문이다.Three.js 최적화는 단순 팁 모음이 아니다.GPU가 ..

- 해당 글에 나오는 모든 Next.js에 대한 내용은 App Router 기준이다- 해당 글에 나오는 모든 React는 Vite, CRA, Webpack 등 기반의 SPA를 뜻한다 Next.js에서는 왜 axios보다 fetch를 사용하는가?React에 익숙한 분들이라면 더 잘 알겠지만 주로 axios를 사용해서 통신을 하게 된다. 그 이유는 fetch가 제공하지 않는 DX를 axios가 보완하기 때문일 것이다. 그 차이는 라이브러리 선호도의 차이가 아니라 "누가 네트워크 요청을 통제하느냐"의 차이이다.Next.js를 사용하다보면 공식문서, 예제, 베스트 프랙티스 등을 접할 수 있는데 대부분이 axios를 사용하기 보다는 fetch를 사용하는 경우가 압도적으로 많다.이는 Next.js와 React의 D..

매번 프로젝트를 할 때 Next.js와 Nginx를 함께 사용해왔다.그러나 이번에는 Nginx를 사용하지 않기로 했다.Nginx 없이 프론트엔드를 운영하는데 문제가 없을까? 프론트엔드 개발을 하다보면 "배포" 라는 단계에서 Nginx를 만나게 된다.정적 파일을 서빙하려면 Nginx가 필요하다고 배웠고, 실제로 많은 프로젝트에서 그렇게 사용하고 있다.그런데 이번에 프로젝트를 하면서 Nginx 없이 프로젝트를 구성하게 되었다.이런 방식에 대한 이름까지 있었는데 "Nginx-less Modern Stack" 이라는 패턴이었다. Nginx란 무엇인가?Nginx는 웹 서버 소프트웨어이다. 유저가 브라우저에 주소를 입력했을 때 그에 맞는 파일이나 데이터를 돌려주는 프로그램이다.쉽게 비유하자면, 식당의 홀 직원 같..

어떻게 해야 이 프로젝트에 맞는 폴더 구조를 갖출 수 있을까?어떻게 해야 협업 하는데 좋은 방향으로 만들 수 있을까?자칫 쓸데없이 폴더 구조가 무거워지거나 헷갈리진 않을까?괜히 심플하게 했다가 확장성 없이 구현 되진 않을까?내가 알고 있는 방법 외에 또 다른 방법이 없을까?...아마 프론트엔드 개발자라면 사용하는 폴더 구조에 대해서 고민을 해본 적 있을 것이다.나 또한 협업의 관점과 프로젝트의 관점에서 이것저것 섞어서 사용을 해본 경험이 있는데, 폴더 구조를 만들어내는 것은 정말 어려운 것 같다.차라리 Java나 NestJS와 같은 Framework라면 정해진 틀이라고 있을텐데, 특히 React의 경우에는 src/, assets/, public/ 등 외에는 짜여진 틀이 없다보니 src/ 내부에서 여러가지..

Next.JS를 이용해서 웹 개발을 했고, 모바일 사이즈에 맞춰서 반응형도 준비를 했다.실제로 여러 기기 테스트를 해봤을 때 잘 나오는 것을 확인했고, 이제 나가면 되겠지 싶었다.그래서 내가 있는 층의 직원들을 대상으로 베타 테스트를 진행했는데 "모바일에서 스크롤이 잘 안되는 부분이 있어요" 라는 얘기를 들었다.스크롤이 안 될 이유가 없을텐데? 하면서 봤는데 공통점은 모두가 아이폰 유저였고 safari를 기본 브라우저로 사용하는 분들이었다.그리고 스크롤이 안 된다고 말했던 위치는 "캐러셀(Carousel)" 부분 이었다. 나는 평생 안드로이드만 사용해왔고, 주로 Chrome을 사용하는 유저다보니 iOS 스타일의 방식(모달, 팝업, 경고창, 이동 등) 이 익숙치 않다. 이번에도 웹에서 다양한 모바일 사이..

고화질 이미지를 업로드 하고, 웹에서 보여줄 수 있어야 하며, 이미지 여러 장을 한 번에 다운로드 받을 수 있어야 하는 미션이 생겼다.사실 내부 툴이다보니 어드민만 업로드 할 수 있고 최대 5장만 올릴 수 있으며, 마케팅 팀만 다운로드 할 수 있으면 되어서 그리 복잡한 로직이나 고민을 필요로 하진 않는다.하지만 공부도 중요하고, 다른 고화질을 이미지를 다루는 회사에서는 어떤 식으로 작업하는지 궁금해졌기에 우리도 별거 아니지만 적용을 해보면 좋겠다는 생각을 했다. 다른 회사에서는 무엇을 사용하고 있을까?그냥 직관적으로 생각했을 때는 "유저가 고화질 이미지를 업로드" -> "업로드한 이미지 압축" -> "클라우드에 업로드" -> "웹에서 보여질 때는 WebP 등 가벼운 이미지 사용" -> "다운..

이런 문제를 겪어본 적이 있는지 모르겠다."강력 새로고침을 하면 최신버전으로 업데이트가 되는데, 이 후 일반 새로고침을 하면 과거버전으로 돌아와요"여러가지 문제가 있을 수 있는데 내가 간과하고 있었던 것이 캐시의 "우선순위" 였다. 과거의 잔재 PWA회사에서 어떤 프로젝트를 했고, 프로토타입은 간단하게 만들자고 해서 MBTI 같은 느낌으로 심리 설문조사 앱을 만들었다.이 때, PWA까지 붙여서 폰에서 앱처럼 다운로드도 가능하게 만들었는데 이는 나중에 v2.0.0으로 나가자고 하며 어중이떠중이로 레거시가 되어갔다.그런데 어느 날, v1을 사용해야 한다고 하면서 카카오 로그인과 우리 카카오 채널 등록 여부를 확인하고 등록이 확인되면 설문조사가 가능하게 해달라고 요청 받았고, 부랴부랴 일을 끝 마치니 테스..