라쿤의 끄적끄적

물류 로봇 서비스를 개발하다 보면 가장 큰 벽에 부딪히는 지점이 있습니다. 바로 '실제로 로봇 수십 대가 동시에 움직일 때도 잘 작동할까?'라는 의문입니다.로봇 한두 대를 테스트하는 건 어렵지 않습니다. 하지만 현장 환경, 로봇 설정, 시나리오가 제각각인 상황에서 수십 대의 로봇이 얽히며 발생하는 변수들을 사람이 일일이 확인하기란 불가능에 가깝습니다. 실제 로봇 수십 대를 매번 나열해두고 테스트할 수도 없는 노릇이고요.이 고민 끝에 탄생한 '통합 시스템 연동 검증 플랫폼' 구축 과정을 나누어보려 합니다.1. 왜 굳이 E2E 테스트였을까?유닛 테스트나 통합 테스트는 각 부품이 고장 나지 않았음을 증명합니다. 하지만 로봇 서비스는 로봇 클라이언트 - 관제 서버 - 물류 서비스 서버 - 관리자 UI가 하나의 ..

B2B 서비스를 만들다 보면, 고객사의 요구사항(VoC)은 단순한 '의견'을 넘어 프로젝트 전체를 뒤흔드는 거대한 파도로 다가올 때가 많습니다. 특히 대규모 고객사의 한 마디는 비즈니스 임팩트가 크기에, 우리 개발자들은 본능적으로 "어떻게 구현할까?"부터 고민하며 설계도를 펼치곤 하죠.하지만 가끔은 잠시 멈춰서 물어야 합니다. "정말 그 기능이 최선일까?" 하고요.1. "수개월이 걸릴 대형 프로젝트의 예감"최근 현장 운영팀으로부터 긴급한 요구사항이 전달되었습니다. "고객사에서 워크스페이스 1개로 로봇을 여러 층(다층)에서 운영하고 싶어 합니다. 지금 구조로는 안 되니 신규 개발이 필요할 것 같아요."층을 넘나들려면, 엘리베이터 제어 연동 작업에 작업 관리 및 명령에 관한 부분도 모두 추가 설계를 발생시키..

1. 검색으로는 답이 나오지 않는 지점들개발자로 살면서 마주하는 진짜 어려운 문제들은 의외로 구글이나 스택 오버플로우에 답이 없습니다. 우리 팀만의 복잡한 비즈니스 로직, 꼬여버린 레거시 코드, 그리고 특정 산업 도메인에서만 발생하는 기괴한 이슈들. 이런 것들은 결국 혼자 끙끙대며 코드를 파헤치고 수많은 시행착오를 겪어야만 풀리는 숙제들이었습니다.저 역시 그 과정에서 참 많이 지치기도 했습니다. "다들 이렇게 고생하면서 배우는 게 맞나?" 싶기도 하고, 누군가에게 물어보고 싶어도 내 맥락을 다 설명하는 데만 한나절이 걸릴 것 같아 포기하곤 했죠. 그렇게 에너지를 쏟아붓는 게 당연한 줄 알았던 시절이 있었습니다.2. 가볍게 시작해서 깊숙이 이식하기까지처음엔 그저 신기해서 써본 ChatGPT와 Gemini였..

엔지니어링에서 완벽한 '은탄환'은 존재하지 않습니다. 모든 기술적 의사결정은 결국 얻는 것과 잃는 것 사이의 트레이드오프(Trade-off)를 결정하는 과정입니다. 회사 서비스를 다양한 고객사의 화이트 라벨링 요구사항에 대응하기 위해 시도했던 FSD(Feature-Sliced Design) 아키텍처 도입과 인프라 기반 설정 주입 전략 역시 그 여정의 연속이었습니다. 단순히 무엇을 구축했는지를 넘어, 어떤 고민을 했고 운영 과정에서 무엇을 느꼈는지에 대한 회고를 공유합니다.1. 직면한 문제: 기능의 파편화와 예측 불가능한 영향 범위서비스가 초기 단계를 넘어 고도화될수록 프론트엔드 코드는 필연적으로 비대해졌습니다. 로봇 운영 시나리오가 복잡해지고 고객사가 늘어남에 따라 다음과 같은 문제들이 발생했습니다.비대..

