본문 바로가기

전체 글

 (19)
누군가의 이웃 누가복음 10장 25절 근처를 보면, 유명한 선한 사마리아인의 이야기가 나온다. 이 이야기는 한 율법 교사가 예수를 시험하고자 던진 질문에서 시작된다."어떻게 해야 영원한 생명을 얻을 수 있습니까?" 29절을 보면 그가 자기를 옳게 보이려 했다는 설명이 덧붙는다. 이 문장을 통해 짐작해보면, 그의 질문은 진지한 배움의 요청이라기보다 자신이 이미 옳은 삶을 살고 있다는 것을 확인받고 싶었던 마음에 더 가까웠을지도 모르겠다. 예수님은 그가 대답한 "하나님을 사랑하고 이웃을 사랑하라"는 말에 동의하시며, 그렇게 살라고 말씀하신다. 그러나 그 대답만으로는 충분하지 않았던 것인지, 그는 다시 묻는다."그렇다면, 내 이웃은 누구입니까?" 내 20대는 정말로 힘든 시기였다. 재수까지 하며 어렵게 들어간 대학교였지만,..
왜 나는 React를 싫어하게 되었나 TL;DRReact를 싫어하게 된 이유는 특정 API나 문법 때문이 아니라, 컴포넌트와 렌더링을 묶어버린 구조적 선택 때문이다.함수형 컴포넌트와 Hooks는 코드 재사용성과 단순한 API를 제공했지만, 그 대가로 수명과 상태를 가진 객체 모델을 함수 문법 뒤에 숨겼다.Fiber, Concurrent Rendering, React Compiler로 이어지는 변화는 기능 확장이라기보다, 기존 구조가 만들어낸 복잡성을 계속 보완해온 과정에 가깝다.React의 렌더링 모델은 View와 Model을 분리하려는 전통적인 설계를 성능 비용과 함께 고민하게 만든다. 그 결과, 컴포넌트 설계의 기준이 도메인이 아니라 프레임워크 내부 실행 모델로 이동한다.Vue.js, SolidJS, Svelte, Qwik과 같은 프레임..
Chart.js 버그 픽스 컨트리뷰션 회사에서 신규 화면 구성을 위해 Chart.js를 사용하던 중 복장터지는 레이아웃 버그를 하나 만나게 되는데... 바로 이 툴팁의 위치가 미묘하게 왼쪽으로 틀어져버리는 버그였다. Chart.js 옵션 중 stack이라는 것을 활용하면 위처럼 하나의 bar 엘레먼트에 두 데이터를 쌓아서 표시할 수 있는데, 이 경우에 툴팁의 포지션이 틀어져버리는 것이었다. 왜그러는 것인가.. 소스 코드를 분석하던 중 툴팁 관련 로직이 모여있는 plugin.tooltip.js 파일을 발견. 이 파일 안에 있는 `positioners.average` 함수가 툴팁의 위치를 계산해주는 놈이었다. const positioners = { average(items) { if (!items.length) { return false; } ..
혜움 레포트 프론트 개선 - 2 지난 이야기... 안녕하세요. 혜움랩스에서 개발자로 일하고 있는 문현제입니다. 이번 글에서는 전편에 이어서 프론트 개선 작업을 하면서 마주쳤던 어려움들과 해결 과정에 대해서 적어보려고 합니다. Frontend 마이그레이션 전략 장고템플릿과 Vue 코드가 강하게 결합된 기존 형태에서, 온전한 SPA로 프론트 앱을 어떻게 분리시킬지 결정이 필요했습니다. 기존에 동작하고 있는 서비스를 문제없이 사용자들에게 제공하면서 신규 프레임워크 Vue3도 적용할 수 있어야 했습니다. 여러 방식들을 리서치 해본 결과, path 별로 다른 앱을 보여주는 방식, 레거시 앱을 전부 신규 앱으로 이전하는 방식, 하나의 화면에 두 앱이 표시되는 multi-app 방식을 고려했습니다. path별 앱 분리 path 별로 앱을 분리하는 ..
혜움 레포트 프론트 개선 - 1 안녕하세요. 혜움랩스에서 개발자로 일하고 있는 문현제입니다. 혜움에는 혜움 레포트라는 세무 서비스를 위한 페이지가 있습니다. 이번 글에서 혜움 레포트를 점진적으로 개선했던 경험을 공유해보려고 합니다. 혜움의 서비스는 장고로 구성되어 있고 모든 트래픽을 장고에서 처리하는 방식이었습니다. 사용자가 브라우저를 통해 혜움 레포트에 접속하면 다음과 같이 요청이 처리되고 있었습니다. 그리고 혜움 레포트의 화면은 장고 템플릿으로 공통 컴포넌트가 그려지고 실제 메인 페이지 부분은 django-webpack-loader를 통해 vue.js앱이 그려지고 있었습니다. 또한 장고 템플릿으로만 작업된 페이지들도 있었습니다. 이런 구조 속에서 개발을 하면서 불편한 점이 몇 가지 있었습니다. 화면에 그려주는 로직이 프론트(vue...
레거시 코드에 대해 레거시라는 단어는 유산이라는 뜻이다. 이 단어 안에는 특정한 가치를 가지고 있지 않다. 물려 받은 유산이 좋은 것인지 나쁜 것인지 알 수 없기 때문이다. 다만 소프트웨어 업계에서는 이 단어가 꽤나 부정적인 뜻을 가지고 있는 것 같다. 레거시에 대한 이미지는 대부분 '잘 구조화 되어 있지 않은', '테스트가 잘 되어있지 않은', '복잡한', '구식의' 등의 단어를 연상하게 한다. 개발자로 일을 시작한지 얼마 안되었을 때, 제대로 짜여져있지 않은 레거시 코드들을 보며 이전 작업자들을 이해할 수 없다는 식으로 생각한 적이 있었다. '왜 이렇게 작업을 했지', '나라면 더 잘 짰을 것 같은데' 이런 생각을 하면서 말이다. 그런데 개발자로 조금 더 일을 해보니 생각이 달라졌다. 첫 번째로 바뀐 생각은 내가 했어도..
타입스크립트가 싫다 js를 사용하는 곳이라면 대부분 ts를 도입하고 사용하려 한다. 타입이 모든 에러를 잡아줄 것이다라는 희망을 가진 수 많은 개발자들이 ts를 찬양하고 도입하는 추세이다. 근데 나는 ts가 별로인 것 같다. 모든 코드가 완벽한 타입으로 정의 되어있고 ide가 모든 것들을 잘 처리해주면 불만이 없을 텐데, 사용하다보면 타입 없이 js로 개발된 모듈을 사용해야될 때가 있고, 그를 보완하기 위해 @types/어쩌구 패키지를 설치해야하며, js로 작성된 모듈이 변경될 때 types도 수정을 해줘야한다. 그마저도 types 패키지가 없으면 직접 모듈 문서를 참고하여 타입을 선언해줘야 한다. any 같은 타입을 허용할 거면 애초에 ts를 쓰는 이유가 없다. 정적 타입 체킹이 과연 오류를 줄이는데 도움을 주는가에 대한..
토픽 트롤리 토트 폴딩 MTX 바스켓 생활차로 사용하는 자전거에서 짐을 적재하는 능력은 굉장히 중요하다고 생각한다. 음식을 포장해서 가져온다거나 장을 봐올 때 자전거에 실을 수 있는 것이 내가 생각하는 생활차의 핵심이다. 다만 내 자전거는 본격적인 라이딩과 생활차의 역할 모두를 수행해야 하기 때문에 적절한 짐받이와 바구니가 필요했다. 그래서 선택한 것이 토픽 MTX 바스켓이다. 토픽에서 나온 MTX 형식의 짐받이에 체결하여 고정할 수 있는 방식이어서 장착, 분리가 쉽다. 게다가 바퀴와 손잡이가 달린 접이식 바구니여서 활용성이 굉장히 좋다. 펼친 상태에서 박스 형태의 강성을 확보하기 위해 두 개의 보강바를 적용했다. 무거운 짐을 실을 때 확실히 유용하다. 토픽 제품이 저렴하다고 할 수는 없겠지만 만듬새나 사용성이 상당히 훌륭한 제품이라고 생각..

티스토리툴바