728x90 반응형 source-code/FrontEnd36 [chrome extension] 에러 핸들링 1. No active side panel 에러 chrome.sidePanel.open({ tabId }); sidePanel open api를 호출했을 때 No action side panel 에러가 발생했습니다. await chrome.sidePanel.setOptions({ tabId, path: "sidepanel.html", enabled: true, }); chrome.sidePanel.open({ tabId }); setOptions 후 open을 호출해 해결할 수 있었습니다. 2. popup에서 sendMessage를 통한 sidePanel 열기 popup을 클릭했을 때 sendMessage를 호출하고, background.js에서 해당 message를 수신했을 경우 side panel을 .. 2024. 2. 2. [chrome extension] side panel 사용하기 1. cusom side panel과 문제점 현재 저희 회사는 chrome extension을 이용해 서비스를 제공하고 있습니다. 사용자는 현재 자신이 보고 있는 웹 페이지를 조작해 특정 서비스를 이용할 수 있는 형태입니다. 이때 자신이 제어한 항목 등을 좌측 side panel에서 보거나 선택할 수 있습니다. 그런데 여기서 문제가 발생합니다. extenion 영역에 존재하는 side panel은 position이 fixed이기 때문에, 사용자가 보고 있는 웹 페이지를 덮을 수밖에 없다는 것이죠! 물론 panel을 absolute로 두고 사용자 페이지 style을 조작해, 억지로 panel 영역을 밀어낼 수도 있습니다. (실재로 margin, transition 등의 속성을 사용해 이를 구현했습니다) 하.. 2024. 2. 1. next 14 Amplify 배포 시 crypto 에러 해결 1. 문제 상황 인증 절차에 공개키 알고리즘을 사용하고 있었습니다. server와 client 모두 node 환경이므로, crypto를 사용해 암호화/복호화를 진행했습니다 import crypto from 'crypto'; encrypt(plainText: string, publicKey: string) { const buffer = Buffer.from(plainText); const encrypted = crypto .publicEncrypt(publicKey.replace(/\\n/g, '\n'), buffer) .toString('hex'); return encrypted; } decrypt(encrytedText: string, privateKey: string) { const buffer = .. 2024. 1. 24. [chrome extension] 익스텐션 설치 여부 감지하기 chrome extension 서비스를 제공할 경우, 웹 페이지에서 해당 extension이 브라우저에 설치되었는지 감지해야 하는 경우가 발생한다. (익스텐션이 설치되지 않았다면, chrome extension store로 이동해 설치 유도 등) 구글링을 해보면, 일반적으로는 아래와 같은 방법들이 사용된다.1. extension에서 DOM을 조작해 감지extension에서 문서를 조작하고, 웹 페이지에서는 해당 문서가 조작되었는지로 판단하는 방식! extension이 설치된 경우, manifest.json의 content_scripts 속 파일이 실행된다. // manifest.json { "content_scripts": [ { "js": ["content.js"], } ] } js 파일이 실행되므로,.. 2024. 1. 18. XState Visualizer 활용하기 XState란?→ 유한 상태 머신(Finite State Machine, FSM)을 구현하고 관리하기 위한 Javascript 및 Typescript 라이브러리! FSM는 시스템이 여러 상태 간에 전이할 수 있는 동작을 정의하는 모델링 도구로 사용되는데, XState는 이러한 상태 머신을 사용해 복잡한 상태 및 이벤트 기반 로직을 간결하게 구현하고 유지 보수할 수 있게 해 준다. FrontEnd 개발 시 상태 관리, UI 논리 제어, 이벤트 핸들링과 같은 상황에서 사용이 가능하며... 2023.10.11 - [source-code/FrontEnd] - 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState)프론트엔드 개.. 2024. 1. 1. JS 종료 시점 제어되는 ScrollIntoView 구현하기 요구 사항은 다음과 같다. 1. xPath를 통해 target HTMLElement를 조회한다. 2. target element가 존재할 경우, 해당 요소 옆에 툴팁을 띄운다. 3. 툴팁 클릭 시 다음 툴팁으로 이동한다. (1 반복) 3-1. 다음 target element가 스크롤로 인해 화면에 보이지 않을 경우, 해당 요소가 가운데 오게끔 자동으로 스크롤한다. 3-2. 이때 스크롤이 진행되는 동안 이전 툴팁은 보이지 않고, 스크롤 이동 종료 후 다음 툴팁이 뜬다. 3-1, 3-2에 대한 기능을 구현해 볼 예정! 일반적인 자동 스크롤 대부분의 자동 스크롤 로직은 1) 이벤트 발생 시 최하단으로 자동 스크롤 (ex 채팅방) 2) 특정 요소가 화면 상에 계속해서 보이도록 자동 스크롤 (ex 스크롤 포커싱).. 2023. 12. 1. 직접 두드려본 cjs esm 모듈 시스템 2023. 11. 30. 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 프론트엔드 개발을 하다 보면, 다음과 같은 요구사항과 심심찮게 만날 수 있다. 1. 사용자는 여러 선택지 중 하나를 선택할 수 있다. 2. 선택된 요소는 스타일이 변경된다. 3. 선택된 요소를 다시 선택했을 경우, 해당 요소의 선택이 해제된다. 사실 여기까지는 별다른 문제 없이, 쉽게 구현이 가능하다. 현재 선택한 role 도망자 선택 수사관 선택 선택 안함 도망자 로 변경 수사관 으로 변경 도망자 선택 안함 으로 변경 선택 안함 으로 변경 수사관 도망자 로 변경 수사관 으로 변경 role을 선택하는 동작은 현재 선택된 role(상태)에 따라 각기 다른 동작을 수행하며, 만약 React로 이를 구현한다면... import React, { useState } from "react"; const page =.. 2023. 10. 11. vanilla extract 사용하기 - Selectors styling Selectors 두 가지 방법을 통해 주어진 스타일에 대한 selector를 지정할 수 있다. simple pseudo selectors 매개변수를 사용하지 않아, 알아보기 쉽고 간단하다. styles.css.ts import { style } from '@vanilla-extract/css'; const myStyle = style({ ':hover': { color: 'pink' }, ':first-of-type': { color: 'blue' }, '::before': { content: '' } }); selectors key 좀 더 복잡한 규칙은 selectors key를 통해 지정해줄 수 있다. import { style } from '@vanilla-extract/css'; .. 2023. 8. 31. 이전 1 2 3 4 다음 728x90 반응형
