👨💻📱✍️🎢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. 이전 1 2 3 4 ··· 53 다음
