즐겁게, 코드

1월에 잘한 것들

Chamming2 — Tue, 3 Feb 2026 17:43:14 +0900

#1. 수익화 기여하기

입사 후 계속 "돈 버는 앱을 만들자" 는 생각을 갖고 있었는데, 마침 신규 서비스에 광고 연동을 담당할 기회가 생겼다.

보상형, 인터스티셜 등 광고 관련 용어를 새로 안 것도 좋았고, 무엇보다 서비스에서 이제 실제 매출이 발생한다는 점이 뿌듯했던 것 같다.

네이버 광고 SDK에 문의를 남겨야 했던 적도 있어, uglify된 소스를 열심히 훑어보기도 했다.

#2. 뉴스 구독 자동화하기

최근 회사나 주식 관련 이슈가 많아 네이버 뉴스를 수시로 들락거렸었는데, 일하다 중간중간 뉴스를 찾게 되는 모습이 아쉬웠다.

그래서 슬랙으로 원하는 키워드의 뉴스를 구독할 수 있도록 해뒀다.

스트레스를 겪던 나쁜 루틴 중 하나였는데, 만들고 나서 마음이 많이 홀가분해진 일 중 하나다.

#3. 서비스 만들기 (1)

만들고 싶었던 것들이 몇 가지 있었다.

나는 회사 바깥 일은 일정 관리를 못하는 편인데, 정보처리기사를 따야지 따야지 하다가 늘 접수기간을 놓친 기억이 났다.

일정을 좀 더 쉽게 추가하고 관리할 수 있는 익스텐션을 만들고 배포해 보았다.

만들고 나니 내 기준에서는 사용성이 나쁘지 않은 것 같아 Geeknews에도 홍보를 해봤다.

다운로드 수가 많지는 않았지만, 시간을 내어 피드백을 남겨주고 받아준 분들께 고마웠다.

#4. 서비스 만들기 (2)

최근 여자친구가 시스템 엔지니어 직무로 취업에 성공했는데, 합격한 직무에 대한 배경지식이 부족하다고 느꼈다.

여자친구는 나와 달리 "공부" 는 잘 하는데, 문제는 인프라 직무의 특성상 방향을 잡는게 너무 어려웠던 것 같다.

그래서 최소한 리눅스 기본기를 익히는 데에 도움을 줄 수 있도록, 즐겨 하는 듀오링고와 비슷한 UI와 문제 세트를 구성해 선물해줬다.

주제가 뭐든 주위 사람들을 위한 개발을 할 때는 유난히 즐거운 것 같다.

#5. 트렌드 배워보기

최근 어느 커뮤니티를 둘러봐도 oh-my-opencode(omo), ralph loop 등의 키워드가 언급되는 것 같아 써봤다.

개인적으로 omo는 클로드가 아닌 제미나이에 물려 사용해서 그런지 샤라웃되는 만큼의 인상을 받지는 못했다. 다만 벤더사마다 다른 CLI 툴을 Opencode로 통합할 수 있다는 점과 Plan Mode를 기본으로 지원한다는 점에서 순정 Opencode에서는 크게 만족할 수 있었다.

또 Ralph loop는 네이밍이 장난스럽다는 점 외에는 상당히 요긴하게 써먹을 수 있었던 것 같았던 것이, 아직 Opus든 제미나이든 체급이 높은 모델은 rate limit에 굉장히 빠르게 도달한다.

위처럼 특정 분야의 퀴즈를 다수 생성한다던가, 다량의 번역을 교정하는 등 물량으로 승부해야 하는 건이 있다면 로우급 모델의 iteration count를 늘리는 것으로 더 경제적이면서 Output은 비슷한 결과를 얻을 수 있을 것이라 기대했다.

패키지 삭제 전에는 npm ls <패키지명> 으로 의존관계 확인하기

Chamming2 — Wed, 26 Nov 2025 10:57:18 +0900

TL;DR : 라이브러리를 삭제할 때는 npm ls <패키지명> 으로 참조관계를 먼저 확인하자.

회사 프로젝트에서는 주기적으로 사용하지 않는 라이브러리를 제거하고 있는데, 언젠간 잘 쓰겠지라는 마음으로 설치해두었던 @vueuse/core 가 있었다.

다만 기대와는 달리 오랜 기간동안 실제로 사용되지 않고 있어 이를 삭제하고 잊고 살고 있었다.

그런데 몇 개월 정도가 지난 뒤 motion에서 peerDeps로 참조하는 @vueuse/core를 참조할 수 없다는 빌드 에러가 발생하는데, 타임라인을 돌아보면 이랬던 것 같다.

1. (1월) @vueuse/core 라이브러리를 설치한다.

2. (3월) motion-v 라이브러리를 설치한다. (✅ @vueuse/core가 설치되어 있으므로 peerDeps 조건 만족)

3. (5월) 프로젝트 내에서 사용하는 곳이 없다고 판단해 @vueuse/core 를 제거한다.

4. (7월) 시간이 지난 뒤 motion-v에서 오류가 발생한다.

5. (해결) 라이브러리 참조용으로만 필요한 @vueuse/core 를 devDependency에 추가해 문제를 수정한다.

비즈니스 코드에서 안쓰이면 OK입니다 (???)

이러한 peerDeps는 코드 내에서 실제로 사용되고 있는지 찾기 어렵다는 문제가 있었고, 패키지를 삭제할 일이 있다면 삭제 전 npm ls 커맨드로 의존관계를 확인하면 에러를 줄일 수 있을 것 같다.

좌 : 타 라이브러리와 참조관계가 없을 때 / 우 : 타 라이브러리와 참조관계가 있을 때

테스트용 데이터베이스 sakila 구성하기

Chamming2 — Sun, 16 Nov 2025 01:42:38 +0900

테스트용 데이터베이스는 어떻게 만들까?

최근 2차전직(?)을 위해 SQL을 배우고 있는데, 기왕이면 크고 복잡한 데이터베이스를 만져봐야 실력이 늘 것 같았다.

그래서 더미 데이터베이스를 만드는 방법을 검색해봤더니 프로시저를 사용하는 방법이 많이 제안되는 것 같았다.

다만 내가 언제 테스트용 데이터베이스를 또 만들어야 할지 모르는데, 누군가가 만든 프로시저를 필요할 때마다 찾아 쓰는건 좋은 방법이 아닌 것 같아 공식 채널의 best practice를 찾고 싶었던 중, MySQL 공식 예제 샘플 데이터베이스가 있음을 알게 되었다.

Sakila 설치하기

샘플 데이터베이스가 여럿 있었지만 GPT의 조언대로 Sakila 라는 데이터베이스를 사용하기로 했다.

1. Sakila 데이터베이스 압축 해제하기

내려받은 Sakila 데이터베이스 파일의 압축을 해제하면 스키마와 데이터를 얻을 수 있다.

2. MySQL에서 SQL 실행하기

이후 MySQL 콘솔을 실행하고 압축을 해제한 Sakila 스키마와 데이터의 SQL을 실행한다.

