개요 airbnb 가이드 스타일로 eslint를 셋업하고 Next.js page 구성 요소를 구현하기 위해 화살표 함수를 사용하니 eslint 에러가 발생했습니다. const HomePage: NextPage = () => ( HomePage ); 크리티컬한 이슈 내용은 아니지만 소소하게 정리하려 합니다. function-component-definition airbnb는 이름 추론을 이유로 화살표 함수보다 함수 선언을 선호한다. 어떤 내용인지 보겠습니다. const add = (a, b) => a + b; 여기서는 함수의 이름이 없습니다. 함수를 정의하는 것과 동시에 add 라는 변수에 할당되었습니다. 화살표 함수는 보통 익명 함수로 사용되며, 변수에 할당된 이름을 통해 호출됩니다. function s..
개요 HTTP 요청을 보내는 방법은 여러가지가 있습니다. 오래된 비동기 통신 기술인 XMLHttpRequest 부터 최신 웹 표준인 fetch, 브라우저와 Node.js에서 모두 사용할 수 있는 axios 등 다양합니다. 최근 Angular를 사용하고 있음에도 XMLHttpRequest를 사용하는 분을 봤습니다. XMLHttpRequest는 브라우저 네이티브 자바스크립트 객체로, AJAX 기술의 핵심이며 비동기적으로 서버와 통신하는데 사용됩니다. 하지만 오래된 방식의 비동기 통신 기술로, 현재 많은 사람들이 사용하고 있는 HTTP 통신 도구에 비해 사용법이 다소 복잡하고 편의성이 낮아 지양되고 있는 방법입니다. Angular 진영에서는 많은 사람들이 자체적으로 제공하는 모듈인 HttpClient를 사용하..
개요 현재 사내 프로젝트를 개발하는데 특정 시나리오에서 과도한 메모리 점유율로 성능 저하가 발생하고 있습니다. 해당 시나리오에 대해 성능 프로파일링을 진행한 결과 프로젝트에서 사용하고 있는 GoJS 라이브러리가 메모리 누수 원인으로 판된되어 GoJS 에서 발생하는 메모리 누수와 개선 과정에 대해 기술하려 합니다. 성능 크롬 개발자 도구로 위 시나리오에서 진행한 성능 프로파일링 지표를 확인해보았습니다. * 시나리오 순서 GoJS 다이어그램 생성화면 진입 다수 컴포넌트 생성 화면 벗어남 위 과정을 3번 반복하고 퍼포먼스를 측정합니다. JS Heap(파란 그래프)은 자바스크립트에서 동적으로 할당된 객체와 변수들이 저장되는 메모리 영역을 의미합니다. 이 영역은 자바스크립트의 가비지 컬렉터에 의해 관리되며, 사용..
개요 RxJs에서 일반적으로 subscribe를 호출한 후 unsubscribe를 하지 않으면 메모리 누수(memory leak)가 발생합니다. 이는 애플리케이션의 성능 저하와 메모리 부족으로 이어질 수 있으므로 subscribe 이 후 반드시 unsubscribe를 해줘야 합니다. 이런 문제와 관련해서 subscription을 효과적으로 관리하는 방법에 대해 기술하려 합니다. observable의 subscription과 memory leak에 대한 내용은 아래 링크에서 확인할 수 있습니다. Why We Have To Unsubscribe An Observable In An Angular Application? Unsubscribe An Observable: In Angular applications,..
2023 제 12회 스마트테크 코리아에 다녀왔습니다. 28 ~ 30 동안 개최되었고 장소는 코엑스 입니다. 저는 참가 업체 관계자로 다녀왔기 때문에 3일 전부 참여 예정이었으나 예비군 일정 때문에 29일은 못갔네요. 인공지능과 로봇 기술이 주 내용이나, 200개가 넘는 기업이 참가했기 때문에 위 카테고리에만 국한되지는 않았습니다. 저희 회사도 MSA 기반 클라우드 솔루션으로 참여를 했구요. 사람들이 그렇게 많지는 않다고 느꼈지만 감사하게도 사람들이 꽤 방문해주었습니다. 먼저, 제가 개발하고 있는 TURACO 솔루션에 대해 간략하게 소개해드리면 MSA 개발/운영에 필요한 인프라, CI/CD, 모니터링까지 하나의 솔루션에서 제공하는 서비스입니다. https://turacocloud.com/assets/doc..
개요 사내 프로젝트에서 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": 중첩된 구조 내에서 원하는 값의 마지막 발생을 찾습니다...
검색 엔진 최적화를 위해 sitemap xml 파일이 필요하여 로직을 구상하였습니다. XML 파일은 수동으로 작성해도 되고 generator 사이트도 있어서 프로젝트 폴더에 넣어주기만 하면 되지만, 동적 라우팅을 사용하는 경우는 수동으로 작성하기에는 한계가 있을 것입니다. 현재 저에게 필요한건 메인 페이지와 트렌드 페이지, 동적 경로를 사용하는 post/[id] 단 세 개의 경우입니다. // sitemap.xml.js import client from "@libs/server/client"; const generateSitemap = (data, origin) => { let xml = ""; data.pages.map((page) => { xml += ` ${origin + page.location} ..
개요 CSR, SSR, SSG는 각 장단점을 가지고 있고 용도가 달라서 컨텐츠에 맞게 사용하면 되는 렌더링 기법입니다. 그 중 Next.js의 ISR에 관해 비용적인 측면에서 이야기를 해보려 합니다. 개발자가 설정한 임의의 주기 혹은 시점에 정적 파일을 재생성 한다는 것은, 얼핏 들었을 때 과도한 자원 소모를 야기할 수도 있다는 생각이 들었습니다. 보통 프론트엔드에서 정적 파일은 빌드 타임에 생성되는 것인데, 빌드라는 단어 자체가 무거운 이미지를 연상하게 되는 것 같습니다. 그래서 Next.js의 SSG(ISR)과 SSR의 비용 효율에 대해 공식 문서와 사람들의 포스팅을 보며 나름의 판단을 내려보았습니다. Incremental Static Regeneration? Next.js 는 사이트를 구축한 후 생..
개요 FLUX 패턴의 대표격인 Redux는 React와는 상관이 없고 바닐라 js에서도 사용할 수 있는 상태 관리 라이브러리지만 40%가 넘는 React 개발자가 사용하고 있습니다. 그럼에도 Redux는 꽤 말이 많습니다. 비동기 처리를 위한 미들웨어 사용과 익숙치 않은 동작원리 라던지, 상태 초기화와 동기화에서 유지관리해야할 코드도 많아집니다. Props Drilling을 최소화 함으로써 복잡도를 낮추는데 의의가 있는 것인데, 오히려 복잡한 구조로 인해 복잡도가 올라갈 수 있고 이것에 대해 지적하는 개발자들이 생기기 시작합니다. 개발자는 장애물이 커지면 돌아갈 길을 모색하는 모양입니다. SWR은 Next.js를 만든 Vercel 팀의 "데이터를 가져오기 위한 React Hooks" 입니다. 사실 SWR..