Lighthouse of FE beginner

디자인 시스템의 정의디자인 시스템을 생각하면 무엇부터 떠오르는가?UI 컴포넌트의 집합? 디자인 토큰? 컬러 시스템 혹은 타이포그래피? 브랜드의 철학을 담고 있는 무언가?위에 나열된 모든 것들은 디자인 시스템이 맞다. 더 정확히는 디자인 시스템의 정의가 아닌 디자인 시스템을 구성하는 개체들이다. 그렇다면 디자인 시스템의 정의는 무엇일까? 여러 디자인 시스템의 정의를 살펴보자. Nielsen Norman Group에서는 디자인 시스템을 다음과 같이 정의하고 있다. A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.디자인 시스템은 재사용 가능한 ..

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

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

그냥 회고두서없이 작성하는 2026년 2월 회고..어떤 일들을 했었고 어떤 생각을 했는지 남겨본다. 2월 한달은 워킹데이가 짧았다.일 자체도 28일 밖에 없는데 설 연휴까지 껴있어서 정말 빠르게 지나간 한 달이었다.교육과 NES 시험도 있었어서 정말 정신없이 지나갔던 것 같다.1월 회고를 작성한게 엊그제 같은데 벌써 2월 회고라니.. 업무로는 컴포넌트를 제공하기 위한 리서치 작업을 진행했다.DnD기능이 있는 컴포넌트여서 DnD 라이브러리를 사용할지, 아니면 DnD 기능도 직접 구현해서 제공할지 결정을 했어야 했다.팀원들과 함께 결정을 하기 위해서는 여러가지의 근거 자료가 필요했고, DnD기능도 직접 구현한다면 인터페이스를 작성해 리뷰를 받아야 했기 때문에 설계를 진행해야 했다.이 과정에서 나의 설계대로 ..

들어가며2026년 1월 5일, 이직한 회사에서 첫 달을 보냈다.개인적으로 적응하는 과정은 쉽지 않았고, 배운 것도 느낀 것도 많았던 한 달이였다.회고를 통해 이번 달에 느꼈던 점, 잘했던 점, 아쉬웠던 점을 남겨본다. 새로운 회사, 새로운 팀개인적으로 가고 싶은 회사였고 퇴사하고 쉬는 기간동안 빨리 입사일이 다가왔으면 좋겠다 생각했었다.그때 더 열심히 놀았어야 했거늘.... 대망의 1월 5일 입사일이 다가왔고 판교까지 집에서 1시간 30분이 걸려 출근을 했다. 첫날엔 신규 입사자 온보딩이 진행됐고, 오후에 인사 팀원분과 티타임을 진행한 후 팀 내 선임(시니어)님의 안내 하에 팀원분들을 처음 뵙게 됐다.인사 팀원분과 티타임때 이런 이야기를 드렸었는데,"아무래도 신입이 아닌 경력직 (그래도 올해 4월이 나름..

How to write good frontend tests: 37 tips and tricks(번역) 훌륭한 프런트엔드 테스트 작성법: 37가지 팁과 요령해당 글은 아래 원글을 번역한 글 입니다. 블로그는 번역된 글로 인해 취하는 영리적 이득이 없습니다. 문제가 된다면 번역된 글을 내리도록 하겠습니다.This article is a translation of the original text below. This blog does not receive any commercial benefit from the translation. If it becomes a problem, the translation will be removed.원글: How to write good frontend tests: 37 t..

새해 첫 개발 서적을 읽었다.작년 10월 생일날에 회사 후배가 생일 선물로 사준 책이긴 한데,시간이 없다는 핑계로 읽지 못하다가 퇴사한 이후로 시간 짬이 나서 읽게 됐다. 리액트에서 가장 중요한 것 중 하나는 상태 관리이다.상태는 랜더링과 관계가 있으며 상태를 어떻게 설계하느냐에 따라서 애플리케이션의 성능을 좌우하기 때문이다. 이 책은 상태를 관리하고 최적화 하는 방식에 대한 내용보다는 상태가 무엇인지, 로컬 상태와 전역 상태, 전역 상태를 다루기 위한 기술 및 라이브러리, 그리고 그 라이브러리들에 대한 간단한 비교를 해주고 있다. 지금껏 회사의 대규모 프로젝트에서 여러가지 상태 관리 라이브러리를 사용했었다.2022년에는 Redux로 상태관리를 했고, 2023년에는 Recoil과 react-query를 ..

들어가며프론트엔드 프로젝트가 커질수록 우리는 코드의 구조와 의존성 관리에 대해 고민하게 됩니다. "이 컴포넌트가 저 레이어의 코드를 참조해도 될까?", "같은 기능 내 파일끼리는 어떻게 import 해야 할까?" 같은 질문들이 늘어나고, 일관성 없는 import 패턴은 프로젝트의 복잡도를 기하급수적으로 증가시킵니다. 이번 글에서는 FSD(Feature-Sliced Design) 아키텍처에서 다른 소스 코드를 참조할 때 절대 경로, 상대 경로를 혼재해 사용하는 전략에 대해 살펴보겠습니다. FSD 아키텍처에 대한 간단한 이야기FSD(Feature-Sliced Design) 아키텍처는 레이어, 슬라이스, 세그먼트 단위로 나눠지며 프론트엔드 애플리케이션을 도메인(기능 - feature) 단위로 작게 쪼개(sli..

2025년 연말 개인 회고를 해보려고 한다. 개인적으로 2025년은 많은 의미가 있는 해이자 많은 변화가 있었다. 대학원먼저 대학원에 진학해 석사 과정을 시작했다. 처음 개발자로 일을 시작했을 땐 비전공자로 시작했었다. 첫 회사를 다니면서 한국방송통신대학교에 편입을 해서 컴퓨터과학을 전공했고, 24년 2월에 졸업을 하며 컴퓨터과학 학사 졸업을 했다. 22년 Chat GPT을 시작으로 다양한 AI 도구가 등장했고, 이제는 AI가 인간의 일자리를 대체하고 있다는 이야기로 세간의 개발자, 직장인들은 두려움에 떨고있다. 나 또한 언젠가 AI에게 대체될 수 있는 인력이고.. 여기서 나만의 무기를 가지려면 어떤 것을 해야할까 고민하던 중 소프트웨어에 대해서 더욱 깊게 배워보고 싶었다. 결국 AI도 소프트웨어 아닌가..

들어가며자바스크립트에서 원시 값(Primitive Value)(예: 문자열, 숫자, 불리언)은 객체가 아니며 메서드를 가질 수 없는 불변(Immutable)한 값입니다.하지만 우리는 코드를 작성할 때 “hello”.toUpperCase()처럼 원시 값의 메서드를 흔하게 사용하고 있습니다. 원시 값은 객체가 아니어서 메서드를 가질 수 없다고 했는데 어떻게 각 타입의 메서드를 사용할 수 있을까요? 이는 자바스크립트 엔진이 내부적으로 래퍼 객체(Wrapper Object)라는 임시 객체를 생성하여 원시 값을 객체처럼 다룰 수 있게 해주는 내부 메커니즘 덕분입니다. 원시 값 메서드 사용 메커니즘원시 값에 메서드를 호출하는 코드가 실행될 때, 자바스크립트 엔진은 자동 박싱(Auto-boxing) 메커니즘을 사용합..