라쿤의 끄적끄적

Rodrigo Pombo의 Build your own React 블로그 글을 참고해서 리액트의 기본 개념, 기능들을 직접 따라 만들어 보면서, 신경쓰지 못한 부분을 알고 가고자 한다.알아가는 과정 속에서 원글을 응용하여 직접 돌려보며 확인해볼 수 있는 실습환경을 구성 및 번역 내용이 들어간 프로젝트를 만들었다. learn-react-by-building-ko이전 글에서는 리액트의 Fiber 개념과 Render 함수 그리고 Commit 단계, Reconciliation 재조정에 대해서 알아보았습니다.오늘은 리액트의 함수형 컴포넌트 개념과 Hook에 대해서 알아보겠습니다.똑같이 원글을 따라 가며, Step7~Step8 까지의 내용을 담고 있으며 각 스텝마다 실습을 구성했습니다. 추가적으로 원글에는 없지만, ..

Rodrigo Pombo의 Build your own React 블로그 글을 참고해서 리액트의 기본 개념, 기능들을 직접 따라 만들어 보면서, 신경쓰지 못한 부분을 알고 가고자 한다. 알아가는 과정 속에서 원글을 응용하여 직접 돌려보며 확인해볼 수 있는 실습환경을 구성 및 번역 내용이 들어간 프로젝트를 만들었다. learn-react-by-building-ko이전 글에서는 createElement, render 함수를 만들어 보며 원리와 동작을 이해해보고 성능 최적화를 위한 Concurrent Mode에 대해서 알아보았습니다.오늘은 리액트의 Fiber 개념과 Render 함수 그리고 Commit 단계, Reconciliation 재조정에 대해서 알아보겠습니다.똑같이 원글을 따라 가며, Step4~Step..

Rodrigo Pombo의 Build your own React 블로그 글을 참고해서 리액트의 기본 개념, 기능들을 직접 따라 만들어 보면서, 신경쓰지 못한 부분을 알고 가고자 한다. 알아가는 과정 속에서 원글을 응용하여 직접 돌려보며 확인해볼 수 있는 실습환경을 구성 및 번역 내용이 들어간 프로젝트를 만들었다. learn-react-by-building-ko이전 글에서는 기본적인 구조화된 객체를 실제 DOM으로 만들어 보며, 리액트가 JSX와 DOM 요소를 어떻게 구성하는지 복습하며 알아봤었습니다.오늘은 리액트의 createElement, render 함수를 만들어 보며 원리와 동작을 이해해보고 성능 최적화를 위한 Concurrent Mode에 대해서 알아보는 시간을 가져보려 합니다.똑같이 원글을 따라..

앞서, 리액트 다시 생각해보기 글을 시작으로 리액트의 특성을 이해하고 사용하기만 했지, 정확히 어떤 형식과 매커니즘으로 동작하는지에 대해서 구체적으로 알아보는 시간이 없었던 것 같았습니다.Rodrigo Pombo의 Build your own React 블로그 글을 참고해서 리액트의 기본 개념, 기능들을 직접 따라 만들어 보면서, 신경쓰지 못한 부분을 알고 가고자 합니다.알아가는 과정 속에서 원글을 응용하여 직접 돌려보며 확인해볼 수 있는 실습환경을 구성 및 번역 내용이 들어간 프로젝트를 만들었습니다. learn-react-by-building-koRodrigo Pombo의 'Build your own React'를 바탕으로 리액트의 핵심 메커니즘을 직접 구현해보며 깊이 있게 이해하는 과정을 공유합니다.구..

지난 글에서 프론트엔드 생태계의 거대한 흐름을 회고해 보았다면, 이번에는 그 중심에 있었던 리액트(React)를 다시금 톺아보고자 한다. Vue나 Angular 같은 쟁쟁한 경쟁자들 사이에서 리액트가 독보적인 선택을 받았던 이유는 무엇일까?DOM과 상태의 동기화: 새로운 패러다임의 제시과거 바닐라 자바스크립트나 jQuery 중심의 개발 환경에서는 상태가 변할 때마다 해당 상태와 연결된 DOM을 수동으로 동기화해야 했다. 명령형 프로그래밍 방식은 서비스가 커질수록 로직이 어디서 어떻게 실행되는지 추적하기 어렵게 만들었다.리액트는 여기서 "매 렌더링마다 UI 전체를 다시 그리자"라는 파격적인 방향을 제시했다. 내부적으로 Virtual DOM을 활용해 실제 변경된 부분만 효율적으로 반영하는 구조를 갖췄고, 특..

