즐겁게, 코드

연휴를 녹이러 영화도 볼겸 체인소맨 극장판을 봤다. 특이했던 것이 요즘은 롯데시네마 앱에서 영화표를 예매하면 삼성페이에 자동으로 연동된다.뒷단 개발자들이 갈렸을 것 같은데... 간만에 프론트 개발자라 다행이라는 생각이 들었다.그런데 삼성페이를 써보던 중 페이지를 아래로 스크롤하면 티켓과 영화 제목이 자연스럽게 사라지는 애니메이션이 눈에 들어왔다.원래대로라면 티켓 정보를 보여주는 평범한 페이지라 느껴졌을 텐데, 이런 인터렉션을 넣으니 경험이 상당히 괜찮게 느껴져서 직접 만들어보고 싶었다.처음에는 scrub: true 정도만 사용하면 무난하게 만들 수 있을 것 같았는데, 추가로 고려해야 했던 점들이 몇 가지 있었다.최상단 티켓 이미지가 제자리를 유지한 채로 scale: 0에 도달할 수 있도록 pin: tru..

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

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

특별한 내용은 없는 일상글인데, 꽤나 신기한 경험이었어서 간단히 적어본다.어렸을 때는 주식이 패가망신의 상징(?) 과도 비슷한 이미지였던 것 같은데 요즘은 어떤 모임이든 최소 두어명은 주식을 하는 것 같다.나도 국내상장 해외 ETF들에 투자하고 있는데, 갑자기 "소프트웨어를 활용하면 지수 이상의 수익률을 낼 수 있지 않을까?" 라는 호기심이 생겼다. 파이썬으로 구현하는 로보어드바이저 | 윤성진 - 교보문고파이썬으로 구현하는 로보어드바이저 | 로보어드바이저 시스템의 핵심 엔진을 개발했던 금융 AI 연구원들이 직접 쓴 책으로, 로보어드바이저를 구성하는 주요 포트폴리오 전략을 파이썬 코드와product.kyobobook.co.kr그래서 지난 주부터 책을 사서 읽고 있는데, 내용이 상당히 흥미롭다. 오렌지사과 ..

일반인들은 마우스로 원하는 링크나 버튼을 눌러 웹 페이지를 자유롭게 탐색할 수 있지만, 시각장애인들은 주로 키보드의 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를 수정하세요" 를 제안하는 컨설팅..