들어가며MF(Module Federation)은 Webpack 5의 핵심 기능으로, 여러 독립적인 애플리케이션 간에 코드와 리소스를 실시간으로 공유할 수 있게 해주는 기술입니다. 이 기술은 마이크로프론트엔드 아키텍처를 구현하는 데 매우 효과적인 도구이며, 대규모 프론트엔드 애플리케이션을 더 작고 관리하기 쉬운 단위로 분할할 수 있게 해줍니다.이에 대한 자세한 설명은 Micro Frontends와 MSA를 위한 Module Federation 글을 참고하시면 이해에 도움이 되실 것 같습니다.문제 상황마이크로프론트엔드 환경에서 MF를 사용하면서 다음과 같은 실제 문제들을 경험했습니다:로컬 개발 시 연결된 모든 서비스를 실행해야 하는 번거로움원격 서버 장애 발생 시 연관된 서비스까지 중단되는 문제컴포넌트 로딩..

현재 저희 회사에서는 마이크로 프론트엔드 아키텍처를 도입해 웹 애플리케이션을 개발하고 있습니다. 이 도입은 아직 1년이 채 되지 않은 과도기적인 상황이라 개발적인 이슈들이 존재하는데, 그중 하나를 "이렇게 개선할 수 있지 않을까?"에 대한 고민을 적어보겠습니다. - remote app: 컴포넌트를 제공하는 앱- host app: 컴포넌트를 사용하는 앱그 중에서도 주요 이슈 중 하나는 host app에서 remote app으로 세션 상태나 API 헤더 초기화 등을 어떻게 처리할 것인가였습니다. 현재는 prop을 통해 세션 키와 유저 정보 같은 global state를 컴포넌트로 전달 후, remote app에서 자체적인 부트스트랩(예: API 헤더 초기화, 상태 재가공 등)을 처리하는 방식을 사용하고 있습..

여러분은 언제 주석을 작성하시나요? 🤔 이전에 회사에서 후임 개발자분께서 이런 질문을 한 적이 있습니다. "코드에 함수마다 주석이 달려 있는데, 어떤 함수에는 설명이 있고, 어떤 함수에는 없어요. 언제 주석을 작성해야 하는 거죠?"라는 질문이었죠.// 회사 컨벤션/****/function abc () {...}/*** 이건 글쓰는 함수 입니다.*/function abc () {...}당시에는 회사 코드 컨벤션에 따라 주석을 작성해 왔고, '여기에는 주석이 있으면 좋겠다'라는 주관적인 기준에 의존하고 있었기 때문에, 명확히 대답하기 어려웠습니다. 결국 "조건이 3개 이상일 때 작성하는 것 같다"는 애매한 답변을 했던 기억이 납니다. 😂이 질문 덕분에 주석을 언제 작성해야 하는지 더 깊이 고민해 볼 기회..

Overview폼 유효성 검사는 사용자 입력의 정확성과 데이터의 무결성을 보장하기 위한 필수적인 과정입니다. 하지만 복잡한 폼일수록 이 검사를 효율적으로 처리하기 어렵습니다. React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 돕는 라이브러리로, 간단한 API와 뛰어난 성능을 제공합니다. 하지만 폼 검증을 더욱 최적화하려면, Yup이나 Zod와 같은 유효성 검증 라이브러리와 결합하는 것이 필요합니다. 이 글에서는 Yup이 무엇인지, 왜 사용하는지, 그리고 Zod와 비교했을 때 어떤 차이점이 있는지 살펴보겠습니다. 또한, React Hook Form과 함께 Yup을 사용하여 폼 검증을 구현하는 방법을 예시를 통해 보여드리겠습니다. Yup이란 무엇이며 왜 사용하는가?Yup은 자바스크립트..

글또를 지원하면서 저의 삶을 돌아보는 기회를 얻게 되었습니다. 사실 혼자서는 이런 시간을 가질 생각을 하지 못했을 텐데, 글또를 통해 제 삶의 지도를 그려볼 수 있는 뜻깊은 시간을 가지게 되어 감사한 마음입니다.중학교 2학년 겨울까지저는 평범하게 인문계 고등학교를 거쳐 대학에 진학할 거라 생각했습니다. 그러다 친한 친구가 요리 특성화고에 간다는 이야기를 듣고 특성화고에 대해 처음 알게 되었죠. 취업도 하고, 나중에 특성화고 재직자 전형으로 대학에 쉽게 갈 수 있으며, 군 문제까지 해결된다는 장점에 눈이 가더라고요. ‘나는 컴퓨터를 좋아하니까 이 길이 맞겠다’라는 생각으로 컴퓨터 관련 특성화고에 진학했어요. 그때까지만 해도 개발자라는 직업을 잘 몰랐고, 그냥 컴퓨터로 일하는 직업이 제게 맞을 거라 막연히 ..

웹 개발을 하다 보면, 이미지에서 주된 색상을 추출해 텍스트나 배경 등 디자인 요소에 활용된 경우가 종종 있습니다.  예를 들어, 서버에서 OpenAPI 목록을 제공받아 GPT와 Gemini라는 두 가지 항목을 렌더링 한다고 했을 때를 가정하고 해 보겠습니다.서버에서는 보통 아래 데이터형식으로 보내줍니다.[ { title: 'GPT', logoUrl: 'https://...' }, { title: 'Gemini', logoUrl: 'https://...' }] 하지만 디자인을 구현하기 위해 이러한 색상 정보를 서버에서 매번 제공받는 것은 비용과 성능 면에서 비효율적일 수 있습니다.이미지가 많은 사이트에서는 색상 데이터를 저장하고 관리하는 것이 번거로울 뿐만 아니라, 서버 요청이 많아질수록 성능에도..