👨💻📱✍️🎢314 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. 쏙쏙 들어오는 함수형 코딩 회고 사내 위클리 발표에서 팀원분이 이책을 바탕으로 내용을 공유해주셨는데, 인상 깊은 내용들이 있어서 직접 구매해 읽어봤습니다. 가장 접근성이 좋고 대중적인(?) 언어라 할 수 있는 JavaScript 를 이용해서 함수형 패러다임에 대한 기본적인 설계 방식들을 설명해주고 있습니다. 특히 여러 예제를 통해 액션, 계산, 데이터 를 구분하고, 일급 객체를 통해 추상화한 계산 함수들을 이용해서 중복되는 로직을 리팩토링하는 부분이 실전에 많은 도움이 될 것이라고 느꼈습니다. 책의 후반부에는 코드의 실행 타임라인 그래프 를 그려보며 비동기 프로그래밍에서 발생할 수 있는 동시성 문제들을 해결하기 위한 동시성 기본형 객체를 이미 언어 차원에서 내장된 클래스(ex. Promise) 없이 어떻게 구현하고 적용할 수 있는지 보.. 2023. 10. 1. 그림과 실습으로 배우는 도커 & 쿠버네티스 회고 도커 입문용으로 선택하고 읽어봤던 책입니다. 실습 예제와 친절한 설명들로 도커에 대한 개괄적인 내용을 설명해주고 있습니다. 다만 shell script 까지 하나씩 설명해주고 있어서, 만약 shell script 이해에 어려움이 없는 분이시라면 책 설명이 조금 장황하다고 느낄 수 있을만한 부분도 있는 것 같습니다. 도커 공식문서도 읽어봤는데 튜토리얼 문서에서 설명하는 내용과 책의 내용이 유사한 것이 많아서 개인적으로는 공식문서도 함께 읽어보는 것을 추천합니다. 2023. 10. 1. Canvas 도형 회전의 원리와 구현 방법 📌 이미지 회전 기능 추가하기 사이드 프로젝트에서 캔버스에 그려진 이미지 회전 기능을 추가하려고 합니다. canvas 에서 객체에 제공해주는 rotate API 를 사용하면 간편하게 구현할 수 있는데요. 학습도 해볼 겸 이미지 바운더리 영역에 대한 회전 연산은 직접 구현해보기로 결정했습니다. 지금부터 하나씩 살펴보겠습니다. 📌 데카르트 평면좌표에서 회전하기 이미지 제어영역에 대한 간략한 설명 여기서 제어영역 은 이미지 테두리를 둘러싼 영역을 의미합니다. 포커싱되면 나타나며 이미지를 삭제, 회전, 리사이즈 할 수 있는 앵커를 포함하고 있습니다. 이 제어영역은 캔버스의 터치 이벤트를 받아 point 값을 바탕으로 선택된 앵커타입을 구분하고 있습니다. 모든 캔버스 객체들은 path 정보를 포함하며, isPoi.. 2023. 8. 29. 이전 1 2 3 4 5 ··· 53 다음
