개요 현재 사내 프로젝트를 개발하는데 특정 시나리오에서 과도한 메모리 점유율로 성능 저하가 발생하고 있습니다. 해당 시나리오에 대해 성능 프로파일링을 진행한 결과 프로젝트에서 사용하고 있는 GoJS 라이브러리가 메모리 누수 원인으로 판된되어 GoJS 에서 발생하는 메모리 누수와 개선 과정에 대해 기술하려 합니다. 성능 크롬 개발자 도구로 위 시나리오에서 진행한 성능 프로파일링 지표를 확인해보았습니다. * 시나리오 순서 GoJS 다이어그램 생성화면 진입 다수 컴포넌트 생성 화면 벗어남 위 과정을 3번 반복하고 퍼포먼스를 측정합니다. JS Heap(파란 그래프)은 자바스크립트에서 동적으로 할당된 객체와 변수들이 저장되는 메모리 영역을 의미합니다. 이 영역은 자바스크립트의 가비지 컬렉터에 의해 관리되며, 사용..

개요 사내 프로젝트에서 MLOps 환경의 모델에 스케줄 잡을 설정하는 부분이 있는데, 여기서 cron 표현식을 사용합니다. UI 상에서 입력된 cron이 어떤 의미인지 해석하여 보여주었으면 좋겠다는 요청이 있었습니다. i18n으로 다국어까지 지원해야 하기 때문에 손수 작업을 할 경우 상당히 까다로운 작업이 될 것 같아 검색을 하던 와중 다국어 지원도 되는 해석 라이브러리를 찾아서 소개해드리려 합니다. cRonstrue cron 해석을 지원하는 자바스크립트 라이브러리입니다. 다양한 언어로 지원이 되며, 사용법이 간단합니다. https://github.com/bradymholt/cRonstrue GitHub - bradymholt/cRonstrue: JavaScript library that translat..

개요 자바스크립트에서 깊이 중첩되어 있는 객체나 배열에서 특정 값을 찾는 것은 꽤 피곤하고 번거로운 작업입니다. 객체를 일일히 탐색할 수도 있고 중첩된 구조를 탐색하기 위해 복잡한 재귀 함수를 작성해야 할 수도 있습니다. 여기서 저는 JSON.stringfy를 활용하여 사용할 수 있는 간단한 Util 함수를 작성해보았습니다. deepfind Javascript /** * @param entireObj 대상 객체 또는 배열 * @param key 찾으려는 value의 key * @param value 찾으려는 value * @param type * * "all": 중첩된 구조 내에서 원하는 값의 모든 발생을 배열로 반환합니다. * * "first": 중첩된 구조 내에서 원하는 값의 마지막 발생을 찾습니다...

개요 프론트엔드 개발자는 서버로 요청을 보내서 응답받은 데이터를 바탕으로 화면을 구성합니다. 이 때, 백 엔드에서 API를 다 만들때 까지 기다릴 수는 없으니 응답 데이터의 형태에 대한 기본적인 정보만 받아서 그걸 토대로 Mock server를 만들어서 가상으로 응답과 요청을 받으면서 개발을 진행해야하는 케이스가 적지 않습니다. mock은 모조품이라는 뜻으로 테스트 할 때도 mock 개념이 많이 쓰이고 있습니다. mock server를 만들 수 있는 방법은 여러가지가 있는데 Postman도 편하지만 더 편한 JSON server라는 패키지를 설치해서 사용해보도록 합시다. 사용 "ZERO CODING" 30초만에 만드는 풀 REST API ! GitHub - typicode/json-server: Get ..