React는 매 업데이트마다 개발자의 생산성과 사용자 경험을 개선하기 위해 새로운 기능을 도입해왔습니다. 특히 React 18과 19에서는 비동기 작업 관리와 UI 반응성을 향상시키는 여러 Hook이 추가되었습니다. 이번 글에서는 useId, useTransition, 그리고 useOptimistic과 같은 최신 Hook을 살펴보고, 이를 통해 어떻게 효율적인 비동기 처리가 가능한지 탐구해 보겠습니다.useIduseId는 React 18에서 고유한 ID 생성을 위해 도입된 Hook입니다. 서버와 클라이언트에서 동일한 ID를 생성하여 렌더링의 일관성을 보장하며, 클라이언트-서버 간 불일치를 방지할 수 있습니다.아래는 useId를 사용하여 고유 ID를 생성하고, 폼의 label과 input을 연결하는 예제입..

글또 참여 전: 꾸준한 글쓰기의 어려움"꾸준히 작성해야지."이 말은 제가 가장 자주 다짐했던 말 중 하나였습니다. 그러나 현실은 바빴던 업무와 일정, 그리고 "주말은 쉬어야 한다"는 핑계로 글쓰기를 미루기 일쑤였습니다. "이번 주는 시간이 없으니 다음 주에 써야지." 이렇게 미뤄둔 주제들은 점점 쌓여갔고, 결국 시기를 놓쳐 묻혀버리는 경우가 많았습니다. 특히 기술 블로그를 운영하는 것은 생각보다 어려운 일이었습니다. 단순히 개인적인 생각을 적는 것과 달리, 기술적인 글은 자료 조사, 코드 작성, 그리고 독자가 이해하기 쉽게 설명하는 노력이 필요했습니다. 이러한 과정을 반복하다 보면 쉽게 지치거나, '완벽하지 않다'는 불안감 때문에 시작조차 못한 적도 많았습니다. 그러던 중 글또라는 커뮤니티를 알게 되었습..

들어가기최근 FSD(Feature-Sliced Design) 관련 글들을 많이 보게 되더라고요. 실제로 채용 과제에서 FSD 구조로 프로젝트를 작성해 오는 지원자도 봤었습니다. 한동안 Atomic Design 아키텍처가 많이 쓰였던 것 같은데, 요즘 FSD가 왜 이렇게 떠오르고 있는지 궁금해서 좀 찾아보았고, 그에 대해 제 생각도 정리해 봤습니다.일반적인 프로젝트 구조의 한계많은 프론트엔드 프로젝트에서 다음과 같은 구조를 흔히 볼 수 있습니다 (아닐 수도 있습니다... 😅):src/├── components/ # 공통 component├── utils/ # 공통 유틸 함수├── typings/ # 타입 정의├── hooks/ # 공통 커스텀 훅..

들어가며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개 이상일 때 작성하는 것 같다"는 애매한 답변을 했던 기억이 납니다. 😂이 질문 덕분에 주석을 언제 작성해야 하는지 더 깊이 고민해 볼 기회..