개요사내 프로젝트를 진행하던 와중, 한 개발자 분이 Higher Order Component(이하 HOC) 패턴으로 어떤 컴포넌트를 작성했습니다.React Query를 기반으로 데이터 fetching 과 함께 prop drilling으로 response를 조작하여 전달하는 컴포넌트였는데, 동작에서는 사실상 문제는 없었지만 HOC 패턴은 현대 React 코드에서는 잘 사용하지 않는 패턴입니다.이는 React 공식 문서에서도 명시하고 있는 부분입니다.어떤 디자인 패턴이 왜 나왔는지, 어떤 경우에 사용하는지에 대해서 정확히 인지한다는 것은 단순히 기술을 알고 적용하는 것에 비해서 훨씬 깊은 생각과 경험을 제공하는 것 같습니다.React 생태계에서 HOC 패턴은 컴포넌트 로직을 재사용하기 위한 강력한 디자인 패..

개요airbnb 가이드 스타일로 eslint를 셋업하고 Next.js page 구성 요소를 구현하기 위해 화살표 함수를 사용하니 eslint 에러가 발생했습니다.const HomePage: NextPage = () => ( HomePage ); 크리티컬한 이슈 내용은 아니지만 소소하게 정리하려 합니다.function-component-definitionairbnb는 이름 추론을 이유로 화살표 함수보다 함수 선언을 선호한다. 어떤 내용인지 보겠습니다.const add = (a, b) => a + b; 여기서는 함수의 이름이 없습니다.함수를 정의하는 것과 동시에 add 라는 변수에 할당되었습니다.화살표 함수는 보통 익명 함수로 사용되며, 변수에 할당된 이름을 통해 호출됩니다.function sub..

개요현재 사내 프로젝트를 개발하는데 특정 시나리오에서 과도한 메모리 점유율로 성능 저하가 발생하고 있습니다.해당 시나리오에 대해 성능 프로파일링을 진행한 결과 프로젝트에서 사용하고 있는 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/documents/..

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

검색 엔진 최적화를 위해 sitemap xml 파일이 필요하여 로직을 구상하였습니다. XML 파일은 수동으로 작성해도 되고 generator 사이트도 있어서 프로젝트 폴더에 넣어주기만 하면 되지만,동적 라우팅을 사용하는 경우는 수동으로 작성하기에는 한계가 있을 것입니다. 현재 저에게 필요한건 메인 페이지와 트렌드 페이지, 동적 경로를 사용하는 post/[id] 단 세 개의 경우입니다. // sitemap.xml.jsimport client from "@libs/server/client";const generateSitemap = (data, origin) => { let xml = ""; data.pages.map((page) => { xml += ` ${origin + page.loc..

개요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은 상..

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