개발 이야기/JavaScript

개발 이야기/JavaScript

자주 사용하는 HTML ARIA 접근성 (accessibility)

Accessible Rich Internet Applications, ARIA HTML의 접근성 문제를 보완하여 장애를 가진 사용자가 웹 콘텐츠에 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 의미한다. aria-checked 요소가 선택(true)되었는지, 해제(false)되었는지, 상태가 결정되지 않았는지(mixed) 알린다. input 태그를 사용하면 불필요한 옵션이지만 불가피하게 input 태그가 아닌 경우 사용한다. # 요소가 선택되지 않았음을 알린다. Subscribe to the newsletter # aria-checked = (true, false, mixed) # true = 선택 # false = 미선택 # mixed = 결정되지 않음 aria-expand 요소가 확장되거나 축소되..

개발 이야기/JavaScript

Visual Studio Code 확장 프로그램(익스텐션) 추천 - 웹(Web) 개발용 40개 이상

MS에서 개발한 VS Code(VisualStudio Code)라는 Text Editor로 게임 개발, 웹 개발, 앱 개발을 시작한지 꽤 오랜 시간이 지났다.처음에는 확장 프로그램없이 하다가 이제는 확장 프로그램이 없으면 답답할 지경이다. 나름 본인이 그 동안 사용하면서 실제 편리하고 사용하면 괜찮은 확장 프로그램들을 정리하면서 소개하고자 한다. 추천 기능들은 알파벳 순서대로 정리하였다.   Auto Close Tag 전면 HTML 태그를 닫을 때 후면의 HTML 태그가 자동으로 생성되는 편리한 기능을 제공한다.단, 타입스크립트에서 제네릭을 선언할 때 태그로 잘못 인지하여 자동으로 후면을 생성하는 단점이 있다.Auto Rename Tag HTML 태그는 전면, 후면으로 두 개의 태그가 내용을 감싸고 있는..

개발 이야기/JavaScript

협업의 기본, 패키지 관리자는 하나만 사용해주세요.

덥디 더운 여름, 한 개발자가 React, Vue를 둘 다 사용하며 여러 프로젝트에 참관하며 개발에 관여하게 되었는데 그 개발자분이 관여할 때마다 자꾸 존재해서는 안되는 파일들이 개발 브랜치에 저장되는 것이다. 무슨 파일인지 자세히 들여다보니 package-lock.json 그렇다, 우리 React 프로젝트는 패키지 관리자를 Yarn을 사용하지만 여러 프로젝트에 로밍을 다니시는 개발자분께서는 NPM을 사용하시기 때문에 말도 안되는 찌꺼기 파일이 남은 것. .gitignore에 추가만 해줘도 브랜치에 올라가지 않겠지만 사실 근본적인 문제는 여러 패키지 관리자를 사용하다보니 일관성이 없어서 패키지별 버전이 다를 수도 있는 등 문제가 발생할 수 있는 여지가 있었던 것이다. 평소, 유난히 깔끔 떠는 나에게는 너..

개발 이야기/JavaScript

웹팩(Webpack)과 비트(Vite)의 성능을 실험해보았다.

나는 평소 느린 걸 싫어한다. 무엇을 하든 답답한 게 싫고, 귀찮은 게 싫고, 자유롭지 못한 게 싫다. 웹 빌드 속도도 마찬가지였다. 빌드를 돌리기만 하면 다른 짓을 하기에는 애매했고.... 그렇다고 기다리자니 좀 걸리는 것 같은데? 이런 딜레마에 빠져있었을 때가 있었다. 그중 vite를 만나서 오랜 고통 속에서 해방됐다고 할까.... 빠르게 변화하는 시대에 맞게 기존 자바스크립트를 개선하고자 많은 도구들이 등장했는데 그중 하나가 vite다. Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷하다. webpack과 같은 번들러이며 vite는 이전의 번들러의 문제점을 해결하고자 많은 개선이 되었다. 번들러는 여러 개별 파일 및 종속성을 하나의 단일 파일로 묶어주는 역할을 하..

S.H.S
'개발 이야기/JavaScript' 카테고리의 글 목록