hmk run dev

"비즈니스는 속도가 생명이다." 초기 단계에서는 빠른 제품 출시와 시장 적응을 위해 효율성보다 결과를 우선시하기 쉽다. 이는 자연스럽게 기술 부채를 남기고, '레거시 코드'라 불리는 코드 뭉치나 비효율적인 아키텍처로 이어진다. 하지만, 레거시는 단순히 부정적인 요소가 아니다. 오히려 현재의 비즈니스를 지탱하는 '기반'이자 과거의 성과를 보여주는 흔적이기도 하다."우리는 이 레거시 덕분에 지금까지 성장할 수 있었다." 라는 생각도 가능하다. 레거시란 무엇인가?레거시는 단순히 "오래된 코드"를 의미하지 않는다. 본질적으로 유지보수가 어렵고, 팀의 생산성을 저하시키는 시스템을 뜻한다. 이는 코드의 나이가 아니라 구조적 문제, 복잡성, 문서화 부족, 또는 기술 부채로 인해 발생하는 결과이다.또 다른 관점에서, ..

현대의 React 개발에서는 훅이 상태와 부수 효과를 관리하는 강력한 도구로 자리 잡았습니다. 훅을 사용하면 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있어 코드가 모듈화되고 유지보수가 쉬워집니다. 이번 포스트에서는 useModal이라는 커스텀 훅을 사용하여 React 컴포넌트를 어떻게 개선했는지에 대한 실제 사례를 소개합니다.  기존 접근 방식 useModal을 도입하기 전에는 컴포넌트 내에서 모달 로직을 직접 처리했습니다. 이 방식은 반복적인 코드가 많아지고, 애플리케이션의 여러 부분에서 모달 상태를 관리하기 어려워지는 문제가 있었습니다. 다음은 모달 로직이 어떻게 처리되었을지에 대한 간단한 예입니다:// ... 기존 코드 ...const [isModalOpen, setIsModalOpen] =..

로그는 에러 뿐만아니라 비즈니스 결정을 위한 중요한 요소가 된다.     이처럼 많은 로그를 자동화하기 위해서 많은 중복 코드가 발생할 수 밖에 없다.  토스는 자체 디자인 시스템인 TDS를 이용해 로깅을 자동화했다.  첫번째 시도 - 디자인시스템에 로그 기능을 추가하자개발 비용도 적고 기존에 사용하던 곳에도 적용하기 쉬웠음 그러나, 계열사 별로 로그 코드가 많고 형태가 달라 통합하기 쉽지않음그리고 로깅관련 코드가 함께 배포되는 이슈가 있었음  TDS가 로깅관련 코드를 포함해 로깅관련 수정사항을 반영하면 모든 컴포넌트의 디자인 사양도 변경해야하는 문제도 발생했다.   두번째 시도 -  HOC 형태로 로그 감싸기  TDS 컴포넌트를 감싸 제공하는 형태로 제공,서로 독집적으로 수정하고 배포가 가능해졌다. ..

프론트엔드 개발의 중요성프론트엔드프런트엔드 개발은 웹 애플리케이션이나 웹사이트의 ‘얼굴’입니다. 사용자가 처음 만나는 부분이기 때문에, 프런트엔드 개발의 품질은 사용자의 첫인상에 직접적인 영향을 미치죠. 하지만 왜 그렇게 중요한 걸까요? 몇 가지 예시를 통해 살펴보겠습니다.   1. 사용자 경험(UX)사용자가 웹사이트를 방문했을 때, 그들이 어떻게 느끼는지가 중요합니다. 예를 들어, 여러분이 좋아하는 온라인 쇼핑몰에서 상품을 검색할 때, 결과가 빠르게 나타나고, 디자인이 깔끔하며, 직관적으로 탐색할 수 있다면, 그 경험이 얼마나 긍정적일까요? 반면, 느린 로딩 속도와 복잡한 내비게이션으로 인해 불편함을 느낀다면, 아마도 다시 방문하고 싶지 않을 겁니다. 이처럼 프런트엔드 개발은 사용자 경험을 극대화하는..

WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를포착하고 마음대로 스트림 할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. 실시간 통신: 브라우저 간에 실시간으로 오디오, 비디오, 데이터 스트림을 주고받습니다.(기본적으로 UDP 사용)플러그인 불필요: 별도의 설치나 플러그인이 필요 없으며, HTML5와 자바스크립트만으로 통신이 가능합니다.P2P 연결: 서버를 통해 데이터를 중계하지 않고, 사용자들끼리 직접 통신하여 지연 시간을 최소화합니다.보안: 기본적으로 모든 통신은 암호화되어 있어, 보안이 중요한 실시간 통신에 적합합니다. 중개서버를 거치지 않기 때문에 빠른 속도로 통신이 가능하며 HTTPS..

