Lighthouse of FE beginner

AX 시대의 웹 접근성AX(AI Experience) 시대가 도래하면서 웹 접근성은 단순히 인간을 위한 배려를 넘어, 인공지능 에이전트(LLM)와 소통하기 위한 필수적인 기술 규격으로 진화하고 있다. 과거에는 사용자가 직접 눈으로 화면을 보고 요소를 클릭했지만, 이제는 AI 에이전트가 웹사이트의 소스 코드를 읽고 사용자의 복잡한 명령을 대신 수행한다. 따라서 웹 접근성 가이드라인을 준수하는 것은 AI가 웹사이트를 얼마나 정확하게 이해하고 조작할 수 있는지를 결정하는 AI 색인 최적화(AIO: AI Optimization)의 핵심이 된다. AI 에이전트는 화려한 시각적 디자인이 아니라 코드 뒤에 숨은 의미인 시맨틱을 읽는다. 시맨틱 마크업과 ARIA 속성이 잘 갖춰진 사이트는 AI에게 명확한 지도와 매뉴얼..

들어가며웹 접근성은 단순히 장애인을 위한 추가 기능이 아니라, 웹이 마땅히 갖추어야 할 본질적인 품질이다. W3C와 MDN, web.dev 등의 공식 문서에 따르면, 접근성이란 사용자가 처한 신체적 상태나 환경적 제약에 상관없이 누구나 동등하게 정보에 접근할 수 있도록 보장하는 것을 의미한다. 이는 손을 다쳐 마우스를 쓰지 못하는 일시적 상황이나, 소음이 심한 곳에서 영상을 봐야 하는 환경적 제약까지 모두 포함하는 보편적 사용자 경험(UX)의 영역이다. 접근성 높은 웹을 만드는 핵심은 크게 의미 있는 마크업, 키보드 조작 가능성, 보조 기술 호환성이라는 세 가지 기둥으로 지탱된다. 그중에서도 개발자가 가장 정교하게 설계해야 할 영역은 바로 키보드 지원과 포커스(Focus) 관리다. 대부분의 인터랙션은 포..

들어가며Micro Frontend는 하나의 Host App과 여러 개의 Remote App으로 구성되어 있습니다.개별 Remote App의 라우팅은 당연하며 Host App을 통해 통합된 여러 App의 라우팅도 자연스럽게 발생해야 합니다. 각 App의 라우팅이 자연스럽게 발생하기 위해 각 App은 독자적인 라우터가 존재하며, 이 라우터들을 통합 하기 위해 Host App의 라우터가 필요하고, Host App은 통합된 App의 라우팅을 이어줄 수 있는 브릿지 역할을 해야합니다. 추상적으로 통합이지만 물리적으로는 각 App이 각자의 라우터를 소유하고 있습니다. 4개의 MFA 애플리케이션을 예시를 들어보면 다음과 같습니다. Host App은 CMP, Openstackit, PaaS, App을 통합하고 있습니다..

OverviewReact를 사용해 Web Application을 개발한다면 메모이제이션(Memoization) 이라는 단어는 익숙한 단어입니다.이번 글에서는 메모이제이션이란 무엇인지, 메모이제이션을 통해 해결하려는 것은 무엇인지 살펴보겠습니다. 메모이제이션(Memoization)메모이제이션의 사전적 의미는 컴퓨터 프로그램이 복잡한 함수 호출의 결과값을 함수에 저장해놓고, 같은 입력이 반복될 때 저장한 값을 반환하도록 하여 속도를 높이는 최적화 기술입니다. 쉽게 말하면 값 비싼 연산으로 인해 도출된 값을 캐싱한 후 같은 Input일 경우 캐싱된 값을 반환한다고 생각할 수 있습니다. 그럼 이 개념이 왜 React에 적용이 되는 것 일까요? React, Component, 살펴보기React를 사용해 Web A..

들어가며React 애플리케이션은 컴포넌트 단위로 만들어집니다.다양한 컴포넌트 중에서도 폼(Form) 컴포넌트가 존재합니다. 폼 컴포넌트는 사용자에게 값을 입력 받아 요청을 처리할 수 있는 중요한 역할을 하는 컴포넌트 입니다. React에서 폼 컴포넌트를 다루기 위한 방법은 크게 두 가지가 있습니다. 제어 컴포넌트, 비제어 컴포넌트 입니다.그럼 제어 컴포넌트는 무엇이고, 비제어 컴포넌트는 무엇일까요?이번 게시글에서는 제어 컴포넌트, 비제어 컴포넌트의 차이를 알아보고 react-hook-form 라이브러리를 사용해 비제어 컴포넌트를 살펴보도록 하겠습니다. 잠깐! JavaScript 없이 form을 다루는 법을 아시나요?JavaScript를 사용하지 않고 폼을 다루는 방법을 아시나요? 최근 면접에서 해당 질문..

