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..
new Function로 함수 만들기 JS 를 다시 공부하게 된 이유는..결국 새롭게 나오는 프레임워크들은 대부분 JS 로 되어있고,새로운 프레임워크를 새로운 언어 배우듯이 배우고 싶지 않아서, 조금 더 본질에 집중해보려고 공부를 시작했다.ko.javascript.info를 보면서 처음부터 공부중이고, 실행 컨텍스트가 머릿 속에 정리되고 나서부터 재미가 붙기 시작했던 것 같다.Function 생성자 부분 보는데 흥미로워서 추가로 찾아본 것들을 정리하려고 끄적여본당 ..문법let func = new Function([arg1, arg2, ...argN], functionBody);함수의 인자와 본문을 문자열로 받는다. 런타임에 문자열로부터 함수 객체를 만들어낸다.const sum = new Function('a', 'b', 'return a ..
자바스크립트 효율적으로 처리하기 (requestAnimationFrame, requestIdleCallback, Web Workers) 브라우저 성능 최적화의 핵심은 단순히 코드를 “빠르게” 만드는 것이 아니라,언제 실행할지와 어디서 실행할지를 적절히 나누는 데 있다. 브라우저의 메인 스레드는 하나다. 개발자가 작성한 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 페인트, 컴포지팅까지 대부분의 주요 작업이 같은 스레드에서 처리된다.따라서 JavaScript가 메인 스레드를 오래 점유하면 브라우저는 화면을 갱신하지 못한다. 사용자는 이를 스크롤 버벅임, 클릭 지연, 입력 랙, 애니메이션 끊김 같은 형태로 체감한다.브라우저가 일반적으로 목표로 하는 60fps 환경에서는 한 프레임에 사용할 수 있는 시간은 약 16.6ms뿐이다.이 짧은 시간 안에 JavaScript 실행, 스타일 계산, 레이아웃, 페인트까지 끝나야 ..
getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [..
Three.js 로 움직이는 지구본 만들기 https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] 기본 구조 원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원 ![](https://images.v velog.io 원에 이미지 씌우고 모션 주기 .. 재밌다 예전에 사둔 three.js 강의 천천히 들어봐야겠다 ㅎㅎ
[js library] AOS 스크롤 애니메이션 구현하기 참고 [AOS] 📚 스크롤 애니메이션 사용법 - Animate On Scroll AOS.js (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊 inpa.tistory.com 이번에 만들고 있는 외주 사이트에서 많이 쓰이는 애니메이션 라이브러리이다. 이 효과 하나만으로도 웹이 한층 더 다이나믹해보여서 앞으로도 자주 쓸 것 같다. 사진이 가운데서부터 커지는 효과 아래에서 하나씩 올라오게
[Javascript plugin] Masonry Layout 적용하기 메이슨리 레이아웃 (Masonry Layout)을 이용하면 크기가 다른 컨텐츠를 효율적으로 배치할 수 있다.빈영역을 최소화할 수 있으며 지겨운 스타일로부터 벗어나 자유로운 느낌을 주기도 한다! 핀터레스트가 이러한 레이아웃을 사용하곤 한다. https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js fil..

티스토리툴바