728x90 반응형 source-code/FrontEnd48 내가 프론트엔드에 클린 아키텍처를 도입한 이유 Backgrounds정부 지원사업 과제 프론트엔드 파트 총괄을 맡게 되면서,기존 서비스들을 개발하며 느낀 문제점들을 더는 답습하지 않겠다 라는 자그마한 목표를 세웠습니다. Existing Problems제가 느꼈던 기존 프론트엔드 프로젝트들의 문제점은... 한 문장으로 요약이 가능합니다.→ 어느 순간부터, 프로젝트를 유지보수하기가 지나치게 어려워진다는 것!시간이 지날수록 제품의 유지보수가 어려워지는 이유는 무엇일까요? 자동화 테스트의 부재간단합니다. 기존 코드를 수정했을 때 애플리케이션이 정상 동작하는지 보장할 수 없기 때문이죠! 코드 수정으로 인해 기존 동작에 오류가 발생했다는 사실을,코드를 작성한 뒤 1초 만에 알 수 있다면 어떨까요?코드를 변경하고 새로운 기능을 추가하는 일이 그리 어렵지만은 않을 .. 2024. 6. 12. [jest] mock.calls를 통한 mock 함수 실행 테스트 개선하기 Backgrounds주입한 모듈 메서드의 실행 여부를 테스트해야 할 때가 있습니다.주로 실제 구현은 사용처에서 이뤄지고, 단위 테스트에서는 인터페이스에만 의존하는 모듈을 테스트할 때 발생하죠. 예를 들어 주문을 생성하고, 알람을 띄우는 함수를 테스트할 수 있습니다.// makeOrder.test.tsimport makeOrder from './makeOrder.ts'describe('주문 생성 use case 테스트', () => { it('주문 생성 시, 해당 제품의 주문 완료 알람이 뜬다', () => { })} 해당 함수는 다음과 같이 구현할 수 있습니다.// makeOrder.tsconst makeOrder = (product:Product, notification:NotifyServic.. 2024. 6. 4. [jest] spyOn 사용 시 Cannot redefine property 에러 해결하기 Backgoundsjest를 사용해 unit test를 작성하고 있습니다. 테스트 대상 모듈이 올바르게 동작하는지를 확인하기 위해해당 모듈이 내부적으로 의존하고 있는, 다른 모듈의 반환값을 테스트 구문에서 제어할 필요가 있었습니다.→ jest의 spyOn API를 사용해 구현할 수 있습니다. https://jestjs.io/docs/jest-object#jestspyonobject-methodname The Jest Object · JestThe jest object is automatically in scope within every test file. The methods in the jest object help create mocks and let you control Jest's overall .. 2024. 5. 30. [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. 이전 1 2 3 4 5 6 다음 728x90 반응형
