즐겁게, 코드

TL;DR : 라이브러리를 삭제할 때는 npm ls 으로 참조관계를 먼저 확인하자. 회사 프로젝트에서는 주기적으로 사용하지 않는 라이브러리를 제거하고 있는데, 언젠간 잘 쓰겠지라는 마음으로 설치해두었던 @vueuse/core 가 있었다. 다만 기대와는 달리 오랜 기간동안 실제로 사용되지 않고 있어 이를 삭제하고 잊고 살고 있었다.그런데 몇 개월 정도가 지난 뒤 motion에서 peerDeps로 참조하는 @vueuse/core를 참조할 수 없다는 빌드 에러가 발생하는데, 타임라인을 돌아보면 이랬던 것 같다. 1. (1월) @vueuse/core 라이브러리를 설치한다.2. (3월) motion-v 라이브러리를 설치한다. (✅ @vueuse/core가 설치되어 있으므로 peerDeps 조건 만족)3. (5월..

테스트용 데이터베이스는 어떻게 만들까?최근 2차전직(?)을 위해 SQL을 배우고 있는데, 기왕이면 크고 복잡한 데이터베이스를 만져봐야 실력이 늘 것 같았다.그래서 더미 데이터베이스를 만드는 방법을 검색해봤더니 프로시저를 사용하는 방법이 많이 제안되는 것 같았다.다만 내가 언제 테스트용 데이터베이스를 또 만들어야 할지 모르는데, 누군가가 만든 프로시저를 필요할 때마다 찾아 쓰는건 좋은 방법이 아닌 것 같아 공식 채널의 best practice를 찾고 싶었던 중, MySQL 공식 예제 샘플 데이터베이스가 있음을 알게 되었다.Sakila 설치하기샘플 데이터베이스가 여럿 있었지만 GPT의 조언대로 Sakila 라는 데이터베이스를 사용하기로 했다.1. Sakila 데이터베이스 압축 해제하기내려받은 Sakila 데..

연휴를 녹이러 영화도 볼겸 체인소맨 극장판을 봤다. 특이했던 것이 요즘은 롯데시네마 앱에서 영화표를 예매하면 삼성페이에 자동으로 연동된다.뒷단 개발자들이 갈렸을 것 같은데... 간만에 프론트 개발자라 다행이라는 생각이 들었다.그런데 삼성페이를 써보던 중 페이지를 아래로 스크롤하면 티켓과 영화 제목이 자연스럽게 사라지는 애니메이션이 눈에 들어왔다.원래대로라면 티켓 정보를 보여주는 평범한 페이지라 느껴졌을 텐데, 이런 인터렉션을 넣으니 경험이 상당히 괜찮게 느껴져서 직접 만들어보고 싶었다.처음에는 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..