실행을 마치면 학습에 사용할만한 적절한 크기의 데이터베이스가 준비된 모습이다.

그동안은 허접한(?) todo-db 같은걸 만들어 연습을 해보곤 했었는데, 이제 좀 DB다운 DB가 생긴 것 같아 뿌듯하다.

삼성페이 티켓 페이지 인터렉션 구현하기

Chamming2 — Wed, 8 Oct 2025 17:24:55 +0900

연휴를 녹이러 영화도 볼겸 체인소맨 극장판을 봤다.

틀린말은 아닐지도? ㅋㅎㅋㅎ

특이했던 것이 요즘은 롯데시네마 앱에서 영화표를 예매하면 삼성페이에 자동으로 연동된다.
뒷단 개발자들이 갈렸을 것 같은데... 간만에 프론트 개발자라 다행이라는 생각이 들었다.

출처 : 네이버 모바노 님 블로그 (https://blog.naver.com/mobano/223474960698)

그런데 삼성페이를 써보던 중 페이지를 아래로 스크롤하면 티켓과 영화 제목이 자연스럽게 사라지는 애니메이션이 눈에 들어왔다.
원래대로라면 티켓 정보를 보여주는 평범한 페이지라 느껴졌을 텐데, 이런 인터렉션을 넣으니 경험이 상당히 괜찮게 느껴져서 직접 만들어보고 싶었다.

코드 : https://github.com/C17AN/ticket-interaction-clone.git

처음에는 scrub: true 정도만 사용하면 무난하게 만들 수 있을 것 같았는데, 추가로 고려해야 했던 점들이 몇 가지 있었다.

최상단 티켓 이미지가 제자리를 유지한 채로 scale: 0에 도달할 수 있도록 pin: true를 걸어줘야 한다.
스크롤을 놓쳤을 때 인터렉션의 progress를 0%로 되돌릴지, 100%로 이동할지 결정해야 한다. (snap 옵션)
영화 제목은 스크롤과 다른 속도로 움직여야 한다. (패럴렉스 효과)
제목의 y좌표는 화면이 넓어져도 좁은 화면과 동일한 비율대로 움직여야 한다. (font-size: *10px ÷ 360px * 100vw = 2.778vw)
(* 나는 최소 뷰포트 너비를 360px로 삼고, 가독성을 위해 1px = 0.1rem 으로 치환해 작업했다.)

// GSAP 코드
useGSAP(() => {
  gsap.registerPlugin(ScrollTrigger);

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".fixed-container",
      start: "top top",
      end: "bottom top",
      pin: true,
      scrub: true,
      snap: {
        snapTo: (p) => (p > 0.5 ? 1 : 0),
        duration: 0.2,
      },
      invalidateOnRefresh: true,
    },
  });

  tl
  .to(".ticket-image", { scale: 0 }, 0)
  .to(
    ".ticket-name",
    { opacity: 0, y: -60 },
    0
  );

  ScrollTrigger.refresh();
}, []);

아무튼, 극장판은 애니메이션 원작 스토리를 모르는 상태로 봤음에도 재밌게 볼 수 있었다.

다음날 또 봤다.. (ㅎㅎ;)

Google Apps Script로 주식 주가 정보 스크래핑하기

Chamming2 — Sun, 19 Jan 2025 21:45:34 +0900

요즘 주식 데이터 분석에 흥미가 생겨 오렌지사과 님의 블로그를 잘 읽고 있는데, 구글 시트에 주가를 적재하는 부분에 호기심이 생겼다.

아래에 소개할 코드는 위 작업을 자동화한 것이다.

위 설명을 대강 요약하면 "특정 페이지에 접속해 페이지 전체를 복사한 뒤, 주가 데이터를 제외한 부분을 손으로 발라내야 한다" 는 것인데, 이런 작업을 쉽게 만드는 것이 개발자의 의무 아니겠던가!

일단 위 작업을 손으로 반복하는 것은 최선이 아닐 것 같아 스크래핑용 람다 함수를 만들어야 할지 고민하고 있었는데, 오늘 다룰 Google Apps Script 를 사용하면 너무나도 손쉽게 작업을 자동화할 수 있다.

1. 주가 데이터를 수집하는 방법

주가 데이터를 분석하기 위해서는 기본적으로 특정 기간에서의 OHLCV (시가, 고가, 저가, 종가, 거래량) 정보가 필요한데, 데이터를 수집하기 위해 yfinance, FinanceDataReader 등의 파이썬 라이브러리를 사용하거나 유료 API 서비스를 사용하는 방법, 웹 포탈을 직접 스크래핑하는 방법 등이 있다.

상기한 두 파이썬 라이브러리는 모두 훌륭하지만 데이터를 원하는 모습으로 가공하기 어렵다는 점과 데이터를 구글 시트에 적재하는 로직을 추가로 개발해야 한다는 점, 일일 호출 횟수 등에 대한 정보가 불확실하다는 점 등에서 스크래핑 로직을 직접 구현하고 싶었다.

2. Apps Script 찾기

Apps Script는 구글 워크스페이스 (캘린더, 독스, 스프레드시트, 슬라이드 등) 제품군을 프로그래밍을 통해 제어하는 기능인데, 스크래핑 로직 구현을 위해 구글 시트에서 [확장 프로그램] - [Apps Script] 메뉴를 찾아보자.

Apps Script 메뉴에 진입하면 AWS Lambda의 코드 에디터같은 화면이 나타난다.

Apps Script는 일반적인 자바스크립트 함수의 문법을 대부분 활용할 수 있으면서 구글 시트와 상호작용할 수 있는 *SpreadsheetApp 라는 강력한 인터페이스를 제공한다. (하나 특이한 점을 꼽자면 .js 가 아닌 .gs 확장자를 사용한다는 특징이 있는데, VSCode에서도 잘 인식되는 등 개발에 큰 지장은 없다.)

SpreadSheetApp 인스턴스에 대해서는 이 문서 에서 더 확인할 수 있다.

3. 주가 데이터를 구글 시트에 옮겨오기

이제 본격적으로 야후 파이낸셜의 주가 데이터를 가공한 뒤 구글 시트로 옮겨 볼텐데, 약간의 준비 작업이 필요하다.

1. B1, B2, B3 셀에 데이터 입력하기

B1 : 티커 / B2 : 조회 시작일 / B3 : 조회 종료일

B1 셀에는 티커의 단축번호 또는 영문 티커명 (Ex. QQQ, SPY)를 입력한다.

(만약 국내 티커의 단축번호를 모르겠다면 구글, investing 등에서 간단히 알아낼 수 있다.)

예를 들어 삼성전자의 단축번호는 005930 이다.

B2 셀에는 조회를 시작할 날짜를 YYYY-MM-DD 형식으로 입력한다.
(만약 해당 셀을 빈 칸으로 두면 조회 시작일을 1970년 1월 1일을 기준으로 조회하게 된다.)

