JavaScript

PassPass 공공기관·금융 사이트에서 매번 반복되는 간편인증 정보 입력을 자동화하는 Chrome 확장프로그램입니다. 홈택스, 정부24, 민원24 등에서 본인인증 팝업이 열리면 이름·생년월일·휴대폰번호를 자동으로 입력하고, 선호하는 인증기관(PASS, 카카오, 토스 등)까지 자동으로 선택합니다. 주요 기능 간편인증(OACX) 자동입력 이름 / 생년월일 / 휴대폰번호 자동 입력 PASS · 카카오톡 · 토스 · 국민인증서 · 네이버 · 신한 · 하나 · 우리 · NH · 삼성패스 · 뱅크샐러드 자동 선택 KMC 휴대폰 본인인증 자동화 (kmcert.com) 통신사 자동 선택 (SKT / KT / LGU+ / 알뜰폰) SMS · PASS · QR 인증방식 자동 선택 이름 · 생년월일 · 주민번호 성별코드 · 휴대폰번호 자동 입력 NICE 본인인증 자동화 (nice.checkplus.co.kr) 통신사 · 인증방식 자동 선택 SMS 정보 입력 자동 처리 토스 인증 자동입력 (auth.cert.toss.im) 이름 · 휴대폰번호 · 생년월일 자동 입력 개인정보 수집·이용 동의 자동 체크 PIN 잠금 보안 숫자 4자리 PIN으로 개인정보 보호 브라우저 세션 종료 시 자동 잠금 지원 사이트 국세청 홈택스, 정부24, 국민건강보험공단, 국민연금공단, 행정안전부, 학점은행제, 법무부 전자공증, 대법원 전자소송, SRT, 우체국, 병무청, 복지로, 워크24 등 50개 이상의 공공·금융 사이트 및 KMC·NICE 인증 연동 사이트 전체를 지원합니다. ...

Rails + ViewComponent + Lookbook 조합으로 컴포넌트 라이브러리를 만들 때, Stimulus 컨트롤러가 전부 스텁(빈 껍데기) 상태로 남아있는 상황을 맞닥뜨렸다. 13개 컨트롤러 중 3개만 동작하고 나머지 10개는 connect() {} 한 줄짜리였다. 이걸 전부 구현하면서 겪은 삽질을 정리한다. 구현 대상 총 11개 컨트롤러를 4단계로 나눠서 구현했다. Wave 컨트롤러 핵심 기술 1 TagInput, FileDropzone, CategoryTab DOM 조작, 드래그 이벤트 2 ScrollReveal, ScrollScale, VideoScrubbing, HorizontalScroll RAF 쓰로틀, IntersectionObserver, ResizeObserver 3 ScrambleText, RandomReveal RAF 애니메이션 루프, Fisher-Yates 셔플 4 ImageCarousel, CarouselContainer 드래그/터치, translateX 트랜지션 삽질 1: Lookbook 프리뷰에서 Stimulus가 아예 안 됨 가장 크게 막혔던 부분이다. 컨트롤러를 다 구현하고 Lookbook을 열었는데 아무 동작도 하지 않는다. 크롬 DevTools를 열어보니 data-controller 속성은 붙어있는데 Stimulus가 연결이 안 된 상태였다. ...

브라우저 확장 프로그램에서 form 자동입력 기능을 확장하면서 삽질한 내용들을 정리한다. 1. 다이렉트 자동차보험 사이트 content script 자동입력 문제: JS 렌더링 사이트는 WebFetch로 form 구조를 못 읽는다 한국 보험사 다이렉트 사이트들은 대부분 SPA/RIA 구조다. 삼성화재: SFMI 자체 RIA 프레임워크 현대해상, DB손보: Spring MVC .do URL 패턴 KB손보, 메리츠: 모바일/PC 별도 도메인 WebFetch로 URL을 긁어봤자 form 필드 구조가 나오지 않는다. 직접 접속해서 DevTools로 확인하거나, 업계 공통 패턴으로 커버하는 방법 중 후자를 선택했다. ...