Tailwind-a11y 개발 기록 2편 (Babel AST로 Tailwind 접근성 분석기 만든 과정) https://kimhaeun.com/136 Tailwind-a11y 개발 기록 (라이브러리 npm 배포!)Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다kimhaeun.com1편에서는 tailwind-a11y를 만든 계기나 전반적인 내용을 적었다면 이 글은 기술적인 부분을 기록하는 것이 주가 될 예정이다. JSX를 파싱하는 부분, Tailwind 클래스를 CSS 값으로 변환하는 로직, 그리고 같은 패턴으로 두 번 발생한 미탐 버그의 원인을 코드와 함께 정리했다.분석 구조tailwind-a11y의 분석 과정은 세 단계로 나뉜다.파싱: Babel로 JSX 소스코..
Tailwind-a11y 개발 기록 (라이브러리 npm 배포!) Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다.처음에는 Tailwind 관련 라이브러리를 만들어볼까 생각했다. 하지만 이미 Tailwind 생태계는 너무 성숙했고, 비슷한 라이브러리를 하나 더 만드는 건 큰 의미가 없다고 느꼈다.그래서 새로운 걸 만들기보다, 기존 도구들이 잘 해결하지 못하는 문제를 찾아서 해결해보는 방향으로 바꾸었다. 그렇게 시작해서 이번에 처음으로 두 개의 npm 패키지를 배포했다.tailwind-a11y : Tailwind CSS 프로젝트에서 접근성(WCAG)을 빌드 타임에 검사하는 CLIeslint-plugin-tailwind-a11y..
프론트엔드 시스템 디자인 (RADIO 접근법) 프론트엔드를 개발하며 대규모 트래픽에서 안정적으로 동작하게 설계하는 방법 같은 질문 앞에서는 어디서부터 생각을 시작해야 할지 명확한 정리가 필요하다고 느껴왔다. 말로 설명하려면 머릿속에 완벽한 다이어그램이 그려져야하는 사람이라 한번 각잡고 정리해봐야겠다 싶었다. 그치만 백엔드 시스템 디자인 자료는 많은데, 프론트엔드 관점의 시스템 디자인을 체계적으로 다루는 자료는 의외로 찾기 어려웠다. 여기저기 뒤지다가 인프런에서 [미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해] (링크: https://inf.run/8ezQ9 ) 라는 강의를 발견했다. 한번 들어볼까 싶었다가.. 이 글은 그 강의의 앞부분, AI 시대 프론트엔드 엔지니어의 역할과 RADIO 접근법..
AWS SAA-C03 후기 / 덤프 한국어 1-200번 문제 & 정리본 공유 응시 이유요즈음 공부할 시간이 많이 나서, 짧게 집중적으로 공부해서 바로 활용할 수 있는 자격증을 찾아봤다.그중 후보로 정처기와 SAA 가 있었는데, 정처기는 결과가 12월에 나오기도 하고 시험이 아직 멀어서 당장 볼 수 있는 시험인 SAA로 결정했다.최근 인턴 하면서 인프라 쪽도 간접적으로 알아야할 것들이 있어서, 시간나면 꼭 네트워크와 클라우드 공부를 해봐야겠다 싶었는데, AWS 라는 점유율이 높은 서비스로 공부할 수 있어 좋은 기회라고 생각했다. (인프라도 잘하는 개발자가 되고 싶은 소망으로,,) 필자의 백그라운드는 컴공 전공 / 기본 네트워크 지식 있음 / AWS 사전 지식 거의 없음 S3 써본 정도바로 4일?5일 뒤인 날짜로 오프라인 시험을 예약했고, 아무래도 시간이 부족한 것 같아서 토요일로 ..
GraphQL Apollo Server/Client Cheat Sheet 0. 이 문서를 정리한 이유, Relay 와 비교 인사이트 전 회사에서 graphql 쓰긴 했는데 Relay(Client)를 썼었고, 서버에선 apollo 썼었음이번에 공부하면서 Apollo 와 Relay 를 비교해볼 수 있었는데,거의 비슷하긴 하다만 달랐던 것은 1) 데이터 선언 방식 2) 컴파일러 유무 3) 유연성 이렇게 세가지인 것 같다. Apollo는 Relay에 비해 useQuery 를 이용해서 자유롭게 어디서든 쿼리 작성 가능하다. 하지만 Relay 는 컴포넌트에 fragment 강제 colocate. Apollo 는 런타임에 gql이 문자열 파싱하지만 Relay 는 빌드타임에 컴파일러가 정적 분석한다. (즉 Apollo는 서버 요청 날려봐야 에러 알 수 있어서 안정성 떨어짐 .... ) c..
이런저런생각들 최근 몇 년 동안 프론트엔드 생태계는 정말 빠르게 변했다. (MCP, Agent, WebAssembly, Edge Runtime... 등등)원래도 프론트엔드 생태계는 새로운 기술과 개념이 빠르게 등장하는 분야였지만 AI가 개발자의 일하는 방식 자체를 바꾸기 시작하면서 변화의 속도는 더욱 빨라졌다. 하루 종일 Claude와 대화하며 개발하는 이른바 'Claude Blue' 이야기를 보며 무력감을 느끼기도 했다. 불안하다는 감정 때문에 힘들진 않았지만서도 (단순한 편..) 컴공 전공자로서 이 길이 맞는것일까 고민이 되기도 했다. 오랜 고민이 많이 좁혀진 현 시점에서 확실해져가는 것은 '안티프래질한 개발자가 되자'라는 다짐이다. 안티프래질은 '충격을 가하면 더욱 단단해지는'이라는 뜻으로, 이 AI로 인한 하..
new Function로 함수 만들기 JS 를 다시 공부하게 된 이유는..결국 새롭게 나오는 프레임워크들은 대부분 JS 로 되어있고,새로운 프레임워크를 새로운 언어 배우듯이 배우고 싶지 않아서, 조금 더 본질에 집중해보려고 공부를 시작했다.ko.javascript.info를 보면서 처음부터 공부중이고, 실행 컨텍스트가 머릿 속에 정리되고 나서부터 재미가 붙기 시작했던 것 같다.Function 생성자 부분 보는데 흥미로워서 추가로 찾아본 것들을 정리하려고 끄적여본당 ..문법let func = new Function([arg1, arg2, ...argN], functionBody);함수의 인자와 본문을 문자열로 받는다. 런타임에 문자열로부터 함수 객체를 만들어낸다.const sum = new Function('a', 'b', 'return a ..
HTTP 상태코드와 Security Through Obscurity (STO) HTTP 상태코드는 공격자에게도 힌트가 되기에, 상태코드를 의도적으로 다르게 내려준다는 이야기를 들은적이 있다. 오늘 갑자기 궁금해져서 관련 개념을 찾아봤다. https://en.wikipedia.org/wiki/Security_through_obscurity HTTP 상태코드는 클라이언트와 서버가 요청 결과를 해석하기 위한 약속이다. 200은 성공, 400은 잘못된 요청, 401은 인증 필요, 403은 권한 없음, 404는 리소스 없음, 500은 서버 오류를 뜻한다.문제는 이 정보가 정상적인 클라이언트에게만 전달되지 않는다는 점이다. 공격자도 같은 응답을 본다. 그리고 상태코드의 차이를 관찰하면서 서버의 구조와 동작을 추론할 수 있다.HTTP 상태코드는 공격자에게 "무료 정보"가 될 수 있다. 공격자는..
모두를 위한 웹을 만든다는 것, Accessibility 접근성은 별도의 기능을 추가하는 일이 아니라, HTML을 작성하고 UI를 구현하는 과정에서 함께 지켜야 하는 기본 조건에 가깝다.개발자 입장에선 조금 번거롭고 실제 인터페이스의 겉면만 볼 땐 달라보이는게 없을 수 있어도, 누군가의 사용성을 크게 바꾼다. 인턴으로 일할 때도 접근성 요소들이 잘 지켜지지 않던 기존 코드를 발견을 종종했어서 이슈를 올려 한번 쭉 검토를 해보기도 했는데, 사실 아래 내용을 정리하면서 생각지도 못한 부분 (예를 들면 버튼만 탐색해야할 경우를 대비하여 삭제가 아닌 프로젝트 삭제로 라벨을 설정해야한다는 점)도 고려대상이라는 점을 새롭게 배웠다. 이 글에서는 MDN의 「HTML: 접근성의 좋은 기반」 문서를 바탕으로, 웹 개발 중 최소한으로 점검하면 좋은 접근성 항목들을 정리해보려고..

티스토리툴바