React Element ID Helper

React 컴포넌트에 element_id를 자동으로 추가하고 관리하는 VSCode/Cursor 확장 프로그램입니다.

🚀 주요 기능

• 자동 element_id 추가: React 컴포넌트의 모든 JSX 요소에 고유한 element_id 자동 추가
• 실시간 미리보기: 마우스 호버 시 element_id 미리보기 툴팁 표시
• 유효성 검사: 중복, 형식 오류 등 element_id 문제 자동 감지 및 경고
• 스마트 제안: element_id가 없는 요소에 대한 제안 표시
• 유연한 설정: 컴포넌트별 포함/제외, 다양한 ID 생성 방식 지원
• Babel 설정 생성: 빌드 시 자동 변환을 위한 Babel 설정 자동 생성

📦 설치

VSCode/Cursor 확장

1. VSCode 또는 Cursor에서 확장 마켓플레이스 열기
2. "React Element ID Helper" 검색
3. 설치 및 활성화

🛠️ 사용법

기본 사용법

1. 명령 팔레트 사용

1. Ctrl+Shift+P (Windows/Linux) 또는 Cmd+Shift+P (Mac)
2. "React Element ID" 검색
3. 원하는 명령 선택:
   • Add Element IDs: 현재 파일에 element_id 추가
   • Remove Element IDs: 현재 파일에서 element_id 제거
   • Preview Element IDs: element_id 미리보기 패널 열기
   • Validate Element IDs: element_id 유효성 검사
   • Generate Babel Config: Babel 설정 파일 생성

2. 키보드 단축키

• Ctrl+Shift+E (Windows/Linux) 또는 Cmd+Shift+E (Mac): element_id 추가
• Ctrl+Shift+P (Windows/Linux) 또는 Cmd+Shift+P (Mac): element_id 미리보기

3. 컨텍스트 메뉴

React 파일에서 우클릭 → "Add Element IDs" 또는 "Remove Element IDs" 선택

고급 기능

1. 실시간 미리보기

마우스를 JSX 요소 위에 올리면 element_id 정보가 툴팁으로 표시됩니다.

// 마우스 호버 시 표시되는 정보
<button element_id="mybutton-button-1" onClick={handleClick}>
  클릭하세요
</button>
// 툴팁: Element: button, ID: mybutton-button-1

2. 유효성 검사

타이핑 시 자동으로 element_id 유효성을 검사하고 문제가 있으면 경고를 표시합니다.

• 중복 검사: 같은 element_id가 여러 곳에 사용되는 경우
• 형식 검사: 유효하지 않은 문자나 형식 사용 시
• 누락 경고: element_id가 필요한 요소에 없는 경우

3. 미리보기 패널

Preview Element IDs 명령을 실행하면 현재 파일의 모든 element_id를 테이블 형태로 확인할 수 있습니다.

⚙️ 설정

VSCode 설정에서 reactElementId 섹션을 통해 다음 옵션들을 설정할 수 있습니다:

설정 예제

{
  "reactElementId.attributeName": "data-element-id",
  "reactElementId.idGenerator": "component",
  "reactElementId.includeComponents": ["Button", "Input", "Card"],
  "reactElementId.excludeComponents": ["TestComponent"],
  "reactElementId.autoAddOnSave": true,
  "reactElementId.showPreview": true,
  "reactElementId.validateOnType": true
}

📝 사용 예제

변환 전

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div className="login-form">
      <h1>로그인</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="email">이메일</label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="이메일을 입력하세요"
          />
        </div>
        <div className="form-group">
          <label htmlFor="password">비밀번호</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="비밀번호를 입력하세요"
          />
        </div>
        <button type="submit" className="submit-btn">
          로그인
        </button>
      </form>
    </div>
  );
}

변환 후

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div element_id="loginform-div-1" className="login-form">
      <h1 element_id="loginform-h1-2">로그인</h1>
      <form element_id="loginform-form-3" onSubmit={handleSubmit}>
        <div element_id="loginform-div-4" className="form-group">
          <label element_id="loginform-label-5" htmlFor="email">이메일</label>
          <input
            element_id="loginform-input-6"
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="이메일을 입력하세요"
          />
        </div>
        <div element_id="loginform-div-7" className="form-group">
          <label element_id="loginform-label-8" htmlFor="password">비밀번호</label>
          <input
            element_id="loginform-input-9"
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="비밀번호를 입력하세요"
          />
        </div>
        <button element_id="loginform-button-10" type="submit" className="submit-btn">
          로그인
        </button>
      </form>
    </div>
  );
}

🔧 Babel 플러그인과 함께 사용

확장 프로그램에서 Generate Babel Config 명령을 실행하면 빌드 시 자동으로 element_id를 추가하는 Babel 설정을 생성할 수 있습니다.

생성된 babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    [
      'babel-plugin-react-logging',
      {
        "attributeName": "element_id",
        "idGenerator": "auto",
        "includeComponents": [],
        "excludeComponents": [],
        "debug": false
      }
    ]
  ]
};

🚀 데이터 수집 활용

Google Analytics 연동

// analytics.js
export const trackElementClick = (elementId) => {
  gtag('event', 'element_click', {
    'element_id': elementId,
    'page_location': window.location.href
  });
};

// 컴포넌트에서 사용
function MyButton() {
  const handleClick = (e) => {
    const elementId = e.target.getAttribute('element_id');
    trackElementClick(elementId);
  };

  return (
    <button element_id="mybutton-button-1" onClick={handleClick}>
      클릭하세요
    </button>
  );
}

커스텀 이벤트 추적

// eventTracker.js
export class EventTracker {
  static track(eventType, elementId, additionalData = {}) {
    const eventData = {
      event_type: eventType,
      element_id: elementId,
      timestamp: Date.now(),
      ...additionalData
    };

    // 서버로 전송
    fetch('/api/events', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(eventData)
    });
  }
}

🐛 문제 해결

자주 묻는 질문

Q: element_id가 추가되지 않아요. A: 파일이 React 파일(.jsx, .tsx, .js, .ts)인지 확인하고, 컴포넌트 이름이 설정된 포함/제외 규칙에 맞는지 확인하세요.

Q: 유효성 검사 경고가 너무 많이 나타나요. A: 설정에서 reactElementId.validateOnType을 false로 설정하거나, reactElementId.excludeComponents에 해당 컴포넌트를 추가하세요.

Q: 미리보기 툴팁이 표시되지 않아요. A: 설정에서 reactElementId.showPreview가 true로 설정되어 있는지 확인하세요.

디버그 모드

설정에서 reactElementId.debug를 true로 설정하면 콘솔에 상세한 로그가 출력됩니다.

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이센스

이 프로젝트는 MIT 라이센스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

🆘 지원

문제가 발생하거나 기능 요청이 있으시면 Issues 페이지에서 알려주세요.

📈 로드맵

• [ ] Webpack 플러그인 지원
• [ ] ESLint 규칙 추가
• [ ] 더 많은 IDE 지원 (WebStorm, IntelliJ)
• [ ] 자동 테스트 생성
• [ ] 성능 최적화
• [ ] 다국어 지원