B3 셀에는 조회를 종료할 날짜를 YYYY-MM-DD 형식으로 입력한다.
(만약 해당 셀을 빈 칸으로 두면 조회 종료일을 오늘 날짜를 기준으로 조회하게 된다.)

2. 내 시트 아이디, 시트 이름 기억하기

어떤 시트를 코드로 제어할 것인지 알려주기 위해 시트 아이디를 알려줄 필요가 있다.

여러분의 구글 시트 URL 중 /d/ 뒤에 오는 것이 구글 시트 아이디이다.

/d/ 뒤에 오는 영어 + 숫자 조합이 구글 시트 아이디이다.

나의 경우에는 "1iRDrqGSjUOvSrqP2ZTbC3JDzWLTxYCnfEw3X21udxMk" 이 시트 아이디가 된다.

그리고 Apps Script가 어떤 시트에 작업을 실행할지 알려줄 수 있도록 시트 이름을 미리 정해두자.

구글 시트 최하단을 보면 시트명 목록들이 나타날 것이다.

시트 아이디와 시트명은 기억해두고 있다가 바로 다음에 이어질 코드에 입력하면 된다.

3. 코드 실행하기

이제 Apps Script에 새로운 함수를 하나 만들고, 다음 코드를 붙여넣는다.

이 코드는 맨 위의 사진의 순서에 따라 야후 파이낸스를 스크래핑하고, 분석에 유리하도록 일부 행과 열의 데이터를 가공한다.

(Ex. Aug 17, 1993 -> 1993-08-17, 배당금 지급 정보 행을 삭제)

/**
 * Yahoo Finance에서 주식 데이터를 가져와 Google Sheets에 추가
 */
function importYahooFinanceData() {
  const spreadsheetId = "구글 시트 아이디"; // 구글 시트 ID
  const sheetName = "테이블을 복사할 시트 이름"; // 데이터가 들어갈 시트 이름
  const sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);

  if (!sheet) {
    throw new Error(`${sheetName} 시트를 찾을 수 없습니다.`);
  }

  // 조회 조건 읽기
  const ticker = sheet.getRange("B1").getValue().toString().trim();
  if (!ticker) {
    throw new Error("B1 셀에 유효한 티커를 입력해주세요.");
  }

  const startDateInput = sheet.getRange("B2").getValue().toString().trim();
  const endDateInput = sheet.getRange("B3").getValue().toString().trim();

  const todayTimestamp = Math.floor(new Date().getTime() / 1000);
  const startDate = startDateInput
    ? Math.floor(new Date(startDateInput).getTime() / 1000)
    : 0;
  const endDate = endDateInput
    ? Math.floor(new Date(endDateInput).getTime() / 1000)
    : todayTimestamp;
  


  if (isNaN(startDate) || isNaN(endDate)) {
    throw new Error("B2 또는 B3에 유효한 날짜 형식을 입력해주세요.");
  }

  const url = `https://finance.yahoo.com/quote/${ticker}/history?period1=${startDate}&period2=${endDate}&interval=1d`;
  const html = UrlFetchApp.fetch(url).getContentText();

  // 데이터를 파싱하기 위해 HTML 내용을 분석
  const rawData = parseYahooFinanceHtml(html);


  // "dividend" 문자열이 포함된 행 필터링 및 날짜 형식 변환
  const filteredData = rawData
    .filter(row => row.length === 7 && !row.some(cell => cell.toLowerCase().includes("dividend")))
    .map(row => {
      row[0] = parseDate(row[0]); // 첫 번째 열의 날짜를 변환
      return row;
    });

  if (filteredData.length === 0) {
    throw new Error("유효한 데이터가 없습니다.");
  }

  // 첫 번째 행에 라벨 추가
  const labels = ["Date", "Open", "High", "Low", "Close*", "Adj Close**", "Volume"];
  const dataWithLabels = [labels, ...filteredData];

  // 구글 시트의 A6부터 데이터 추가
  const startRow = 6; // A6부터 시작
  sheet.getRange(startRow, 1, dataWithLabels.length, dataWithLabels[0].length).setValues(dataWithLabels);

  Logger.log("데이터 가져오기 완료");
}

/**
 * Yahoo Finance HTML에서 표 데이터를 파싱
 */
function parseYahooFinanceHtml(html) {
  const tableRegex = /<table.*?>([\s\S]*?)<\/table>/; // 첫 번째 테이블 매칭
  const match = html.match(tableRegex);
  if (!match) {
    throw new Error("테이블을 찾을 수 없습니다.");
  }

  const tableHtml = match[1];
  const rowRegex = /<tr.*?>([\s\S]*?)<\/tr>/g;
  const cellRegex = /<t[dh].*?>([\s\S]*?)<\/t[dh]>/g;

  const rows = [];
  let rowMatch;

  while ((rowMatch = rowRegex.exec(tableHtml)) !== null) {
    const rowHtml = rowMatch[1];
    const row = [];
    let cellMatch;
    while ((cellMatch = cellRegex.exec(rowHtml)) !== null) {
      const cellText = cellMatch[1]
        .replace(/<.*?>/g, "") // 태그 제거
        .trim();
      row.push(cellText);
    }
    rows.push(row);
  }

  return rows;
}

/**
 * 날짜 문자열을 "YYYY-MM-DD" 형식으로 변환
 */
function parseDate(dateString) {
  try {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  } catch (e) {
    Logger.log(`날짜 변환 실패: ${dateString}`);
    return dateString; // 변환 실패 시 원래 값 반환
  }
}

위의 코드를 통으로 복사한 뒤 바로 실행하지 말고, 시트 아이디와 이름을 입력하는 과정을 꼭 기억하자.

결과

위 과정을 잘 따라했다면 야후 파이낸스에서 데이터를 깔끔하게 발라와 사용할 수 있게 된다.

나는 테스트를 위해 TIGER 미국배당다우존스 의 데이터를 불러와 봤는데, 국내 주식도 문제 없이 불러와지는 모습이다.

이제 잘 가공된 주식 데이터를 획득할 수 있게 되었으니, 분석 또는 개인 매매일지 기록용 등으로도 무궁무진하게 활용할 수 있게 되었다.

기타

1. Apps Script는 스케줄링을 지원한다.

조금 놀란 부분인데, Apps Script는 이처럼 시트, 캘린더의 작업을 자동화할 수 있을 뿐만 아니라 특정 시점, 주기마다 배치로 실행하는 것도 정말 쉽게 가능하다. (Ex. 장 종료 이후 주가 정보를 갱신한다던가 등의 동작을 구현할 수 있다.)

2. Apps Script의 사용량은 넉넉한 편이 아니다.

Apps Script 서비스 할당량 문서

비용 정책은 살짝 빡빡하게 느껴졌는데, 일일 수정 가능 용량이 50,000셀 / 일 이라면 역대 주가 데이터를 한번에 갱신하는 방법으로는 제대로 된 활용이 어려울 것 같았다. (*예를 들어 SPY의 역대 주가 데이터는 8,000행이 조금 넘는다.)

