자동완성 검색창 (프론트엔드 시스템 디자인) 지난 글에서 정리한 RADIO 프레임워크 적용사례로, 주제는 자동완성 검색창이다.Input과 Dropdown만 있는 작은 UI지만, 요구사항을 제대로 짚어보면 생각보다 다룰 게 많다. 문제 정의구글 검색창을 예로 든다. 사용자가 app을 입력하면 apple, apple store, apple watch, app store, apple stock 같은 추천어가 떠야 하고, 추천어를 클릭하거나 Enter를 누르면 해당 검색어로 검색 결과 페이지로 이동한다. 면접에서도 자주 나오고, 실무에서도 흔히 구현하게 되는 케이스다.흔한 접근: Input 컴포넌트를 만들고, onChange에서 API를 호출하고, Dropdown에서 결과를 보여준다.-> 틀린 방식은 아니지만, 이렇게만 설계하면 몇 가지가 빠진다.사용자..
Tailwind-a11y 개발 기록 3편 공부 많이 된다 어제 vscode 어댑터도 추가하고, cli, eslint, vscode 가 동시 배포되는 워크플로도 세팅해서 버전 올라가는 pr 이 머지될 경우 action 이 돌아서 한번에 배포되게끔 세팅을 해두었다.이쯤에서 내가 라이브러리를 개발하면서 얻은 인사이트를 정리하고 가면 좋을 것 같아서 글을 적게 되었다. 라이브러리를 처음 만들며 찾은 다른 점들웹앱은 내가 부르는 코드를 내가 실행하는 구조라 자유롭다. 반면 라이브러리는 내가 모르는 남의 코드가, 내가 모르는 타이밍에, 내가 정해둔 규칙대로 내 코드를 불러 쓰는 구조다. 이 차이는 알고 있었지만 실제로 개발을 해보니 또 새로운 인사이트가 많았던 것 같다. 모르는게 많았던 만큼 클로드랑 토론도 많이 하고 다른 오픈소스나 ESlint, Prettier 들 구..
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 ..

티스토리툴바