TargetJS: UI 개발을 위한 통합 솔루션

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *프론트엔드 개발자 및 UI/UX 엔지니어**

- 난이도: 초급~중급 (애니메이션, 상태 관리, API 통합 기능 제공)

- 주요 기술 스택: JavaScript, ES2015+, HTML5

핵심 요약

• targets라는 내부 래퍼를 통해 변수, 메서드, 애니메이션, API 통합을 통합적으로 관리
• ES2015의 property order를 기반으로 애니메이션 및 상태 변경이 순차적, 예측 가능한 방식으로 실행
• $ 기호를 통해 반응형 파이프라인 구축 (예: width 변경 시 height 자동 업데이트)
• 라이프사이클을 통한 애니메이션 및 API 연동의 동적, 실시간 반응성 지원

섹션별 세부 요약

1. TargetJS의 핵심 개념

• targets: 변수, 애니메이션, API 호출을 통합하는 내부 래퍼
• ES2015 기반 순차 실행: width → height 순서로 애니메이션 실행
• _ 프리픽스: 기본 비활성 상태로 height는 width 실행 시에만 동작
• $ 포스트픽스: 반응형 파이프라인 생성 (예: height$() { return this.prevTargetValue / 2 })

2. HTML 속성 기반 사용법

• tg- 속성으로 객체 리터럴 키와 동일한 방식으로 HTML 요소에 TargetJS 적용
• 예:

```html

tg-background="purple"

tg-width="[{ list: [50, 100, 50] }, 50, 10]"

tg-height$="return this.prevTargetValue / 2;">

```

• CDN 설치: (44KB 압축)
• npm 설치: npm install targetj

3. API 통합 예제

• fetch 타겟을 사용한 데이터 불러오기:

```javascript

import { App } from "targetj";

App({

fetch: "https://api.example.com/users/1",

_html$() {

return this.prevTargetValue.name;

}

});

```

• prevTargetValue: 이전 타겟 결과 참조 (예: fetch 결과를 html에 전달)
• _ 프리픽스 + $ 포스트픽스: API 호출 결과가 돌아올 때만 실행

결론

• 반응형 UI 개발을 위한 통합 라이브러리로, 애니메이션, 상태 관리, API 통합을 단일 패턴으로 제공
• HTML 속성 기반 사용법과 CDN/npm 설치 옵션을 통해 빠른 프로토타이핑 가능
• $ 기호를 활용한 반응형 파이프라인과 prevTargetValue 참조로 동적 상태 업데이트 구현
• 공식 문서 및 GitHub 리포지토리 참조: targetjs.io