728x90 반응형 분류 전체보기362 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. 24.06.09~24.06.16 업무TIPS - 챗봇 애플리케이션 기능 개발챗봇 애플리케이션에 필요한 외부 인프라를 구현하고, 연결했습니다. BackEnd Server기존 API로는 처리할 수 없는 동작이 몇 가지 있어백엔드 개발자분들과 공유 후 함께 작업을 진행했습니다. 대부분의 동작은 비슷했지만1) 사용자가 달라, 기존 권한 확인 로직을 사용할 수 없음2) 수집되는 데이터 차이 발생 으로 인해챗봇 사용자 용 API를 새로 만들고, 이를 FE에서 호출하는 형태로 구현했습니다. window popup챗봇을 통한 예약 생성 Flow에는, 운영 중인 다른 웹 사이트의 UI/UX가 그대로 사용된 부분이 있었습니다.(날짜 조회 및 선택, 동의서 서명 및 저장) 해당 컴포넌트를 그대로 복사붙여넣기 하고 싶지는 않았기 때문에... (사실 말도 안.. 2024. 6. 17. [jest] test.each를 통해 여러 입력값 테스트 간결하게 구현하기 Backgrounds동일한 테스트를, 입력값만 바꾸어서 실행해야 할 때가 있습니다. 데이터를 특정 형태로 변환하는 함수들이 대표적인 경우겠죠. 예를 들어, 입력받은 ms를 시간과 분 으로 분리하는 함수가 있습니다.import { convertMsToHoursAndMinutes } from '@/utils/time'; it('ms => 시간/분 변환 함수 동작 테스트', () => { const ms = 1800000; // 30분 const { hours, minutes } = convertMsToHoursAndMinutes(ms); expect(hours).toBe(0); expect(minutes).toBe(30); }); 1800000ms(30분)을 입력받으면, 0시간 30분 을 반환하는지 테스트 .. 2024. 6. 13. 이전 1 2 3 4 5 6 7 8 ··· 41 다음 728x90 반응형