물류 센터는 프론트엔드 엔지니어에게 가혹한 환경입니다. 수천 평의 창고 부지에는 필연적으로 Wi-Fi 음영 구역이 존재하며, 이동 중인 로봇에 탑재된 클라이언트는 시시각각 네트워크 단절과 지연을 경험합니다. 이러한 환경에서 '데이터 정합성'과 '끊김 없는 사용자 경험(UX)'이라는 두 마리 토끼를 잡기 위해 고민했던 기술적 해결책들을 공유합니다.1. 직면한 문제: "로봇은 움직이는데, 데이터는 멈췄다"자율주행 물류 피킹 서비스를 운영하며 가장 빈번하게 발생한 문제는 네트워크 불안정으로 인한 서비스 이탈이었습니다.UI 프리징: API 응답을 기다리는 동안 화면이 멈추거나 로딩 스피너가 무한히 도는 현상.데이터 오염: 네트워크 지연 중 사용자의 중복 클릭으로 인해 동일한 작업 명령이 여러 번 전송되는 문제...

들어가며안녕하세요. 자율 주행 로봇 회사 트위니에서 물류 로봇 서비스 FE 개발을 하고 있는 라쿤입니다.돌이켜보면 2022년을 기점으로 제품을 본격적으로 만들기 시작하면서, 시간은 정말 눈 깜짝할 사이에 흘러간 것 같아요. 정신없이 달려오다 보니 어느새 꽤 많은 이야기들이 쌓여 있더라고요.그동안은 기술적인 내용을 중심으로 글을 써왔는데, 요즘 들어서는 단순한 기술 이야기보다는 제품을 만들어 가는 과정, 그리고 그 안에서 제가 느꼈던 생각들을 한 번쯤은 정리해보고 싶다는 생각이 들었습니다. 그래서 오늘은 조금은 편한 마음으로 이 글을 써보려고 합니다.하나의 제품 뒤에는 생각보다 많은 것들이 있다물류 로봇 서비스 하나를 운영한다고 하면, 흔히 로봇만 떠올리기 쉬운데요. 실제로는 그 뒤에 정말 많은 서비스들이..

요즘 Nodejs 개발 환경 구성하기Nodejs는 프론트엔드 개발자가 가장 먼저 설치해야 할 javascript 런타임 프로그램 입니다. 옛날에는 공식 홈페이지에 들어가서 설치하면 설치 파일을 다운로드 받아서 설치하였습니다. 하지만 요즘에는 Nodejs 버전을 관리하는 커맨드 라인 툴을 통해서 받는 형식이 보편화되고 있습니다.이번 시간에는 예전과 달리 간단하게 Nodejs를 설치하고, 버전을 관리하는 방법에 대해서 이야기 해보려고 합니다. CLI로 설치하기 Nodejs 공식 다운로드 페이지를 확인하면, 설치하려는 Nodejs 버전, OS, Nodejs 버전 매니저 및 패키지 매니저를 설정하여 다운로드 할 수 있는 방법을 CLI로 아주 친절하게 보여주고 있습니다.초창기에는 정말 단순하게 설치 파일 다운로드..

WSL 환경 구성하기배경윈도우 환경에서 개발을 진행하거나, 시스템을 돌리는 경우 호환성 및 리소스 효율성이 떨어지는 등의 문제가 발생하고 있고 Docker를 돌리거나 쉘 파일을 돌려야 하는 경우 WSL 설치가 필수적입니다.또한, 대부분의 클라우드 서버 등의 서비스는 Linux 기반의 OS에서 돌리는 경우가 많습니다.그리고, Github Action을 작성할 때도 bash 스크립트를 작성하는 경우가 많기 때문에 해당 환경과 친해질 필요가 있습니다.사실 Mac쓰면 됩니다. 그러기엔 Mac에 적응하기에 너무나 늦어버려서 저는 Windows를 씁니다. WSL ?WSL(Linux용 Windows 하위 시스템)은 Windows 운영 체제 내에서 Linux 환경을 실행할 수 있도록 해주는 호환성 계층입니다. 쉽게 말..

웹 서비스 안드로이드 환경에서 제공하기 (WebAPK, TWA)23년도에 웹 서비스가 키오스크와 같은 모습으로 특정 안드로이드 기기에서 설치되어 제공되어야 하는 상황이 발생했습니다. 웹 서비스를 안드로이드 환경에서 앱 처럼 사용자에게 제공할 수 있는 방법을 찾기 위해서 23년도 당시 탐구하고 고민하여 서비스를 제공했던 경험을 공유합니다.목표안드로이드 태블릿에서 키오스크와 같은 형태로 사용자에게 서비스 제공하기제한 사항프론트엔드 인력만 활용 가능안드로이드 개발자분이 계시긴 하지만, 서비스 자체를 개발하기에는 부족하여 현재 여유가 되는 프론트엔드 개발자 위주로 개발 진행 가능했습니다.모바일 환경에 대한 전문성 부족보통 채용 현황이 React 기반의 웹 프론트엔드 개발자로만 구성되어 있는 상태현재 서비스할 기..

