즐겁게, 코드

요즘 주식 데이터 분석에 흥미가 생겨 오렌지사과 님의 블로그를 잘 읽고 있는데, 구글 시트에 주가를 적재하는 부분에 호기심이 생겼다.위 설명을 대강 요약하면 "특정 페이지에 접속해 페이지 전체를 복사한 뒤, 주가 데이터를 제외한 부분을 손으로 발라내야 한다" 는 것인데, 이런 작업을 쉽게 만드는 것이 개발자의 의무 아니겠던가! 일단 위 작업을 손으로 반복하는 것은 최선이 아닐 것 같아 스크래핑용 람다 함수를 만들어야 할지 고민하고 있었는데, 오늘 다룰 Google Apps Script 를 사용하면 너무나도 손쉽게 작업을 자동화할 수 있다.1. 주가 데이터를 수집하는 방법주가 데이터를 분석하기 위해서는 기본적으로 특정 기간에서의 OHLCV (시가, 고가, 저가, 종가, 거래량) 정보가 필요한데, 데이터를 ..

우연히 블루 아카이브라는 게임을 깔아보고 있었는데, 설치 중 유난히 예쁜 애니메이션이 눈에 들어왔다.별의 일주 운동처럼 축을 기준으로 고리가 공전하는 애니메이션인데 이게 상당히 예쁘게 느껴져 한번 비스무리하게 만들어 보았다.먼저 이런 애니메이션의 특성상 Three.js 를 사용하는 것이 적절해 보였고, 고리 형태를 화면에 그리기 위해 RingGeometry를 사용해야 할 것 같았다.RingGeometry는 기본적으로는 완전한 고리의 형태를 띠고 있는데, 생성자의 6번째 인자인 thetaLength 값을 조절하면 우측처럼 완전하지 않은 고리를 만들 수도 있다./**** RingGeometry 생성자의 인자 목록 (순서대로) **@param innerRadius — Expects a Float. Defaul..

일반인들은 마우스로 원하는 링크나 버튼을 눌러 웹 페이지를 자유롭게 탐색할 수 있지만, 시각장애인들은 주로 키보드의 Tab 또는 Shift + Tab 또는 별도의 장치를 통해 HTML 태그를 계층적으로 탐색합니다.💡 시각장애인의 웹 탐색 방법이 궁금하다면 스크린 리더 라는 도구에 대해 검색해 보는 것을 추천드립니다.따라서 프론트엔드 개발자들은 시각장애인들이 일반인과 비슷한 수준의 탐색을 경험할 수 있도록 접근성을 신경쓸 필요가 있는데요, 오늘은 모달(팝업) 컴포넌트를 개발할 때 놓치기 쉬운 접근성을 다뤄 보려 합니다. 예시를 위해 간단한 모달을 제작한 모습입니다.export const Modal = ({ open, handleClose }: Props) => { // Backdrop, CloseBut..

공식 문서에 있는 간단한 내용이긴 하지만 기록해두면 좋을 것 같아 정리해 보았다.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().requ..

yceEffort 님의 '새로 바뀐 네이버 메인 훔쳐보기' 라는 글을 훔쳐보던 중, MIME 타입별 리소스를 요청한 횟수와 그 크기를 보여주는 차트가 눈에 들어왔다.그동안은 성능을 디버깅하기 위해 네트워크 탭에 필터를 걸어가며 리소스를 조회해 왔는데, 저런 물건이 데브툴에 있었다니.너무 궁금해 찾아보았지만 데브툴은 물론 라이트하우스 보고서에도 저런 차트는 찾아볼 수 없었다.다행히 구글 렌즈로 이미지를 검색해 이것이 "WebPageTest" 라는 도구로 생성된 차트임을 알 수 있었는데, 라이트하우스와 비슷한 기능을 제공하지만 WebPageTest 쪽이 조금 더 내가 찾던 도구에 가깝다고 느껴졌다. 둘의 역할은 정말 비슷하지만 라이트하우스는 "성능 및 접근성을 올리려면 OO를 수정하세요" 를 제안하는 컨설팅..

이틀 전 React 19의 stable 버전이 배포되었는데, 여러 번경사항들 중에서 크게 두 가지가 피부에 와닿았다. 하나는 더이상 ref를 하위 컴포넌트에 전달할 때 forwardRef를 사용하지 않아도 된다는 것이고, 다른 하나는 form submit의 동작이 살짝 변했다는 것이다.💡 만약 폼에서 다루는 데이터 및 검증 구조가 복잡해지거나, 컴포넌트 구조가 중첩된다면 react-hook-form을 도입해볼 것을 권해드립니다.먼저 React 18 이하에서는 폼 제출 코드를 다음과 같이 작성한다.// React @^18import { FormEventHandler } from "react";const App = () => { const handleSubmit: FormEventHandler = (e)..

개발을 진행하다 보면 문자열화된 DOM을 마크업에 렌더링해야 하는 경우가 종종 생기기 마련입니다.💡 문자열 형태의 DOM을 purify하는 이유는 DOMPurify 라이브러리에 잘 소개되어 있습니다.import parse from "html-react-parser";const App = () => { const purifiedString = parse("hello world"); return {string};};export default App;최근 진행하던 프로젝트에서 관련된 문제가 있었는데, 어떻게 문제를 해결했는지를 소개합니다.📝 TL;DR : DOM을 순회하며 탐색하거나 필터해야 할 때는 TreeWalker 객체를 사용해 보세요.먼저 흔한 모습은 아니지만, 모종의 이유로 백엔드에서 문자열 ..