그런데 실제로 테스트했을 때는 8,000(행) * 7(열) 데이터를 몇 번씩 업데이트했음에도 함수가 잘 실행된다.
쿼터 사용량은 조금 더 테스트를 돌려 봐야 파악할 수 있을 것 같다.

주가 정보 업데이트 배치를 매일 돌린다고 하면 제일 최근 데이터를 최하단 행에 추가하는 등, 쓰기 횟수를 최소화해야 여러 종목들에 대한 데이터 분석을 원활하게 진행할 수 있을 것으로 보인다.

Three.js로 헤일로 애니메이션 구현하기

Chamming2 — Sun, 19 Jan 2025 02:35:05 +0900

ㅎㅎ;

우연히 블루 아카이브라는 게임을 깔아보고 있었는데, 설치 중 유난히 예쁜 애니메이션이 눈에 들어왔다.

별의 일주 운동처럼 축을 기준으로 고리가 공전하는 애니메이션인데 이게 상당히 예쁘게 느껴져 한번 비스무리하게 만들어 보았다.

급 떠오른건데 펄스건 이즈리얼 스킨에도 비슷한 효과가 있다.<br>이런 효과를 부르는 명칭이 따로 있으려나?

먼저 이런 애니메이션의 특성상 Three.js 를 사용하는 것이 적절해 보였고, 고리 형태를 화면에 그리기 위해 RingGeometry를 사용해야 할 것 같았다.

thetaLength 값을 조절해 'C' 형태의 고리를 만든 모습

RingGeometry는 기본적으로는 완전한 고리의 형태를 띠고 있는데, 생성자의 6번째 인자인 thetaLength 값을 조절하면 우측처럼 완전하지 않은 고리를 만들 수도 있다.

/**
** RingGeometry 생성자의 인자 목록 (순서대로) **

@param innerRadius — Expects a Float. Default 0.5.
@param outerRadius — Expects a Float. Default 1.
@param thetaSegments — Number of segments. A higher number means the ring will be more round. Minimum is 3. Expects a Integer. Default 32.
@param phiSegments — Number of segments per ring segment. Minimum is 1. Expects a Integer. Default 1.
@param thetaStart — Starting angle. Expects a Float. Default 0.
@param thetaLength — Central angle. Expects a Float. Default Math.PI * 2.
*/
const geometry = new THREE.RingGeometry(5, 4.8, 100, 1, 2, 5);

고리 하나를 만든 모습이다.

이제 이 코드를 적당히 수정하고 복사해, 다음과 같이 고리의 그룹을 만들어 줬다.

만약 메시의 해상도가 낮아 상이 자글거려 보인다면, 다음 코드를 추가해 개선할 수 있다.

const pixelRatio = window.devicePixelRatio;
renderer.setPixelRatio(pixelRatio * 2); // 해상도 개선

이제 고리를 움직이게 해보자.

function animate() {
  mesh1.rotateZ(0.005);
  mesh2.rotateZ(-0.005);
  mesh3.rotateZ(-0.0075);
  mesh4.rotateZ(0.005);
  mesh5.rotateZ(-0.002);
  mesh6.rotateZ(-0.005);
  renderer.render(scene, camera);
}

// webXR을 대상으로 하지 않는다면 네이티브 RequestAnimationFrame을 사용해도 상관없다.
renderer.setAnimationLoop(animate);

색감은 다르지만 고리의 움직임이 어느 정도 그럴 듯 해졌다.

도형을 마우스로 회전시킬 수 있는 기능도 추가해 보자.

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

function onMouseDown() {
  isDragging = true;
}

function onMouseUp() {
  isDragging = false;
}

function onMouseMove(event) {
  if (isDragging) {
    const deltaMove = {
      x: event.movementX || event.mozMovementX || event.webkitMovementX || 0,
      y: event.movementY || event.mozMovementY || event.webkitMovementY || 0,
    };

    mesh1.rotation.y += deltaMove.x * 0.01;
    mesh1.rotation.x += deltaMove.y * 0.01;
    mesh2.rotation.y += deltaMove.x * 0.01;
    mesh2.rotation.x += deltaMove.y * 0.01;
    mesh3.rotation.y += deltaMove.x * 0.01;
    mesh3.rotation.x += deltaMove.y * 0.01;
    mesh4.rotation.y += deltaMove.x * 0.01;
    mesh4.rotation.x += deltaMove.y * 0.01;
    mesh5.rotation.y += deltaMove.x * 0.01;
    mesh5.rotation.x += deltaMove.y * 0.01;
    mesh6.rotation.y += deltaMove.x * 0.01;
    mesh6.rotation.x += deltaMove.y * 0.01;
  }

  previousMousePosition = {
    x: event.clientX,
    y: event.clientY,
  };
}

function onMouseWheel(event) {
  const delta = Math.sign(event.deltaY) * 0.01;

  mesh1.rotation.z += delta;
  mesh2.rotation.z += delta;
  mesh3.rotation.z += delta;
  mesh4.rotation.z += delta;
  mesh5.rotation.z += delta;
  mesh6.rotation.z += delta;
}

renderer.domElement.addEventListener("mousedown", onMouseDown, false);
renderer.domElement.addEventListener("mouseup", onMouseUp, false);
renderer.domElement.addEventListener("mousemove", onMouseMove, false);

이걸로 내가 처음에 생각했던 애니메이션 효과는 구현해 보았다.

번외. 특정 URL의 응답이 Three.js 씬을 SVG로 만들게 할 수는 없을까?

욕심이 하나 있었다면 아래 링크처럼 특정 URL이 SVG를 리턴하게 해, 깃허브 프로필 영역에 이 멋진 고리 효과를 넣고 싶었다.

https://github-readme-stats.vercel.app/api?username=c17an&show_icons=true&theme=dracula

import { JSDOM } from "jsdom";
import * as THREE from "three";
import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";

// Next.js API Route를 사용할 것이라, 서버 사이드 환경을 위한 RAF 함수 모킹
function requestAnimationFrame(f) {
  setImmediate(() => f(Date.now()));
}

export async function GET() {
  // Next.js API Route를 사용할 것이라, 서버 사이드 환경을 위한 DOM 모킹
  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
  global.document = dom.window.document;
  global.window = dom.window;

  // 고리 만드는 애니메이션은 생략
  // renderer만 WebGLRenderer에서 SVGRenderer로 교체
  const renderer = new SVGRenderer();

  const svgOutput = renderer.domElement.outerHTML;

  // SVG를 image/svg+xml로 반환
  return new Response(svgOutput, {
    headers: {
      "Content-Type": "image/svg+xml", // Response Content-type도 꼭 명시해준다
    },
  });
}

API Route에서 이미지가 떨어져야 하는데, <svg> 문자열이 떨어지는 모습

그러나 아쉽게도 잘 되지는 않았다.

github-readme-stats 프로젝트는 URL에 진입하면 SVG가 이미지 형식으로 떨어지는데, SVGRenderer가 씬을 SVG로 치환해준 결과물은 보통의 SVG와 뭔가 다른 느낌이다.

처음에는 응답의 Content-Type 속성의 문제를 강하게 의심했는데, 다른 SVG 파일로 테스트했을 때는 잘 나오는 것으로 보아 렌더러의 문제가 맞는 것으로 보인다.

급하게 후다닥 만든 코드여서 탄생과 동시에 낡은 코드지만, 관심이 있는 분도 있을까봐 애니메이션 코드를 남겨둔다.

import * as THREE from "three";

const scene = new THREE.Scene();
// scene.background = new THREE.Color();
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);

const geometry1 = new THREE.RingGeometry(5, 4.8, 100, 1, 2, 5);
const material1 = new THREE.MeshBasicMaterial({
  color: "#789DBC",
  side: THREE.DoubleSide,
});
const mesh1 = new THREE.Mesh(geometry1, material1);

const geometry2 = new THREE.RingGeometry(7, 6.7, 100, 1, 0, 4);
const material2 = new THREE.MeshBasicMaterial({
  color: "#cdcfd1",
  side: THREE.DoubleSide,
});

const mesh2 = new THREE.Mesh(geometry2, material2);

const geometry3 = new THREE.RingGeometry(7, 6.7, 100, 1, 4, 4);
const material3 = new THREE.MeshBasicMaterial({
  color: "#BCCCDC",
  side: THREE.DoubleSide,
});
const mesh3 = new THREE.Mesh(geometry3, material3);

const geometry4 = new THREE.RingGeometry(7, 6.7, 100, 1, 0, 1);
const material4 = new THREE.MeshBasicMaterial({
  color: "#3483eb",
  side: THREE.DoubleSide,
});
const mesh4 = new THREE.Mesh(geometry4, material4);

const geometry5 = new THREE.RingGeometry(7, 6.7, 100, 1, 0, 5);
const material5 = new THREE.MeshBasicMaterial({
  color: "#0b3975",
  side: THREE.DoubleSide,
});
const mesh5 = new THREE.Mesh(geometry5, material5);

const geometry6 = new THREE.RingGeometry(7, 6.7, 100, 1, 0, 5);
const material6 = new THREE.MeshBasicMaterial({
  color: "#afcfe3",
  side: THREE.DoubleSide,
});
const mesh6 = new THREE.Mesh(geometry6, material6);

const renderer = new THREE.WebGLRenderer({ antialias: true });

// 화면 크기 및 devicePixelRatio 반영
const width = window.innerWidth;
const height = window.innerHeight;
const pixelRatio = window.devicePixelRatio;

renderer.setSize(width, height);
renderer.setPixelRatio(pixelRatio * 2); // 화면 해상도에 맞게 렌더링 크기 조정

camera.position.z = 50;

mesh1.position.z = -5;

mesh2.position.z = 0;

mesh3.position.z = 12;

mesh4.position.z = 20;

mesh5.position.z = 24;

mesh6.position.z = 16;

scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
scene.add(mesh4);
scene.add(mesh5);
scene.add(mesh6);

function animate() {
  mesh1.rotateZ(0.005);
  mesh2.rotateZ(-0.005);
  mesh3.rotateZ(-0.0075);
  mesh4.rotateZ(0.005);
  mesh5.rotateZ(-0.002);
  mesh6.rotateZ(-0.005);

  renderer.render(scene, camera);
}

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

function onMouseDown() {
  isDragging = true;
}

function onMouseUp() {
  isDragging = false;
}

function onMouseMove(event) {
  if (isDragging) {
    const deltaMove = {
      x: event.movementX || event.mozMovementX || event.webkitMovementX || 0,
      y: event.movementY || event.mozMovementY || event.webkitMovementY || 0,
    };

    mesh1.rotation.y += deltaMove.x * 0.01;
    mesh1.rotation.x += deltaMove.y * 0.01;
    mesh2.rotation.y += deltaMove.x * 0.01;
    mesh2.rotation.x += deltaMove.y * 0.01;
    mesh3.rotation.y += deltaMove.x * 0.01;
    mesh3.rotation.x += deltaMove.y * 0.01;
    mesh4.rotation.y += deltaMove.x * 0.01;
    mesh4.rotation.x += deltaMove.y * 0.01;
    mesh5.rotation.y += deltaMove.x * 0.01;
    mesh5.rotation.x += deltaMove.y * 0.01;
    mesh6.rotation.y += deltaMove.x * 0.01;
    mesh6.rotation.x += deltaMove.y * 0.01;
  }

  previousMousePosition = {
    x: event.clientX,
    y: event.clientY,
  };
}

function onMouseWheel(event) {
  const delta = Math.sign(event.deltaY) * 0.01;

  mesh1.rotation.z += delta;
  mesh2.rotation.z += delta;
  mesh3.rotation.z += delta;
  mesh4.rotation.z += delta;
  mesh5.rotation.z += delta;
  mesh6.rotation.z += delta;
}

renderer.domElement.addEventListener("mousedown", onMouseDown, false);
renderer.domElement.addEventListener("mouseup", onMouseUp, false);
renderer.domElement.addEventListener("mousemove", onMouseMove, false);
renderer.domElement.addEventListener("wheel", onMouseWheel, false); // 마우스 휠 이벤트

renderer.setAnimationLoop(animate);

document.body.appendChild(renderer.domElement);

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener("resize", onWindowResize);

파이썬과 함께 국장 정글에서 살아남기

Chamming2 — Sat, 4 Jan 2025 21:38:48 +0900

특별한 내용은 없는 일상글인데, 꽤나 신기한 경험이었어서 간단히 적어본다.

웃긴 짤이 많은 것도 내가 주식을 좋아하는 이유 중 하나다.

어렸을 때는 주식이 패가망신의 상징(?) 과도 비슷한 이미지였던 것 같은데 요즘은 어떤 모임이든 최소 두어명은 주식을 하는 것 같다.

나도 국내상장 해외 ETF들에 투자하고 있는데, 갑자기 "소프트웨어를 활용하면 지수 이상의 수익률을 낼 수 있지 않을까?" 라는 호기심이 생겼다.

파이썬으로 구현하는 로보어드바이저 | 윤성진 - 교보문고

파이썬으로 구현하는 로보어드바이저 | 로보어드바이저 시스템의 핵심 엔진을 개발했던 금융 AI 연구원들이 직접 쓴 책으로, 로보어드바이저를 구성하는 주요 포트폴리오 전략을 파이썬 코드와

product.kyobobook.co.kr

그래서 지난 주부터 책을 사서 읽고 있는데, 내용이 상당히 흥미롭다.

오렌지사과 님의 블로그를 오래 전부터 구독하면서 MDD와 CAGR 정도의 개념을 포트폴리오 배분에 참고하고 있었는데, 이 책은 포트폴리오 배분에 필요한 금융 수식과 함께 이를 소프트웨어적으로 구현하기 위한 코드를 제공한다.

예를 들어 3장부터 효율적 포트폴리오를 구성하기 위한 편입 비중을 직접 구할 수 있다는 코드를 소개한다.
(코드의 의미를 소개한다기보다는, 마법이나 직감이 아닌 코드로 포트폴리오를 계산할 수 있다는 것을 보여주고 싶었다.)

from typing import List, Optional, Dict
from pykrx import stock
import pandas as pd
import time
from pypfopt import EfficientFrontier

# 1. 한국거래소 데이터 스크래핑 
class PykrxDataLoader:
    def __init__(self, fromdate: str, todate: str, market: str = "-->"):
        self.fromdate = fromdate
        self.todate = todate
        self.market = market

    def load_stock_data(self, ticker_list: List, freq: str, delay: float = 1):
        ticker_data_list = []
        for ticker in ticker_list:
            ticker_data = stock.get_market_ohlcv(
                fromdate=self.fromdate,
                todate=self.todate,
                ticker=ticker,
                freq="d",
                adjusted=True,
            )
            ticker_data = ticker_data.rename(
                columns={
                    "시가": "open",
                    "고가": "high",
                    "저가": "low",
                    "종가": "close",
                    "거래량": "volume",
                    "거래 대금": "trading_value",
                    "등락률": "change_pct",
                }
            )
            ticker_data = ticker_data.assign(ticker=ticker)
            ticker_data.index.name = "date"
            ticker_data_list.append(ticker_data)
            time.sleep(delay)
        data = pd.concat(ticker_data_list)
        # 거래가 중단되어 시가가 0원이었을 경우에는 종가 데이터로 덮어씌운다.
        # loc의 첫 파라미터는 행에 대한 정보, 두 번째는 열에 대한 정보
        data.loc[data.open == 0, ["open", "high", "low"]] = data.loc[
            data.open == 0, "close"
        ]

        if freq != "d":
            rule = {
                "open": "first",
                "high": "max",
                "low": "min",
                "close": "last",
                "volume": "sum",
            }
            data = (
                data.groupby("ticker").resample(freq).apply(rule).reset_index(level=0)
            )
        data.__setattr__("frequency", freq)
        return data

# 2. 주어진 기간동안의 기대수익을 리턴하는 함수
def calculate_return(ohlcv_data: pd.DataFrame):
    close_data = (
        ohlcv_data[["close", "ticker"]].reset_index().set_index(["ticker", "date"])
    )

    close_data = close_data.unstack(level=0)
    close_data = close_data["close"]
    print("close_data: ", close_data)
    # 한 객체 내에서 행과 행의 차이를 현재값과의 백분율로 출력하는 메서드
    # pct_change(1) = 비교할 간격 = 1
    return_data = close_data.pct_change(1) * 100
    return return_data.fillna(value=0)


# 3. 포트폴리오 편입 비중을 구하는 함수
#
# @params
# return_data: 수익률 데이터
# risk_aversion: 위험 회피 계수
def get_mean_variance_weights(
    return_data: pd.DataFrame, risk_aversion: int
) -> Optional[Dict]:
    # 평균 수익률 계산
    expected_return = return_data.mean(skipna=False).to_list()
    print("expected_return : ", expected_return)
    # 공분산 (확률변수가 2가지일 때 얼마나 퍼져 있는가) 행렬 계산
    cov = return_data.cov(min_periods=len(return_data))
    print("cov : ", cov)

    if cov.isnull().values.any() or cov.empty:
        return None

    # EfficientFrontier는 다양한 목적 함수를 최적화한다.
    # 과거 평균 수익률을 기대수익률로 지정한다
    ef = EfficientFrontier(
        expected_returns=expected_return, cov_matrix=cov, solver="OSQP"
    )

    ef.max_quadratic_utility(risk_aversion=risk_aversion)
    # 0에 가까운 편입 비중 처리 (clean_weights는 기본적으로 0.0001)
    weights = dict(ef.clean_weights(rounding=None))
    return weights


fromdate = "2024-01-01"
todate = "2024-12-31"

# 삼성전자, SK이노, 카카오, 현대차
ticker_list = ["005930", "096770", "035720", "005380"]
data_loader = PykrxDataLoader(fromdate=fromdate, todate=todate, market="KOSPI")
ohlcv_data = data_loader.load_stock_data(ticker_list=ticker_list, freq="ME", delay=1)
return_data = calculate_return(ohlcv_data)

print(get_mean_variance_weights(return_data=return_data, risk_aversion=3.07))

지난 1년간의 주가 정보를 기반으로 기대수익을 구하고, EfficientFrontier 인스턴스가 마법처럼 포트폴리오를 배분해준 결과다.

# 기대수익이 가장 높은 포트폴리오를 구성하기 위해 계산된 비중
{
  '005380': 0.0586880140708824, # 현대차
  '005930': 0.1817195017162967, # 삼성전자
  '035720': 0.5192497900232249, # 카카오
  '096770': 0.2403426941895962  # SK이노
}

으잉? 그런데 카카오의 비중이 가장 높게 나왔다.

만약 연초에 카카오에 들어갔다면 퍼포먼스가 좋지 않았을 텐데, 모델이 잘못된 것일까?

궁금해 TIGER 미국S&P500 과 나스닥100을 계산에 넣어 봤더니, 또 특이한 결과를 얻을 수 있었다.

먼저 기존 국장 포트폴리오에 S&P 500만을 추가했을 때는 납득할 만한 결과가 도출된다.

# 계산된 포트폴리오 비중
{
  '005380': 0.040189957090838, # 현대차
  '005930': 0.0, # 삼성전자
  '035720': 0.0, # 카카오
  '096770': 0.054764475901768, # SK이노
  '360750': 0.9050455670073938 # S&P 500
}

# = 국내 개별주는 최소한으로 담고, 포트폴리오 대부분을 S&P로 채우면 기대수익이 가장 높다

그런데 작년 나스닥 100은 S&P 500보다 더 나은 성과를 보였음에도 불구하고, 위 코드의 실행 결과는 나스닥 100을 포트폴리오에 추천하지 않고 있다.

# 계산된 포트폴리오 비중
{
  '005380': 0.040189957090838, # 현대차
  '005930': 0.0,
  '035720': 0.0,
  '096770': 0.054764475901768, # SK이노
  '133690': 0.0,               # 나스닥 100
  '360750': 0.9050455670073942 # S&P 500
}

이제 그 이유는 책을 계속 읽어가며 찾아볼 예정인데, 파이썬이 험난한 주식시장을 헤쳐나갈 정글도가 되어줄 것 같아 기대된다.

부디 내년엔 아래 짤을 쓸 일이 없길 바라며... 재밌는 것들을 배우면 종종 적어보려 한다.

두번은 당하지 않는다..!

시각장애인에게 친절한 모달 컴포넌트 만들기

Chamming2 — Fri, 27 Dec 2024 14:51:29 +0900