Github 여러 계정 사용하기회사 또는 다른 조직에서 활동을 하는 경우 보통 새로운 Github 계정들을 활용하여 작업을 진행하게 됩니다.보통 작업을 진행하다 보면 하나의 디바이스에서 여러 계정들에 접근해서 작업을 진행하는 경우 인증 문제가 발생하는 경우가 많습니다. 이전에는 Git에서 Github 아이디, 패스워드 방식의 인증을 통해서 진행했지만 2021-08-13일부터 Git에서 Github 패스워드 인증 방식을 제공하지 않기 시작하면서 토큰(Personal Access, OAuth, SSH Key) 방식의 인증 방식을 사용하도록 하고 있습니다.하나의 디바이스에서 여러 계정들에 손쉽게 접근하여, 인증되고 작업을 진행할 수 있는 설정에 대해서 설명합니다. 설명하고 있는 내용은 wsl 환경을 기준으로 ..

📝 Design Pattern 면접을 갔다가, 코드 리팩토링에 대해서 이야기 하던 중 디자인 패턴을 알면 도움이 많이 된다는 이야기를 나눠서 공부해 보려고 합니다. 공부한 내용과 생각을 적고 있습니다. 정확한 자료는 아닐수 있으니 맹신하지 마시길 바랍니다. 항상 다른 자료와 교차 검증을 통해 참고해 주세요. 디자인 패턴 건축의 공법에서 착안하여 목적에 따른 효율적인 코드 작성법을 위한 소프트웨어의 개발 방법(규칙, 패턴)을 공식화 하면서 시작되었습니다. MVC 패턴 (Model View Controller) 유지보수가 편해지는 코드 구성 방식 4 분 안에 MVC 설명 by Web Dev Simplified Controller 컨트롤러는 사용자의 요청에 따라서 Model에 데이터를 의뢰하고, 데이터를 Vi..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 기본 수학 문제 1 (3개) 최대한 반복문 없이 수학을 활용하도록 노력했습니다. (4) 달팽이는 올라가고 싶다. 정상 까지 도착하면 무조건 올라가는 것으로 끝난다고 볼 수 있습니다. 무조건 u - d + u - d + ... + u로 끝납니다. day(u-d) + d = h day = (h-d)/(u-d) // (4) 달팽이는 올라가고 싶다 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString()..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 기본 수학 문제 1 (3개) 최대한 반복문 없이 수학을 활용하도록 노력했습니다. (1) 셀프 넘버 // (1) 손익분기점 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().trim().split("\n"); input = input[0].split(" ").map((num) => Number(num)); const dCost = input[0]; const vCost = input[1]; ..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 함수 문제 (2개) (1) 셀프 넘버 // (1) 셀프 넘버 const range = new Set([]); for (let i = 1; i { alphabets[al.charCodeAt(0) - 65] += 1; }); const maxCount = Math.max(...alphabets); if (alphabets.filter((i) => i === maxCount).length > 1) { console.log("?"); } else { console.log(String.fromCharCode(alphabets.indexOf(maxCount) + 65)); } (6) 단어의 개수 // (6) 단어의 개수..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 배움 console.log를 통해서 하나 하나 출력하면, 느리므로 시간제한이 있는 경우 출력 값들을 변수에 계속 추가하는 식으로 하여 최종 마지막에 console.log 한번만 불러서 모두 출력하도록 하자. (출력이 줄 단위로 표기해야 하는 경우 추가하는 값의 마지막에 개행 문자를 추가하는 식으로 하면 된다.) input을 받아오는 경우, 가끔 개행 문자중에 \n 만이 아니라 \r\n인 경우도 있다. 입력값을 받아올 때는 trim하여 확인해 보자 어떤 개행 문자가 들어 있지는 않은지 윈도우 : \r\n, 유닉스 \n, 맥 \r 너무 최신의 ES 문법의 경우 백준에서 인식하지 않을 수도 있다. 1차원 배열 문제..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. Node.js로 문제 푸는 방식 Node.js로 백준 문제를 푸는 경우 다른 언어에 비해서 입출력을 따로 다루어 주어야 합니다. 백준 문제의 경우 성능도 다루기 때문에 많은 사람들이 Node.js의 fs 파일 시스템 모듈을 활용하여 입력을 받고 출력하여 문제를 제출하게 됩니다. fs로 간혹 안되는 부분은 readline을 사용해야 합니다. // fs 방식 입력 받기 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePa..