전체 글314 TRIPLE 웹 일정판 트러블 슈팅 회고록 작년에 웹 일정판 서비스를 구현하면서 반응형 UI와 스크롤 UX와 관련된 몇 가지 이슈들이 있었는데, 그때 당시를 회고해보면서 각각의 문제 상황과 이를 해결한 방법들을 정리해보려고 합니다. 📌 웹 일정판 기능과 지원 범위 트리플 웹 일정판은 PC와 모바일(태블릿 포함) 환경을 타깃으로 한 웹 서비스입니다. 트리플 앱에서 생성한 일정을 트리플 유저가 아닌 사람들도 접근할 수 있는 링크를 생성해 줍니다. 트리플 앱에서 일정판 링크는 총 3가지 방법으로 공유가 가능합니다. 일정 링크 복사하기 카카오톡으로 공유하기 그 외 메신저 등의 방법으로 공유하기 링크를 보통 카카오톡으로 공유하기 때문에 카카오톡 인앱 브라우저를 비롯하여 전달받은 링크를 실행할 수 있는 주요 브라우저(safari, chrome, whale,.. 2024. 3. 11. Server Sent Events 적용해보기 📌 SSE vs Web Socket 작년에 서울콘 행사를 위한 챗봇 서비스 만들면서 Server Sent Events 를 사용해 볼 기회가 생겼습니다. 개념에 대해서만 알고 있었지 직접 적용해 본 적은 없었는데, 간단히 어떤 프로토콜인지 살펴보도록 하겠습니다. 우선 Server Sent Events 와 Web Socket과 어떤 차이점이 존재하는지 간단하게 살펴보겠습니다. 챗봇 서비스는 특성상 실시간으로 양방향 통신이 필요하지 않았고 UTF-8 텍스트 데이터만 다루기 때문에 Server Sent Events 로 충분히 구현이 가능했습니다. EventSource 인터페이스 사용 방법과 관련 내용은 공식문서를 참고해 보시면 좋을 것 같습니다. 📌 기존 EventSource의 한계점 1️⃣ 에러 처리의 어려움.. 2024. 3. 10. 정규표현식과 함께 URL 뜯어보기 ⛔️ 다음에서 정의하는 정규식이 모든 URL 형식에 대응되지는 않는 것에 유의해주세요. ⛔️ ipv4, ipv6 형식의 ip address 형식은 지원하지 않습니다. URL(Uniform Resource Locator) 은 웹 상의 리소스를 가리키는 고유한 주소입니다. HTML 페이지, CSS 및 이미지 리소스 등 그 어떤 것을 가리킬 수 있습니다. 이전에 텍스트 내에서 URL 형식의 문자열 파싱이 필요해서 URL 규격에 대해 찾아본 내용을 정리하겠습니다. 📌 RFC 문서 참조 이번 포스트에서 참고한 RFC 문서들은 다음과 같습니다. RFC 952 - https://datatracker.ietf.org/doc/html/rfc952 RFC 1034 - https://datatracker.ietf.org/d.. 2024. 3. 1. Chrome 개발자도구를 이용해서 위치정보 설정하기 geolocation 관련된 기능을 개발할 때 사용자 위치정보를 모킹 할 수 있는 방법이 필요한 경우가 있습니다. chrome devtool 에서는 이를 위한 테스트 방법을 제공해주고 있는데, 다음 2 단계로 나눠서 진행해보겠습니다. Google Map 서비스에서 특정 위치의 위경도값 조회하는 방법 Chrome devtool에서 위경도값 지정해서 테스트하는 방법 1️⃣ Google Map 서비스를 통해 특정 좌표의 위경도값 조회하기 Google Map 서비스에 접속해서 원하는 좌표를 클릭하면 회색 마커로 포커싱 됩니다. 이후 회색 마커를 다시 클릭하면 위경도 값이 나타납니다. 2️⃣ Chrome devtool Sensor 사용하기 custom location 추가하기 먼저 사용자 정의 위치정보를 추가하는.. 2024. 3. 1. storybook middleware proxy 로 CORS 우회하기 fetch 를 사용하고 있는 컴포넌트 스토리를 작성할 때 CORS 이슈 해결이 필요했습니다. 스토리북은 빌드 시 webpack 을 사용하고 있고, dev server 실행 시 middleware 스택을 추가할 수 있습니다. 📌 storybook middleware 추가하기 예를 들어 다음과 같은 fetch 요청이 있고, /api 에 대한 프락시를 구성하고 싶다고 하겠습니다. fetch('/api/blahblah') 패키지를 추가해줍니다. $ npm i -D http-proxy-middleware middleware.js 파일을 생성해 줍니다. target과 origin을 설정해서 요청을 프록싱하는 규칙을 추가합니다. // .storybook/middleware.js const { createProxyMi.. 2024. 3. 1. 정규식으로 camel-case 파싱하기 📌 camelCase를 단어 단위로 파싱 하기 축약 표현(ex. CSS )도 지원하면서 다음과 같이 camelCase 키워드를 단어 단위로 파싱 하려고 합니다. searchSeoulPOIItems → search seoul poi items searchSeoulPoiItems → search seoul poi items CSSProperties → css properties searchNIMBUS2000BroomStick → search nimbus2000 broom stick 정규식의 lookbehind 를 사용하면 쉽게 해결이 가능한데, safari는 16.4부터 지원해서 크로스브라우징 이슈가 있습니다. 그래서 다른 방식으로 문제를 해결해보려고 합니다. 📌 lookbehind를 사용하지 않고 해결해 .. 2024. 2. 24. 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. 이전 1 2 3 4 ··· 35 다음