Overview이전 글에서 WebWorker, SharedWorker에 대해서 살펴보고 WebSocket을 얹어서 서버와 통신하는 예제를 구현해봤습니다.해당 코드로 추가적인 리팩토링 작업을 하던 중 로컬의 개발 서버에서는 정상 동작 하지만 빌드 시 worker파일을 빌드에 포함하지 못하는 문제를 확인했습니다. 하여 worker 파일을 빌드하지 않았기 때문에 빌드 결과물을 실행했을 때 worker 스크립트를 찾지 못해서 정상적으로 동작하지 못하는 현상이 발생했습니다. 빌드 디렉토리인 dist를 확인해도 worker 스크립트는 찾아볼 수 없습니다. 해결 과정문제 도출먼저 번들링 과정에서 왜 제외가 된 것일까 곰곰히 생각을 해봤습니다. Vite는 번들러로 rollUp을 사용합니다. rollUp 번들러는 번들링..

Overview저번 글에서 Toss Slash24 세션 중 N개의 탭, 단 하나의 소켓이라는 세션을 공유하며 Web Worker에 대해서 살펴봤습니다.Web Worker 알아보기N개의 탭, 단 하나의 웹소켓: SharedWorker 이번 글에서는 Slash24 세션에서 소개한 SharedWorker을 살펴보고 세션에서 공유해주신 솔루션(SharedWorker에 WebSocket을 얹는)을 예제와 함께 알아보도록 하겠습니다. Socket Server본격적으로 SharedWorker을 살펴보기에 앞서 서버 코드를 공유합니다.해당 예제는 Node.js 환경에서 간단한 소켓 서버를 구현하고 해당 소켓 서버와 통신을 하고 있습니다.Interval을 통해서 8초마다 한번 씩 클라이언트에 메세지를 전송하고, 클라이언..

Overview어제 자기 전 유튜브로 Toss Slash24의 N개의 탭, 단 하나의 웹소켓: SharedWorker 세션을 들었습니다. Web Worker API는 이전에 한번 흝어본 기억이 있어서 알고 있었지만 해당 API를 실제로 사용해본 경험도 없었고 어떤 상황에서 사용하면 좋을지에 대해서 깊게 고민해보지는 못했습니다. 토스 증권에서 WTS를 출시하면서 유저 한명이 여러개의 탭을 띄우고 웹소켓을 통해서 서버와 실시간 데이터 통신을 하는데, 기존의 구조로는 각 탭마다 Web Socket을 가지고 있어서 한 명의 유저가 서버에 여러개의 웹 소켓을 연결해 서버 리소스를 낭비하고 서버에 부하를 줄 수 있는 상황이였습니다. 토스증권의 프론트엔드 박건영 개발자님은 이 상황을 서버측에서 해결할 수 있지만 프론..

Overview해당 포스팅은 MFA 강좌를 수강하고 MFA에 대해서 공부한 내용을 기록하기 위한 포스팅 입니다.MFA가 무엇인지 살펴보고 조직에서 MFA 도입을 고려하면 좋은 시점에 대해서 고민해보도록 하겠습니다.마지막으로는 대표적으로 MFA를 구현하는 방식에 대해서 남겨보도록 하겠습니다.MFA에 대해서 궁금하신 분들은 아래 강의를 통해서 접해보시면 좋을것 같습니다. (관계자 아님, 내돈 내산)> 강의 바로가기 MFAMFA는 Micro Frontend Architecutre의 약자로써 기존의 모놀리식 프론트엔드를 앱 단위로 잘개 쪼개어 하나의 애플리케이션으로 통합하는 현대식 프론트엔드 아키텍처 입니다. 잘개 쪼갠다고 하는데 무엇을 쪼갤 수 있을까요? 당근 플랫폼을 예시로 들어서 살펴보도록 하겠습니다.  ..

지난 7월 21일 MFA 강의 수강을 시작하면서 글을 작성했다.MFA, Monorepo 강의 수강을 시작하며 두 달이 지난 시점에서 강의를 완강했다. 부록 한 파트가 남긴 했는데 레거시 환경에서의 점진적 전환에 관한 파트는 넘어가도 괜찮겠다는 생각이 들어서 수강하지 않았다. 강의를 듣기 전까지는 MFA에 대해서 자세하게 알지 못했다. MSA는 근무한 팀에서도 택하고 있는 아키텍처이고, 화제성이 많은 아키텍처이기 때문에 잘 알고 있었다. MFA도 MSA처럼 프론트엔드 애플리케이션을 서비스 단위로 쪼개는 것에 대해서는 알고 있었지만, 정확히 어떤 방식으로 구현을 할지에 대해서는 생각해보지 못했던 것이다. 회사에서도 MFA에 대한 이야기가 나왔고, 평상시에 MFA와 모노레포에 대한 두려움을 가지고 있었고 요즘..