일반인들은 마우스로 원하는 링크나 버튼을 눌러 웹 페이지를 자유롭게 탐색할 수 있지만, 시각장애인들은 주로 키보드의 Tab 또는 Shift + Tab 또는 별도의 장치를 통해 HTML 태그를 계층적으로 탐색합니다.

시각장애인의 웹 탐색 방법이 궁금하다면 스크린 리더 라는 도구에 대해 검색해 보는 것을 추천드립니다.

따라서 프론트엔드 개발자들은 시각장애인들이 일반인과 비슷한 수준의 탐색을 경험할 수 있도록 접근성을 신경쓸 필요가 있는데요, 오늘은 모달(팝업) 컴포넌트를 개발할 때 놓치기 쉬운 접근성을 다뤄 보려 합니다.

예시를 위해 간단한 모달을 제작한 모습입니다.

export const Modal = ({ open, handleClose }: Props) => {
  // Backdrop, CloseButton 등의 마크업 코드는 생략하겠습니다.
  
  return open
    ? createPortal(
        <Backdrop>
          <CloseButton onClick={handleClose}>닫기</CloseButton>
          <Body>
            <Header>오늘의 주요 뉴스</Header>
            <p>환율 1470원 돌파, 이대로 괜찮은가?</p>
            <Author>김철수 기자</Author>
            <button>기사 후원하기</button>
          </Body>
        </Backdrop>,
        document.body
      )
    : null;
};

글을 쓰는 중에도 환율이 1480원을 돌파했네요. (2024.12.27)

일반인은 짙은 회색의 Backdrop 영역과 흰 배경을 통해 모달이 열린 것을 알 수 있기 때문에 평범한 모달처럼 보이지만, 시각장애인들은 스크린 리더가 읽어주는 HTML 태그의 속성만으로 이를 구분해야 하기 때문에 팝업이 열리기는 했는지, 이것이 팝업이 맞기는 한지 인식하기 어려워할 가능성이 있습니다.

개선점 1. aria- 접근성 태그 추가하기

가장 기본적인 방법은 스크린 리더가 UI의 힌트를 제공할 수 있도록 접근성 속성을 추가하는 것입니다.

export const Modal = ({ open, handleClose }: Props) => {
 
  return open
    ? createPortal(
        <Backdrop
            // 스크린 리더가 이 모달이 팝업 요소임을 알려줄 수 있게 됩니다.
            role="dialog"
            aria-modal="true"
            // "오늘의 주요 뉴스 팝업"
            aria-labelledby="modal-header"
        >
          <CloseButton onClick={handleClose}>닫기</CloseButton>
          <Body>
            <Header id="modal-header">오늘의 주요 뉴스</Header>
            <p>환율 1470원 돌파, 이대로 괜찮은가?</p>
            <Author>김철수 기자</Author>
            <button>기사 후원하기</button>
          </Body>
        </Backdrop>,
        document.body
      )
    : null;
};

모달 컴포넌트에 role="dialog", aria-modal="true" 속성을 부여하면 스크린 리더는 이것이 평범한 <div>나 <main> 태그가 아닌 모달 UI라는 힌트를 시각장애인에게 전달할 수 있게 됩니다.

크롬 개발자 도구에서 접근성 트리를 확인해 보면 마크업 구조는 수정하지 않았음에도 "닫기" 버튼이 본문과 함께 모달 내에 묶이게 되었고, 현재 탐색하고 있는 UI가 "오늘의 주요 뉴스" 모달임을 명시적으로 안내할 수 있게 되었습니다.

크롬 접근성 트리 : AS-IS / TO-BE

개선점 2. Escape 키로 모달을 닫을 수 있도록 추가하기

앞서 말했듯 시각장애인은 "닫기" 버튼을 곧바로 마우스로 클릭할 수 없고, 키보드 또는 보조 입력 도구를 통해 HTML 계층을 순차적으로 탐색하게 됩니다.

따라서 컨텐츠가 많은 팝업에서는 컨텐츠를 조회하다가 팝업을 닫기 위해 뒤로가기 키를 여러 차례 눌러야 하는 불편을 겪을 수 있는데요, 이런 경험을 개선하기 위해 ESC 키를 눌렀을 때 팝업이 닫히는 기능을 추가할 필요가 있습니다.

const Modal = ({ open, handleClose }: Props) => {

  // ESC 키로 모달 닫기
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape" && handleClose) {
        handleClose();
      }
    };
    if (open) {
      document.addEventListener("keydown", handleKeyDown);
    }
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [open, handleClose]);

  return open
    ? createPortal(
          <Backdrop
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-header"
          >
            <CloseButton onClick={handleClose}>닫기</CloseButton>
            <Body>
              <Header id="modal-header">오늘의 주요 뉴스</Header>
              <p>환율 1470원 돌파, 이대로 괜찮은가?</p>
              <Author>김철수 기자</Author>
              <button>기사 후원하기</button>
            </Body>
          </Backdrop>,
        document.body
      )
    : null;
};

이처럼 keydown 이벤트에 간단한 핸들러를 추가하는 것으로 시각장애인들이 컨텐츠를 읽다가 Shfit + Tab을 수 차례 눌러 닫기 버튼을 다시 찾아야 하는 불편을 해결할 수 있게 되었습니다.

개선점 3. 포커스 트랩 구현하기

많은 불편이 개선되었지만 아직 한 가지 문제가 남아 있습니다.

시각장애인이 Tab 키를 통해 페이지를 탐색하는 과정에서 모달 바깥의 요소가 focus 동작의 대상이 될 수 있다는 점인데요, 이로 인해 UI상 기존 화면 위에 오버레이된 모달과 그 밑에 깔린 요소들을 분간할 수 없게 되어 탐색에 혼란을 주게 된다는 문제가 있습니다.

나는 모달의 내용을 읽고 싶은데, 모달을 넘어 헤더 영역까지 탐색하게 됩니다.

이를 해결할 수 있는 방법이 바로 focus trap 이라는 기법입니다.

말 그대로 포커스를 가둔다는 의미로 모달이 열려 있는 동안에는 모달 내부의 요소들만 탭을 통해 포커스가 가능하도록 하는 것인데요, 요즘은 이를 직접 구현하지 않아도 focus-trap (바닐라) 나 focus-trap-vue, focus-trap-react 를 통해 간단하게 구현할 수 있습니다.

import { FocusTrap } from "focus-trap-react";

const Modal = ({ open, handleClose }: Props) => {

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape" && handleClose) {
        handleClose();
      }
    };
    if (open) {
      document.addEventListener("keydown", handleKeyDown);
    }
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [open, handleClose]);

  return open
    ? createPortal(
        {/* 모달이 열려있는 동안에는 Focus 가능한 영역을 모달 내부 요소로 한정합니다. */}
        <FocusTrap>
          <Backdrop
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-header"
          >
            <CloseButton onClick={handleClose}>닫기</CloseButton>
            <Body>
              <Header id="modal-header">오늘의 주요 뉴스</Header>
              <p>환율 1470원 돌파, 이대로 괜찮은가?</p>
              <Author>김철수 기자</Author>
              <button>기사 후원하기</button>
            </Body>
          </Backdrop>
        </FocusTrap>,
        document.body
      )
    : null;
};

