레몬그린 블로그

전체적으로 Pinia가 좀 더 최신 트렌드를 반영하고, 자바스크립트 다워졌다고 생각합니다. 좀 더 React 라이브러리처럼 쓸 수 있게 변했다 해야하나? 전체적으로 Vue 3가 독자 문법같은 노선에서 자바스크립트 표준 문법 노선으로 간 것 같아 마음에 듭니다. Pinia의 경우에는 state 선언 방법이 이렇습니다. import { defineStore } from 'pinia' export const useProductStore = defineStore('product', { state: () => ({ products: [ { name: 'Shoes', price: 30000 }, { name: 'Apple', price: 5000 } ] }), getters: { productCount(state)..

어느 날, 일기장을 토이 프로젝트로 만들고 있는데, 왠 날짜를 받아서 해당 날짜의 일기를 뿌려주는 함수가 작동하지 않고 있었다. 어쩌다보니 2022/12/22처럼 /로 구분 된 String을 Date 객체로 만들어 사용하고 있었는데, 이게 무슨 일이람? 정말 기가 막힌 언어가 아닐 수 없다. / 로 구분해서 날짜를 넣으면 KST 시각으로 인식해서 1월 1일 15시로 출력이 되고, - 로 구분해서 넣으면 UTC로 인식해서 잘 들어가는 기이한 현상을 볼 수 있었다... 여담으로, 이 문제를 발견하게 된 이유는 일기장 프론트엔드는 KST로 출력되고, DB에서는 UTC 기준으로 나오고, JS에서는 KST로 받아서 UTC로 출력하고, DB에서 받은 UTC Date 객체를 String으로 바꿔버렸는데 그걸 KST로..

정답: -webkit-backdrop-filter를 추가로 사용하기. 사파리에서는 vendor prefix와 함께 사용해야한다.

영상을 스크롤하면서 볼 수 있는 뷰어를 만드는데, 영상을 스크롤 할 때마다 렉이 걸린다. 재생은 잘 되는데. 왜 그러는걸까? 영상을 인코딩 할 때는 GOP라는 압축 기법이 들어간다. 이 기법은 영상이 정상 프레임 + 예측 프레임들로 채워진다 이 압축 기법을 사용하면 사진의 아래처럼 예측을 하여 영상이 만들어진다. 일반적인 영상 재생에서는 이 예측이 재생 시간안에 이루어진다. 하지만 스크롤링 같은 경우는 매우 빠르게 흘러가기때문에 이러한 예측 압축을 다시 풀 시간이 없다. 이를 해결하기 위해서는 예측 프레임을 없애줌으로써, 정상 프레임인 I 프레임으로만 이루어진 영상을 만들어 사진의 위처럼 압축 없이 인코딩한다. 하지만 압축이 없어지기 때문에 약간의 크기 증가는 감안해야한다. ffmpeg -i 영상.mp4..

Bun은 Node.js와 비슷한 새로운 자바스크립트 런타임이다. 전에는 Deno가 잠깐 유행하기도했는데 Node.js와 API가 다른 탓에 인기가 길게 유지되지는 못했다. 하지만 Bun은 이것을 저격한 듯 Node와 90% 정도 호환되는 API를 가지고 있다. 그러면 한번 Bun의 장점들을 알아보자: 노드에 비해 2~3배 빠른 성능: 사파리의 JavascriptCore 엔진을 확장한 엔진을 사용하여 속도가 빠르다. Deno에 비해 뛰어난 Node.js API 지원 WebSocket, Fetch 같은 Web API도 지원하고, 노드 네이티브 API도 약 90% 지원한다. node_modules를 그대로 사용가능 Node.js의 모듈 알고리즘을 그대로 구현하여 그대로 사용가능하고, ESM, CommonJS ..