3년 차 프런트엔드 개발자로서, 요즘 많은 개발자들이 사용하는 React와 Next.js 같은 프레임워크를 나도 사용하고 있다.그러다 문득, 내가 현재 쓰고 있는 기술 스택들이 왜 등장하게 되었는지, 그리고 어떤 문제를 해결하거나 개선했기에 지금까지 널리 사용되고 있는지 궁금해졌다. (재미있게도, 일부는 과거 방식으로 되돌아가는 것처럼 보이기도 한다.)참고로, 이 글에서는 WEB 1.0이나 IE 등장 등 웹의 초기 역사보다는, JSP 등의 백엔드 중심 개발에서 프런트엔드 직군이 본격적으로 생겨난 시점부터 이야기를 시작해 보려고 합니다.프런트엔드 직군의 탄생: 백엔드 중심에서 프런트엔드로초기 웹 개발: 웹 개발 초기에는 프런트엔드와 백엔드의 경계가 불분명했습니다. JSP, PHP, ASP 같은 서버 사이드..

일정에 쫓겨 정신줄 놓고 코딩하다 보면 오히려 동료들의 코드리뷰 시간과 수정하는 리소스가 들어 비효율을 초래하게 된다. 이틀 동안 바쁘게 개발하다 보니 호되게 코드리뷰를 받고, 다시는 같은 실수를 반복하지 않기 위해글로 남기려고 한다~  코드리뷰부끄럽지만 같은 실수를 하는 것은 나와 나의 동료의 리소스를 뺐을 수 있다.적어두고 몸에 배어 단단한 습관이 되도록 기록하고 계속 읽어보자  props로 setter(setState)하는 콜백은 되도록이면 넘기지 말기 - 되도록이면 호출이 필요한 시점에 호출을 트리거하는 곳에서 호출하자 - 코드를 유지보수하는 쪽에서 작동을 파악하는 데 더 용이함- 호출 제어권을 밖으로 빼어 사이드 이펙의 가능성을 줄임- 양방향 데이터 바인딩은 지양  핸들러 네임 컨벤션 - pro..

마이크로 프런트엔드란? 마이크로 프런트엔드는 소규모 프런트엔드 서비스를 독립적으로 개발, 배포, 운영할 수 있게 하는 아키텍처 패턴. 전통적인 단일 프론트엔드 애플리케이션 대신 여러 개의 작은 프런트엔드 애플리케이션으로 애플리케이션을 분리합니다. 마이크로 프런트엔드의 주요 목표와 문제 해결 포인트는 다음과 같습니다. 독립적인 개발 및 배포: 각 마이크로 프런트엔드는 독립적으로 개발, 테스트, 배포할 수 있어 더 빠르게 애플리케이션을 개선하고 배포할 수 있습니다. 기술 스택의 유연성: 마이크로 프론트엔드 아키텍처는 다양한 프런트엔드 기술 스택을 사용할 수 있어 팀이 선호하는 기술을 선택하여 개발할 수 있습니다. (React, Vue, Svelte 등등) 재사용성 및 확장성: 기능이나 컴포넌트를 재사용하거나..

디자인 패턴이란? 소프트웨어에서 디자인 패턴은 반복적으로 발생하는 문제 상황에 대한 해결책을 제시하는 일반적인 설계 템플릿입니다. 디자인 패턴은 소프트웨어 공학에서의 최선의 실천 방법을 정리하고, 재사용 가능한 코드를 작성하기 위한 지침을 제공합니다. 디자인 패턴은 다음과 같은 주요 목적을 가지고 있습니다: 재사용성: 디자인 패턴은 특정 문제에 대한 해결책을 제공하므로, 해당 문제가 발생할 때마다 동일한 패턴을 재사용할 수 있습니다. 이를 통해 코드의 재사용성이 증가하고, 개발 시간과 비용을 절감할 수 있습니다. 유지보수성: 디자인 패턴은 코드의 구조화를 도와주며, 코드의 의도를 명확하게 전달합니다. 이는 코드를 이해하고 유지보수하는 과정을 단순화하고 오류를 방지할 수 있도록 돕습니다. 확장성: 디자인 ..

지속 가능한 프런트엔드 컴포넌트를 개발하는 과정에서 중요한 측면 중 하나는 기획이 변경되었을 때 코드 수정이 필요한 상황에 대한 대비책을 마련하는 것입니다. 코드의 수정이 필요한 경우가 생겼을 때, 심지어 모든 코드가 필요 없어질 수도 있는 상황이 발생할 수 있습니다. 그러나 이는 제품이 변화하고 성장하는 과정에서 피할 수 없는 현상이며, 고객이 원하는 사용자 경험을 제공하기 위해는 빠르게 대응할 필요가 있습니다. 여기서 강조해야 할 중요한 이유 중 하나는 모든 사용자가 제품을 원활하게 사용하고 있는 경우에도 제품이 변경되어야 하는 이유가 있다는 점입니다. 제품은 사용자의 니즈와 시장 동향에 부응하기 위해 지속적으로 발전하고 있으며, 기획이나 디자인이 언제든지 변할 수 있습니다. 이러한 유연성은 사용자가..