이제 시각장애인이 Tab 키를 실수로 잘못 누르더라도 모달 외부의 영역으로 포커스가 이동하지 않아, 사용자가 실수로 탐색 중이던 영역을 벗어나거나 집중을 잃을 가능성을 줄일 수 있게 되었습니다.

탭 키를 여러번 눌러도 모달 내부 요소에만 포커스되는 모습

마치며

위 세 가지 과정을 거쳤다고 해서 시각장애인들을 위한 모든 조치가 이루어진 것은 아니라고 생각합니다.

그동안은 저 역시도 비장애인의 위치에서 마크업을 빠르게 작성하는 데에만 초점을 맞춰 오지 않았나 돌아보게 되었는데요, 웹 접근성 인증 마크를 따기 위해서가 아닌 내 서비스를 애용하는 한 명의 시각장애인을 위해서라도 편리한 웹 접근성을 제공하는 습관을 들여 보려 합니다.

playground

Chamming2 — Thu, 19 Dec 2024 17:22:19 +0900

vee-validate에 타입스크립트 적용하기 (@vee-validate/yup)

Chamming2 — Thu, 19 Dec 2024 15:25:11 +0900

공식 문서에 있는 간단한 내용이긴 하지만 기록해두면 좋을 것 같아 정리해 보았다.

React-Hook-Form (RHF)의 register 함수와는 달리, vee-validate의 defineField 함수는 기본적으로 타입 추론을 제시하지 않는다.

이것이 무슨 말인가 하면...

const { values, errors, defineField } = useForm({
  validationSchema,
});

const validationSchema = yup.object({
  startDate: yup
    .date()
    .required('날짜를 입력해 주세요')
    .max(yup.ref('endDate'), '시작일을 종료일 이전으로 입력해 주세요'),
  endDate: yup.date().required('날짜를 입력해 주세요'),
});

// ❌ 별도의 설정이 없다면 '<스키마의 키 값>' 은 타입스크립트에 의해 제안되지 않는다.
const [startDate] = defineField('<스키마의 키 값>');

trigger suggestion을 실행해도 스키마의 키 값이 추론되지 않는다.

vee-validate가 키 값을 추론하기 위해서는 yup이 타입스크립트 지원을 받을 수 있도록 @vee-validate/yup 패키지를 추가로 설치할 수 있다.

# @vee-validate/yup 패키지 설치
npm install @vee-validate/yup

// toTypedSchema 는 yup이 vee-validate에 타입 추론을 제공할 수 있도록 도와준다.
import { toTypedSchema } from '@vee-validate/yup';

const validationSchema = toTypedSchema(yup.object({
  startDate: yup
      .date()
      .required('날짜를 입력해 주세요')
      .max(yup.ref('endDate'), '시작일을 종료일 이전으로 입력해 주세요'),
  endDate: yup.date().required('날짜를 입력해 주세요'),
}));

const [startDate] = defineField(''); // ✅ defineField 함수 인자의 타입이 추론된다.

defineField 함수 인자에 타입 추론이 가능해진 모습

만약 yup이나 zod 등의 검증 라이브러리를 사용하지 않거나, 라이브러리를 추가로 설치하는 것이 마음에 들지 않는다면 타입을 직접 제네릭으로 전달할 수도 있다.

const validationSchema = yup.object({
  startDate: yup
      .date()
      .required('날짜를 입력해 주세요')
      .max(yup.ref('endDate'), '시작일을 종료일 이전으로 입력해 주세요'),
  endDate: yup.date().required('날짜를 입력해 주세요'),
});

// toTypedSchema를 사용하지 않고, useForm에 직접 제네릭 타입을 정의할 수도 있다.
const { values, errors, defineField } = useForm<{
  startDate: string;
  endDate: string;
}>({
  validationSchema,
});

const [startDate] = defineField(''); // ✅ defineField 함수 타입이 추론된다.

의도치 않게(?) Vue 개발을 주로 하게 되면서 React의 RHF을 사용하지 못한다는 점이 크게 아쉬웠는데, 생각보다 vee-validate를 사용한 개발 경험에 만족하는 중이다.

번외

defineField("키") 함수는 Path<TValues> 타입을 "키" 의 타입으로 기대한다.

그런데 useForm이 제네릭으로 받는 TValues 타입이 어떤 마법을 거쳐 Path<TValues> 타입으로 전환되어 전달될지가 궁금했다.

// useForm()
// TValues 타입을 제네릭 첫 번째 인자로 받는다.
declare function useForm<TValues extends GenericObject = GenericObject, TOutput extends GenericObject = TValues, TSchema extends FormSchema<TValues> | TypedSchema<TValues, TOutput> = FormSchema<TValues> | TypedSchema<TValues, TOutput>>(opts?: FormOptions<TValues, TOutput, TSchema>): FormContext<TValues, TOutput>;

// defineField()
// Path<TValues> 타입을 제네릭 첫 번째 인자로 받는다.
defineField<TPath extends Path<TValues>, TValue = PathValue<TValues, TPath>, TExtras extends GenericObject = GenericObject>(path: MaybeRefOrGetter<TPath>, config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>): [Ref<TValue>, Ref<BaseFieldProps & TExtras>];

// 둘의 타입이 다른데, 어떻게 TValues 타입이 Path<TValues> 타입으로 전환되는 걸까?

아직 긴 코드를 분석하는 능력은 부족해 GPT에 질의했더니 FormContext의 존재를 알게 되었다.

질문 링크 : https://chatgpt.com/share/6763b59d-dd20-8008-89ca-6783e29d4c8d

또 toTypedSchema를 살펴보면 스키마를 인자로 받아 TypedSchema로 캐스팅해 리턴한다.

toTypedSchema<TSchema extends Schema, TOutput = InferType<TSchema>, TInput = PartialDeep<TOutput>>(
  yupSchema: TSchema,
  opts: ValidateOptions = { abortEarly: false },
): TypedSchema<TInput, TOutput>

toTypedSchema 함수를 통해 validationSchema에 TypedSchema 타입을 전달할 수 있게 되면 validationSchema는 TypedSchema<TValues, TOutput>이 되고, 제네릭에 전달된 TValues 타입이 defineFields에 전달되는 것으로 보인다.

// useForm 컴포저블의 FormOptions 중 
validationSchema?: MaybeRef<TSchema extends TypedSchema ? TypedSchema<TValues, TOutput> : any>;

// * TValues는 기본적으로 Record<string, any> 타입이다.

Yup.object()로 정의한 스키마 타입 (ObjectSchema ⊂ YupSchema)

toTypedSchema로 래핑된 스키마 타입

오픈소스를 사용할 때 원리를 알고 쓰려 노력하는 중인데, 타입스크립트 관문을 통과해야 하는게 쉽지 않은 것 같아 더 공부해야겠다. ‍♂️