이 글에서는 화면 흔들림을 방지하고, 자연스러운 스크롤 경험을 제공하기 위한 방법을 설명합니다. 웹 페이지를 만들다 보면 종종 컴포넌트 내에 스크롤이 필요한 경우가 있습니다. 컴포넌트 안에서 스크롤을 최대로 내리면 부모 컴포넌트의 스크롤이 함께 움직이는 문제가 발생할 수 있습니다. 이를 방지하기 위해 HTML 및 Body 태그에 `overflow: hidden` 속성을 적용할 수 있지만, 이로 인해 스크롤바가 사라지면서 화면 크기가 변동되어 사용자에게 불편함을 줄 수 있습니다. 이 글에서는 이러한 문제를 해결하기 위한 방법을 소개합니다.  아래 코드는 리액트(React)에서 이 문제를 해결하기 위한 예제입니다. useEffect 훅을 사용하여 조건에 따라 바디의 패딩을 조정하여 화면 흔들림을 방지합니다...

웹접근성과 웹 표준을 지키며 개발하는 것은 모든 사용자에게 동등한 웹 경험을 제공하기 위해 필수적입니다. 이러한 원칙을 따르면서도, 간격 조정과 같은 디자인 목적으로 빈 태그(나 등)를 사용하는 경우가 종종 있습니다. 하지만 이런 실천은 웹접근성과 웹 표준을 저해할 수 있으며, 다음과 같은 이유로 권장되지 않습니다. 웹접근성 저해웹접근성은 모든 사용자가 웹 콘텐츠와 상호작용할 수 있게 하는 것을 목표로 합니다. 스크린 리더와 같은 보조 기술을 사용하는 사용자는 빈 태그로 인해 혼란을 겪을 수 있습니다. 이러한 태그들은 시각적으로는 보이지 않지만, DOM에는 존재하기 때문에 보조 기술이 불필요한 정보를 인식하게 만들 수 있습니다. 따라서, 빈 태그 사용은 중요한 정보의 전달을 방해하며 웹접근성을 저해할 ..

Non-null Assertion Operator란 무엇인가?TypeScript에서 Non-null assertion operator (!)는 컴파일러에게 어떤 값이 null이나 undefined가 아님을 단언하는 방식입니다. 이 연산자는 변수 뒤에 !를 붙여 사용하며, 이를 통해 TypeScript의 엄격한 null 검사(strict null checks)를 우회할 수 있습니다. 이는 개발자가 해당 변수가 절대 null이나 undefined가 아닐 것이라는 확신이 있을 때 유용합니다. 간단한 사용예시let myVar: string | null = "Hello, TypeScript!";// myVar이 null이 아님을 단언하고 사용console.log(myVar!.toUpperCase()); 위 예제에..

문제 제기똑똑한 컴포넌트가 어디까지 똑똑해야 할지는 소프트웨어 개발의 중심 문제 중 하나입니다. 특히 MSA 환경에서 이 질문은 더욱 중요한데, 서비스를 가능한 잘게 쪼개는 전략이 효율적인 작업을 위한 핵심이 되기 때문입니다. 최소한의 컴포넌트로 기능을 분리하려는 시도는 깔끔하고 독립적인 코드베이스를 유지하는 데 도움이 됩니다. 그러나, 이러한 접근이 항상 만능은 아니라는 것을 실제 경험을 통해 깨달았습니다. 실전 경험예를 들어, 사용자의 이름을 표시하는 Username 컴포넌트를 개발하는 과정에서, 각각의 컴포넌트가 자체적으로 API를 호출하도록 설계했습니다. 이론적으로는 재사용성을 극대화하는 좋은 전략처럼 보였습니다.// Username 컴포넌트 예시function Username({ userId }..

Micro Frontends의 개념Micro Frontends는 대규모 프론트엔드 프로젝트를 더 작고, 관리 가능한 부분으로 나누는 접근 방식입니다. 이 개념은 백엔드의 마이크로서비스 아키텍처(MSA)에서 영감을 받았으며, micro-frontends.org에서 자세히 설명되어 있습니다. 이 방식의 핵심은 큰 애플리케이션을 분할하여, 각 팀이 독립적으로 작업할 수 있는 구조를 만드는 것입니다. 이렇게 하면 각 팀은 자신의 기술 스택을 선택하고, 애플리케이션의 특정 부분에 집중할 수 있습니다. 결과적으로, 마이크로 프론트엔드는 개발 효율성을 높이고, 코드베이스의 복잡성을 줄이며, 더 빠른 기능 출시를 가능하게 합니다.Module Federation 개념 설명Module Federation은 웹팩(Webpa..

살펴보기React Router는 라우팅을 위한 강력한 도구입니다. 라우팅을 사용하면 애플리케이션의 구조를 분리하고, 사용자에게 다양한 페이지를 제공할 수 있습니다.React Router DOM v6에 새로 생긴 기능인 loader를 활용하면 라우트와 관련된 데이터를 더 쉽게 관리할 수 있습니다. loader는 라우트의 데이터를 로드하기 위한 함수입니다. 이 함수에서 로드된 데이터는 useLoaderData와 useRouteLoaderData 훅을 사용하여 컴포넌트에서 사용할 수 있습니다. 이 글에서는 useLoaderData와 useRouteLoaderData의 차이점과 사용법에 대해 알아보겠습니다. 예제 코드useLoaderDatauseLoaderData는 라우트의 로더에서 로드된 데이터에 접근하는 데..