2021년부터 프론트엔드 개발자로서 커리어를 쌓아왔다. 당시 프론트엔드 생태계는 엄청나게 빠른 트렌드 변화의 중심에 있었다.2021년 당시 표준 보일러플레이트는 React + Webpack + Babel 기반의 CRA(Create React App)였으며, JavaScript가 주류였다.상태 관리는 MobX도 있었지만, Redux 가 시장을 지배하던 시절이었다.그러다 조금이라도 커스텀 설정이 필요하면 CRA를 eject해야 했는데, 직접 Webpack을 관리하는 것은 매우 까다로운 작업이었다. 앱이 복잡해질수록 안정성 문제가 대두되었고, 정적 분석의 필요성에 대한 논의가 활발해지면서 React에서도 본격적으로 TypeScript를 지원하기 시작했다.한편, 모듈 표준 문제로 진통을 겪던 JS 진영은 Com..

서비스가 성장하다 보면 반드시 마주치는 순간이 있습니다. 어제까지 멀쩡하던 API가 오늘은 유난히 느려지고, 서버 팀에서는 "데이터가 너무 많아서 인덱스를 타도 한계가 있다"거나 "리소스 증설이 필요하다"는 이야기가 들려오기 시작하죠.하지만 모든 문제의 해답이 서버에만 있는 것은 아닙니다. 때로는 프론트엔드에서 사용자의 기다림을 정의하는 방식을 바꾸거나, 서버로 향하는 요청의 성격을 조정하는 것만으로도 시스템 전체의 가용성을 드라마틱하게 높일 수 있습니다. 제가 실무에서 겪었던 두 가지 '프론트엔드에서 시작한 최적화' 사례를 통해, 우리가 어떻게 서버의 압박을 덜어내고 사용자의 경험을 지켜냈는지 공유하고자 합니다.1. "기다리게 하지 말고, 과정을 공유하세요"엑셀 대량 작업 생성의 비동기 전환로봇 물류 ..

글로벌 서비스를 위한 다국어(i18n) 개발기: 번역 자동화부터 타임존 대응까지자율주행 물류 서비스가 현장에서 실질적인 생산성 향상을 증명해내면서, 감사하게도 글로벌 시장 진출을 위한 준비를 시작하게 되었습니다. 글로벌 서비스의 핵심은 단연 다국어 지원(Internationalization, i18n)입니다. 하지만 단순히 텍스트를 번역하는 것을 넘어, 통화, 숫자, 날짜 형식의 로컬라이징부터 타임존 대응, 글로벌 인프라 최적화까지 프론트엔드 엔지니어가 고민해야 할 지점은 생각보다 훨씬 넓고 깊었습니다. 이번 글에서는 그 치열했던 고민의 과정과 해결책을 공유하고자 합니다.1. 다국어 매핑의 기본과 UI 파편화 해결프론트엔드에서는 주로 react-i18next를 사용하여 언어별 JSON 언어팩을 Key-V..

자율주행 로봇이 활약하는 물류 현장. 이곳은 겉으로는 첨단을 달리는 듯 보이지만, 개발자에게는 예측 불가능한 네트워크 환경과 싸워야 하는 전쟁터입니다. "로봇은 잘 움직였다고 하는데, 왜 우리는 문제를 재현할 수 없을까?" 이 질문은 현장에서 흔히 마주하는 답답함이자, '재현 안 되는 버그'의 시작점입니다. 로그는 부족하고, 고객의 이야기를 들어도 핵심 맥락을 놓치기 일쑤죠. 이 글은 이런 현장 속에서 저희가 어떻게 문제의 실마리를 찾아내고, 운영의 안정성을 확보했는지에 대한 이야기입니다.1. 답답한 현실: "무엇이 문제인지 아무도 모른다"서비스 초반, 몇 대 안 되는 로봇을 운영할 때도 문제가 생기면 그야말로 '맨땅에 헤딩'이었습니다. 현장에서 "로봇이 이상했어요"라는 제보가 들어와도, 그게 시스템 문..

물류 로봇 서비스를 개발하다 보면 가장 큰 벽에 부딪히는 지점이 있습니다. 바로 '실제로 로봇 수십 대가 동시에 움직일 때도 잘 작동할까?'라는 의문입니다.로봇 한두 대를 테스트하는 건 어렵지 않습니다. 하지만 현장 환경, 로봇 설정, 시나리오가 제각각인 상황에서 수십 대의 로봇이 얽히며 발생하는 변수들을 사람이 일일이 확인하기란 불가능에 가깝습니다. 실제 로봇 수십 대를 매번 나열해두고 테스트할 수도 없는 노릇이고요.이 고민 끝에 탄생한 '통합 시스템 연동 검증 플랫폼' 구축 과정을 나누어보려 합니다.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로 아주 친절하게 보여주고 있습니다.초창기에는 정말 단순하게 설치 파일 다운로드..