본문 바로가기

분류 전체보기364

GPT 영단어사전 익스텐션 개발기 이제는 영어로 질문하자!ChatGPT 페이지에서 영단어를 바로 검색할 수 있는 chrome 익스텐션을 개발했습니다. https://github.com/mattew8/quick-word-lookup-GPT GitHub - mattew8/quick-word-lookup-GPT: Easily search for English words without switching tabs!Easily search for English words without switching tabs! - mattew8/quick-word-lookup-GPTgithub.com익스텐션은 다음과 같은 기능을 제공합니다.chatgpt.com 접속 후 텍스트 입력창 클릭 시, 익스텐션이 실행됩니다. (chrome 브라우저 사이드 패널 활성화)한.. 2024. 7. 20.
24.07.07~24.07.14 업무 공유기존 고객사 데이터 이관guide builder 데이터 구조 개선본 작업을 마무리했다.core package, extension, script 코드를 v2에 맞게 개발했고,이를 통해 기존 데이터 구조에서 발생하던 버그를 해결하고 좀 더 다양한 요구사항에 대응할 수 있게 되었다. 그런데, 현재 이전 버전으로 서비스를 이용하고 있는 고객사가 존재했고해당 고객사 데이터가 v2에서 호환될 수 있도록, 기존 데이터 이관 및 테스트를 진행했다.서로서로 얽힌 100개가량의 데이터가 존재했고각 데이터 순서를 명확하게 유지하는 것이 무엇보다 중요했기 때문에...가이드 간 연결 관계를 일일히 확인하고, 직접 데이터를 변경해 주었다. 데이터 이관 후 버그 픽스데이터 이관 후, 기존 고객사에서 v2 버전이 정상적으로.. 2024. 7. 14.
WebComponent에서 styled-components 사용하기 Backgrounds현재 회사에서 개발 중인 제품은 고객사 웹 페이지 위에서 동작하는 다양한 모듈들을 제공하는 형태입니다.이때 고객사 페이지와 독립적인 스타일을 유지하기 위해,별도의 웹 컴포넌트를 생성한 뒤 그 안에서 자체적으로 정의한 스타일이 동작하도록 구현했습니다. https://developer.mozilla.org/en-US/docs/Web/API/Web_components Web Components - Web APIs | MDNWeb Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from th.. 2024. 7. 10.
[JavaScript] 트리 데이터 구조 변환 시 무한 루프 방지하기 Backgrounds현제 개발 중인 서비스에서는 하나의 가이드 속 다양한 단계(Step)를 표현하기 위해 트리 구조의 데이터를 생성하고 관리하고 있습니다.각 Step은 수행할 작업, 다음 단계(next step)를 포함하는 형태로, 이를 통해 트리 구조를 생성하고 탐색할 수 있습니다. 이때 이러한 자료 구조 형태를 FE에서 UI로 표현해야 했습니다.BackEnd에서는 Step 목록을 단순히 가이드 하위에 존재하는 Step 배열로 반환해주고 있었고 이러한 배열 형태로는 각 node들 간의 부모-자식 관계를 나타낼 수 없었습니다. (index가 순서가 아니니까요) 따라서 FE 측에서 tree형태 UI로 나타낼 수 있도록 입력받은 node 배열을 변환해줘야 했습니다.요구 사항을 좀 더 구체적으로 얘기해 보면... 2024. 7. 9.
24.06.30~24.07.07 업무 공유guide builder 익스텐션 기능 개발이번 버전에서 제공하던 기능들을, 개선된 DB 구조에 맞춘 익스텐션에 적용했다. 각 요소에 대한 CRUD 기능,tree 형태 구조에 맞는 데이터 변환 기능,생성한 가이드 미리 보기 기능,수정된 Server API와 연결 등을 작업했다.말이 이관이지... 사실상 새롭게 기능 개발을 하는 것과 비슷했는데,아키텍처 도입 덕분에 이전에 비해 생산성이 훨씬 늘어남 + 버그 줄어듬이 확연하게 느껴졌다.(동료들 역시 예상치 못한 Task 처리 속도에 놀랐다. 하하!) Script 기능 개발고객사 페이지에 삽입할 script code 로직을 작성했다.해당 프로젝트는 크기가 작고, 기능 자체도 그렇게 복잡하지 않았다.따라서 헥사고날 아키텍처를 적용해 애플리케이션을 구성.. 2024. 7. 7.
팩토리 구현 시, 인스턴스 타입 안전성 확보하기 Backgrounds최근 프로젝트에서 다양한 메시지 핸들러 클래스를 생성하고 관리할 필요가 생겼습니다. 메시지 핸들러는 프로젝트 내 모듈들 간의 통신을 담당하며각각의 메시지 핸들러는 자신이 해야할 일(action)과 데이터(payload), 실제 송수신 방법에 대한 메서드를 구현하고 있었습니다.(ex "사이드 패널 활성화 메시지 핸들러", "팝업 활성화 메시지 핸들러", "타겟 정보 데이터 전송 메시지 핸들러") 이때 앱 내 메시지 핸들러의 종류가 점차 많아짐에 따라,각 메시지 타입(action)에 대응하는 구체적인 메시지 핸들러 클래스들을 손쉽게 생성하고 관리하기 위해 팩토리 패턴을 적용했습니다.import { MessageHandlerPort, Message,} from "@/application.. 2024. 7. 5.
24.06.23~24.06.30 업무 공유guide builder DB 구조 개선개선된 DB 구조를 편집 익스텐션에 적용했다. 현재 서비스를 이용하고 있는 고객사가 있는 만큼,다음 스프린트가 끝날 때까지 현재 제공 중인 기능을 모두 이관하는 것을 1차 목표로 삼았다. 구현할 기능이 제법 많아서, 시간이 촉박하지 않을까 싶었는데...2024.06.10 - [source-code/FrontEnd] - 내가 프론트엔드에 클린 아키텍처를 도입한 이유 내가 프론트엔드에 클린 아키텍처를 도입한 이유Backgrounds정부 지원사업 과제 프론트엔드 파트 총괄을 맡게 되면서,기존 서비스들을 개발하며 느낀 문제점들을 더는 답습하지 않겠다 라는 자그마한 목표를 세웠습니다. Existing Problems제가 느꼈23life.tistory.com이왕 새롭.. 2024. 7. 1.
24.06.16~24.06.23 업무TIPS - 챗봇 애플리케이션 미비된 기능 구현을 마무리 지은 후 UI 작업까지 끝마쳤다.→ 성능 평가서만 제출하면, Tips 과제는 마무리! guide builder DB 구조 개선 2024.05.13 - [lean/주간 회고] - 24.05.06~24.05.12 24.05.06~24.05.12업무DB 구조 재설계B사와의 POC를 진행하면서, 기존 데이터 구조로는 구현이 어렵거나, 불가능한 기능들이 발생했다.POC 당시에는 DB 구조를 다시 설계할만한 시간적 여유가 없었기 때문에기능 구23life.tistory.com 약 2달 전 시작했다 잠시 중단되었던 작업을 이어하기로 했다. core-package와 script-kit, 편집 익스텐션, sever 등 모든 영역에서 대대적인 수정이 발생하는데.... 2024. 6. 24.
[jest] waitFor을 통한 비동기 함수 테스트 Backgrounds비동기 함수에 대한 단위 테스트를 작성해야 할 때가 있습니다.function someTask(): Promise { return new Promise((resolve) => resolve(true));}it('비동기 함수 테스트', () => { const result = someTask(); expect(result).toBe(true);}); 위와 같이 테스트 코드를 작성하면... 당연히 실패합니다! someTask는 Promise를 반환하는 비동기 함수이므로expect 구문이 실행되는 시점에는, 해당 값은 Promise이기 때문이죠. function someTask(): Promise { return new Promise((resolve) => resolve(true));.. 2024. 6. 23.

티스토리툴바