하이퍼링크 숨기기 기법

카테고리

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

서브카테고리

웹 개발

대상자

Next.js를 사용하는 웹 개발자 (중급 이상), 보안 및 UX 최적화에 관심 있는 개발자

핵심 요약

• Tailwind CSS 활용: decoration-none 클래스로 링크 시각적 감추기 (DOM에 anchor 태그 존재)
• Next.js 라우터 활용: useEffect로 렌더링 지연 처리 (DOM 트리에 onclick 없음)
• 보안성: 두 번째 방법은 DOM 분석 시 링크 존재 여부를 확인하기 어려움

섹션별 세부 요약

1. Tailwind CSS 기반 접근법

• Link 컴포넌트에 className="text-foreground hover:text-foreground decoration-none" 적용
• 시각적 스타일로 링크 식별 어려움 유도
• DOM 탐색 시 태그 존재로 감지 가능
• href 속성은 정상적으로 작동

2. Next.js 라우터 기반 접근법

• 'use client' 훅으로 클라이언트 컴포넌트 생성
• useEffect로 isMounted 상태 관리
• if (!isMounted) return null로 초기 렌더링 방지
• onClick 이벤트는 DOM 트리에 남지 않음
• router.push()로 라우팅 수행

결론

• 보안성: 두 번째 방법이 DOM 분석 시 링크 존재 여부를 감지하기 어려움
• 성능: useEffect로 렌더링 지연 처리 시 초기 로딩 속도 영향 가능성
• 추천: 보안이 우선시될 경우 두 번째 방법 사용, UX 최적화가 필요할 경우 첫 번째 방법 적용