본문 바로가기

👨‍💻 web.dev51

rAF 프레임 비율 조절하기 📌 requestAnimationFrame의 초당 프레임 조절하기 requestAnimationFrame(이하 rAF) 을 이용해서 JavaScript 애니메이션을 구현하는데, 성능상의 이유로 초당 프레임(FPS) 을 조절해야 하는 상황이 생겼습니다. 다른 타이머 함수들(setInterval, setTimeout)을 사용하지 않고 rAF 에서 초당 프레임을 조절하는 방법을 구현해 봤습니다. animation tick 간단하게 FPS 에 대해서 알아보고 원하는 FPS 를 위한 tick 을 구해봅시다. const tick = 1000 / fps 1초당 60 프레임을 원한다면 1000 / 60 = 16.6ms 마다 하나의 프레임을 그려야 함을 의미합니다. 여기서 목표한 프레임 비율을 위해서 하나의 프레임을 그.. 2024. 1. 30.

point-in-polygon 알고리즘으로 국내외 판단하기 트리플 웹 일정판을 개발하면서 특정 위경도 좌표 지점이 국내인지 해외인지 판단하는 방법이 필요했습니다. 구글 지도 API에서 제공하는 reverse geocoding같은 방법을 통해 해결할 수도 있지만, 추가적인 API 사용을 위해 비용을 지불하는 대신 수학적으로 가볍게 처리할 수 있는 방법을 찾아봤습니다. 📌 Point-In-Polygon 알고리즘 다각형의 교점을 이용해서 판단하기 위와 같은 다각형에서 붉은 점을 A 라고 하겠습니다. 이때 좌표 A 가 다각형 안에 존재하는지 판단하기 위해서는 해당 지점을 기준으로 수평선을 그어서 교차되는 변의 개수를 세어주면 됩니다. 방향은 상관없고, 한쪽으로만 그어주면 됩니다. 이때 교차되는 지점을 node 라고 표현하겠습니다. 만약 node 의 개수가 홀수라면 다각.. 2024. 1. 30.

Vanilla JS 로 FigJam 웹앱 만들기 이번 포스트에서는 작년 초에 4개월 정도 퇴근하고 짬 내서 만든 PWA 웹앱 개발 과정에 대해 소개해볼까 합니다. (개인 notion에 정리해놓고 업로드가 너무 늦었네요 😂) 해당 내용으로 겸사겸사 사내 위클리 발표도 진행했습니다. 프로젝트 GitHub 저장소는 여기서 확인하실 수 있습니다. https://github.com/sohnjunior/editty GitHub - sohnjunior/editty: 🧑‍🎨🍦 Sketch with vanilla web app 🧑‍🎨🍦 Sketch with vanilla web app. Contribute to sohnjunior/editty development by creating an account on GitHub. github.com 📌 들어가며 2022년도.. 2024. 1. 23.

Canvas 도형 회전의 원리와 구현 방법 📌 이미지 회전 기능 추가하기 사이드 프로젝트에서 캔버스에 그려진 이미지 회전 기능을 추가하려고 합니다. canvas 에서 객체에 제공해주는 rotate API 를 사용하면 간편하게 구현할 수 있는데요. 학습도 해볼 겸 이미지 바운더리 영역에 대한 회전 연산은 직접 구현해보기로 결정했습니다. 지금부터 하나씩 살펴보겠습니다. 📌 데카르트 평면좌표에서 회전하기 이미지 제어영역에 대한 간략한 설명 여기서 제어영역 은 이미지 테두리를 둘러싼 영역을 의미합니다. 포커싱되면 나타나며 이미지를 삭제, 회전, 리사이즈 할 수 있는 앵커를 포함하고 있습니다. 이 제어영역은 캔버스의 터치 이벤트를 받아 point 값을 바탕으로 선택된 앵커타입을 구분하고 있습니다. 모든 캔버스 객체들은 path 정보를 포함하며, isPoi.. 2023. 8. 29.

Storybook useArgs 활용하기 📌 예시 살펴보기 스토리북을 사용하다보면 control prop을 이벤트 핸들러와 동기화시키고 싶은 경우가 있습니다. 예시를 위해 지도 컴포넌트가 있고, 마커 클릭 시 활성화되는 마커 ID 가 변경된다고 하겠습니다. 이 컴포넌트는 다음과 같은 스토리를 가질 것입니다. import { Map } from './map' const meta = { component: Map } export default meta const mock = [ { id: '1', poi: {/** some data */} }, { id: '2', poi: {/** some data */} }, { id: '3', poi: {/** some data */} }, // ... ] const options = mock.map((opti.. 2023. 8. 28.

Web Component와 함께 컴포넌트 만들기 📌 Web Component 란? web component는 HTML/CSS/JS를 이용하여 재사용가능한 컴포넌트를 만들 수 있는 표준 방식입니다. 나온 지는 꽤 오래된 기술이지만, 직접 써보지 않는 이상 접해볼 기회가 많지 않아서 이번 기회에 사이드 프로젝트에 적용해 볼 겸 관련 스펙을 찾아보고 정리해 봤습니다. 📌 web component 톺아보기 웹 컴포넌트는 컴포넌트 재사용과 캡슐화를 위해서 Custom Element , Shadow DOM , HTML template 을 사용합니다. 1️⃣ custom element API 웹 표준은 custom element 라는 JavaScript API를 통해 직접 HTML 엘리먼트를 생성할 수 있습니다. 표준에서는 Autonomous custom 와 Cu.. 2023. 8. 25.

이전 1 2 3 4 5 ··· 9 다음

티스토리툴바