shadcn/ui shadcn/ui는 React 애플리케이션을 위한 재사용 가능한 컴포넌트 모음입니다. Radix UI와 Tailwind CSS를 기반으로 구축되었으며, 아름답고 접근성이 뛰어난 컴포넌트를 제공합니다. 소개 공식 홈페이지에서 다음과 같이 소개하고 있습니다. shadcn는 컴포넌트 라이브러리가 아닙니다. shadcn은 재사용 가능한 컴포넌트의 모음 입니다. 컴포넌트 라이브라리가 아니다!! 가 무슨 의미일까요? 일반적인 컴포넌트 라이브러리(e.g. material ui, antd, 등등) 와 달리 npm install 형태의 설치를 하지 않습니다. 단지 필요한 컴포넌트가 있으면, 당신의 프로젝트에 코드를 copy and paste하고, 필요한만큼 커스텀하여 사용하면 됩니다. 또한 shadcn을 활용하여, 당신만의 컴포넌트 라이브러리를 구축하여 사용하면 됩니다. 주요 특징 복사-붙여넣기 방식: NPM 패키지가 아닌, 필요한 컴포넌트만 복사하여 프로젝트에 통합할 수 있습…

소개 Todoctor code 에서 TODO나 FIXME등의 주석을 분석하여, 기술부채를 나타내 주는 도구 Why? 개발자가 TODO 주석을 생성하는건 흔한 일이지만, 실제 이를 작업하여 수정하는 케이스가 드물다. 코드에 숨겨진 이러한 주석을 분석 추적 관찰 할 수 있도록 도와주는 도구이다. Feature 코드에서 , , 등의 주석을 자동으로 추출. JavaScript and TypeScript 지원. 각 커밋의 commment 히스토리를 수집하고 업데이트.  을 활용한, 주석의 작성자와 작성 시기를 추적 통합. 기술 부채의 증가나 감소를 분석하기 위해 변화 내역을 시각화. 사용법 미설치 사용 - 프로젝트 root에서 아래 명령어 수행 설치형태 사용 검출관련 키워드 사용 결과 예시 https://todoctor.azat.io/ 사용결과 TODO형태의 기술 부채의 추이를 알 수 있도록 해주는 그래프 전체 TODO수, 가장 오래된 TODO, 전체 TODO의 평균 Age, TODO…

소개 htmx는 기존 js 의 ajax 호출 동작 이후 화면 갱신을 하는 구현 패턴와 달리, html 마크업 레벨에서 이를 지원하여 화면을 구성하는 구조를 가지는 프론트엔드 웹 프레임워크 이다. html의 attribute 을 활용하여, html에서 직접 ajax, css transitions, websocket, sever send event 등을 컨트롤 한다. 추가적인 특징 htmx 프레임웍 크기는 (~14k min.gz’d) 정도로 작다. dependency-free 이다. (응용하기에 따라 다른 frontend fw와 함께 사용이 자유롭다, node.js에서도 사용가능) 확장 가능한 구조를 가진다. (extendable) 동일 기능 구현시 js가 줄기 때문에 코드 사이즈를 줄여준다. (67% when compared with react) 0BSD(Zero-Clause BSD) 라이선스 로 자유롭게 사용 가능하다. 현재(2024.07.18)기준 가장 최신 버전 - v2.0.1…

소개 es2023(es14) 가 2023년 6월 확정되었다 (이후는 es2024(es15)의 진행이다), 관련하여, es2023(es14)의 신규 feature들을 알아본다. 신규 Feature들은 어디서 알아보나? 공식 proposals 문서를 통하여 어떤 기능들이 추가되었나 살펴볼 수 있다. Array find from last, Array by copy es2023(es14) - https://github.com/tc39/proposal-array-find-from-last es2023(es14) - https://github.com/tc39/proposal-change-array-by-copy 신규 기능 proposal의 이유들 기존 배열 탐색 함수()는 앞에서 붙어 찾기 때문에, 맨뒤에 값이 있는 경우, 성능 문제가 있다. 이를 해결하기위해 을 사용하는경우, 원본 배열이 변경되는 side-effect가 있다. 원본 배열이 변경되어도, react에서는 배열 자체가 동일객…