소개 htmx는 기존 js 의 ajax 호출 동작 이후 화면 갱신을 하는 구현 패턴와 달리, html 마크업 레벨에서 이를 지원하여 화면을 구성하는 구조를 가지는 프론트엔드 웹 프레임워크 이다. html의 attribute 을 활용하여, html에서 직접 ajax, css transitions, websocket, sever send event 등을 컨트롤 한다. 추가적인 특징 htmx 프레임웍 크기는 (~14k min.gz’d) 정도로 작다. dependency-free 이다. (응용하기에 따라 다른 frontend fw와 함께 사용이 자유롭다, node.js에서도 사용가능) 확장 가능한 구조를 가진다. (extendable) 동일 기능 구현시 js가 줄기 때문에 코드 사이즈를 줄여준다. (67% when compared with react) 0BSD(Zero-Clause BSD) 라이선스 로 자유롭게 사용 가능하다. 현재(2024.07.18)기준 가장 최신 버전 - v2.0.1…

소개 es2023(es14) 가 2023년 6월 확정되었다 (이후는 es2024(es15)의 진행이다), 관련하여, es2023(es14)의 신규 feature들을 알아본다. 신규 Feature들은 어디서 알아보나? 공식 proposals 문서를 통하여 어떤 기능들이 추가되었나 살펴볼 수 있다. Array find from last, Array by copy es2023(es14) - https://github.com/tc39/proposal-array-find-from-last es2023(es14) - https://github.com/tc39/proposal-change-array-by-copy 신규 기능 proposal의 이유들 기존 배열 탐색 함수()는 앞에서 붙어 찾기 때문에, 맨뒤에 값이 있는 경우, 성능 문제가 있다. 이를 해결하기위해 을 사용하는경우, 원본 배열이 변경되는 side-effect가 있다. 원본 배열이 변경되어도, react에서는 배열 자체가 동일객…

docker multi stage, multiple from 구문 활용하기 single dockerfile을 사용하여 여러가지 환경을 구축하고 있다가, Multi-stage builds in Docker 라고하는 기법을 알게 되었습니다. 이를 활용하여 다단계 형태의 dockerfile 의 활용을 통하여, 좀더 compact한 dockerfile관리 및 사용을 적용하였습니다. Multi-stage builds in Docker 링크의 경우, 빌드 스텝과, 빌드 결과를 사용(활용) 하는 것을 docker의 multiple from 구문을 활용하여 작성한 예시를 보여줍니다. 필자의 경우 이런 형태는 아니고, docker로 만드는 최종 목적이, 기본적인 프로젝트 구동 환경(node, python, nvm)이었는데, 해당 환경을 어떻게 docker multiple from 을 통하여 수정하였는지 예시를 들어 보겠습니다. 들어가기 전에 가장 핵심이 되는 요소를 들어가기 전에 이야기 하겠습니…

github action 찍먹하기 github action 소개 최근 간략한 신규 프로젝트를 진행하면서, 별도의 CI/CD 대신 github action을 통해서 CI/CD 의 기능을 구현해보았는데, 생각보다 편리하고 쓸만하여, github action에 대하여 찍먹하기 정리를 해보았습니다. github action 이란? github 에서 제공하는 workflow feature입니다. github의 공식 홈페이지에서 이를 통하여 결국 CI/CD 의 기능을 할 수 있다고 소개하고 있습니다. 사실 CI/CD 라고 했을때 Jenkins, Travis CI, CirCleCI 등등 와 같은 여러 툴들이 이미 존재하고, 이미 수많은 프로젝트에서 해당 툴들을 사용하고 있습니다. 결론부터 이야기 하자면, 이미 만들어진 바퀴를 또 발명할 필요가 없듯, 이미 잘 사용하고 있고, 탄탄하게 구축된 CI/CD 가 있다면, 굳이 github action을 쓰지 않아도 됩니다. 하지만 신규 프로젝트이고 …

소개 bun(bunjs, bun.sh) v0.3.0 릴리즈 2022-07 베타 이후 4개월 만에 v0.3.0이 릴리즈 되었네요. 4개월전에 보고 12월(연말) 이여서 진행되는거 있나? 하고 보았더니, 최근에 v0.3.0 이 릴리즈 되었습니다. 정확하게는 2022-12-07 릴리즈 문서가 작성된거 같습니다. bunjs의 릴리즈 글을 보고 내용을 작성했습니다. bun 소개는 이전 소개글을 참고하세요. 주요 변경 사항 출처: https://bun.sh/v0.3.0.png Bun은 기존 철학과 마찬가지로, 최상위 우선순위로, 안정성과 호환성(node.js 와 web 양쪽 api) 위주로 업데이트가 진행되고 있다고 합니다. 그중에서도 이번 0.3.0 에서는 메모리 사용을 많이 줄였는데, 메모리 사용양을 줄인 부분을 크게 강조하고 있습니다. 실제 node.js 서버 대신 deno서버 구현하여 서비스 사용하고 있는 부분이 있는데, 실제로도 node보다 deno가 메모리를 많이 먹습니다. Bu…

소개 마블 영화에 나오는 인피니티 스톤이 떠오르는 이름을 가진 테서렉트(tesseract.js)라는 라이브러리를 소개합니다. 해당 라이브러리는 자바스크립트 라이브러리 인데, OCR(Optical Character Recognition) 역할을 하는 라이브러리 입니다. 즉 사람이 쓴 문자(글씨)를 인식하여 text 데이터로 추출하는 라이브러리 입니다. 이러한 OCR기능을 사용하는 부분은 이미 실제 서비스에서 많이 활용되고 있습니다. “클로버 램프”: 책을 램프 아래 두면 자동으로 해당 책의 글씨를 인식하여 읽어줍니다. “영수증 리뷰”: 영수증을 사진으로 찍어서 올리면, 자동으로 글씨를 인식하여, 방문한 업체의 이름, 주소, 전화번호 등을 자동으로 기록해주고 해당 업체를 리뷰하게 해줍니다. 이와 같은 OCR기능을 Javascript 라이브러리 형태로 제공하는게 tesseract.js 입니다. tesseract.js는 아래와 같은 기능을 제공합니다. 이미지 인식 출처: https://g…

소개 최근 javascript생태계에서, 매우 hot 하다는 Bun 이라는 기술?을 간략하게 살펴봅니다. 현재 2022-08-15 기준으로 나온지 얼마 안되었습니다. Bun은 2022년 7월 초에 베타로 처음 공개되었다고 합니다. 정확한 발표일을 찾지 못하였는데, 2022.07 이전에 웹상에 블로그글 등이 없는것으로 보아 맞는듯 합니다. 해외 블로그 등에서 나름 hot하게 다루어지는거 같습니다. 2022-08-15 기준 - Bun v0.1.8 인 상태에서 작성하여, 이후 버전에서는 내용이 본 글과 다를 수 있습니다. Bun이란? Bun은 매우 빠른 자바스크립트 런타입(Javascript Runtim) 입니다. 추가로 Javascript runtime만 제공하는게 아니라. 번들러(Bundle), 트랜스파일러(transpile), 패키지 매니저, Typescript기본제공 등과 같은 여러 부가기능을 기본제공합니다. Bun에서는 이를 all-in-one javascript runtim…

소개 gatsby에서 stie의 RSS feed을 생성하는 방법을 소개합니다. 방법 gatsby는 기본적으로 plugin구조를 가지고 있어 여러 기능을 추가 할 수 있습니다. RSS Feed을 추가하는 기능 역시 plugin으로 존재합니다. gatsby 공식 사이트에서 로 plugin을 검색해보면 여러 RSS Feed plugin이 존재하는것을 볼 수 있습니다. 각 plugin은 각각의 설정 방법을 따라서 설치 및 RSS Reed을 생성해야 합니다. 본 소개에서는, 사용자 커스텀 plugin(community plugin)이 아닌, gatsby공식 plugin인 을 사용하여 rss을 생성하는 방법을 설명합니다. gatsby-plugin-feed 설치 npm 이나 yarn 을 사용하여 plugin을 설치합니다. 또는 gatsby-plugin-feed 설정 plugin을 설치 후 gatsby-config.js 파일 및 gatsby-node.js파일에 gatsby-plugin-fee…

소개 web에서 cache는 좀더 포괄적인 의미인데, 혼용하여 쓰거나, 정확하게 이해하고 사용하지 않는 부분이 존재한다. 따라서 http(web) cache 개념을 대략적으로 이해하지 말고, 정확하게 이해해보기 위한 글이다. Web Cache란? web site을 사용할때 발생하는 cache의 종류 이다. web 을 사용할때, 웹 서버에서 웹페이지, 이미지, 멀티미디어 리소스등의 웹 정보들을 전달해준다. 이러한 정보를 저장하여, 웹 서버를 매번 사용하지 않고, cache을 사용하여, 응답시간 및 네트웍 비용을 줄이고, 성능을 향상시킨다. Web Cache의 종류 web을 사용할때, server, client로 사용자(consumer), 제공자(provider)로 사용의 주체가 나뉘고, network 및 tool(browser)관점에서는, browser, proxy, gw, dns, cdn 등으로, 제공 주체(tool)이 나뉜다. 또한 최종 컨텐츠(page, site 등등)도 나뉠…

왜 바꾸었나요! 기존에 잘 구동되던, Jekyll 로 만들어진 블로그를 Gatsby 로 마이그레이션 하였습니다. 여러가지 이유가 있지만, 현재 주력으로 사용하고 있는 javascript fw인 react로 되어있다는 점과, build가 기존 Jekyll보다 빠르다는 소문? 을 듣고 변경을 결심하게 되었습니다. Gatsby 설치하고 Local에서 띄워보기 공식 사이트의 튜토리얼을 참고하여, 직접 사이트를 구축하고 띄워는 방법도 있습니다. 하지만 바퀴를 새로 발명하지 않아도 바퀴가 이미 존재하듯이, 이미 만들어져 있는 여러 블로그 테마중 하나를 사용하여 띄워 보겠습니다. 공식 사이트 참고(https://www.gatsbyjs.com/docs/how-to/) Gatsby는 Jekyll와 마찬가지로 이미 생성된 여러가지 Theme(Gatsby Starter Lib)을 지원합니다. 사실 블로그가 아닌 static page을 쉽게 생성해주는 framework이기 때문에, 여러 종류(e.g. …

소개 python을 html에서 구동하게 해주는, PyScript에 대하여 간략하게 알아봅니다. PyScript 란? python을 html에서 그대로 구동하게 하는것, 즉 javascript처럼 구동 가능하다. PyCon US (2022-04-27 ~ 2022-05-03) 에서, 발표(alpha 버전)되었다. 현재(2022-06) 발표된 버전(alpha)이고, 공식 페이지에서도 상업용 사이트에서의 사용은 주의하라고 되어 있다. hello world ref: https://github.com/pyscript/pyscript/blob/main/examples/hello_world.html 위 코드를 생성하여 실제 구동해보면, javascripg처럼 실제 구동되어서 화면에 날자가 프린트 되는걸 확인 할 수 있다. 코드를 분석해보면, 로드하고 있음을 알 수 있다. 해당 파일이 을 구동하게 해준다. PyScript simple architecture pyscript가 나오게된 배경 j…

소개 보통 javascript 프로젝트 개발시에, 일반적으로 next.js와 같은 통합 개발 환경을 사용하거나, 직접 개발 환경을 구축 하더라도, webpack-dev-server의 hot 옵션정도를 사용하여서 개발을 하게 된다. 따라서 이렇게 개발하는 경우 기본적으로 개발 환경이 HMR을 지원하고 있어서, 별도의 HMR에 대한 요구 사항을 느끼거나 하지는 않게 된다. 하지만 HMR의 동작 원리나 internal구조를 알고 싶거나, 특이한 형태의 HMR을 구축해야 하는경우, 혹은 직접 개발환경을 구축해서 만드는 경우, HMR에 대하여 좀더 명확하게 알고 사용 하는것이 좋다. 이러한 경우를 위해서 본 문서를 작성하였다. 목표는 다음과 같다. Hot Module Replacement라고 불리는 HMR의 기본적인 개념을 이해한다. Webpack의 Incremental 빌드를 이해한다. 전체적인 HMR의 동작 구조를 이해한다. Hot-Reloading 일단. HMR을 들어가기 앞서서, 이…

덕 타이핑(Duck Typing) 이란? 사실상 위의 정의가 Duck Typing의 알파이지 오메가 이다. (핵심 내용을 담고 있다) Duck Typing의 개념은 Duck Test에서 유래하였다. Duck Typing은, **컴퓨터 프로그래밍 개념(패턴, 방법)**이다. 컴퓨터 프로그래밍 언어에서 Type을 추론, (혹은 유추, 정의) 할때 사용된다. 예제 위 코드를 보면 ”어떤 타입에 걸맞은 변수와 메소드를 지니면 객체를 해당 타입에 속하는 것으로 간주” 하고 있다. 이처럼 구조가 같으면 같은 타입으로 간주하는 방식을 Structural Typing, Java/C# 등과 같이 이름을 기준으로 타입을 나누는 방식을 Nominal Typing이라 한다. 참고 https://en.wikipedia.org/wiki/Duck_test https://en.wikipedia.org/wiki/Duck_typing https://ko.wikipedia.org/wiki/덕_타이핑 추천 - h…

소개 web환경에서 resource의 용량은 성능에 매우 큰 영향을 준다. 따라서 여러가지 기법을 이용해서 이를 해결하게 된다. 이런 기법에는 splite image사용, resource cache, device rosolution에 따른 resource 서빙, image crop, image reszie 등등이 있다. 실제 매우 많은 사람이 사용하는 포털 서비스에서도 이러한 기법을 사용한다. 실제 포털에서의 예(다음카카오) 실제 서비스되는 이미지의 용량: 12.4kB 주소: https://search1.daumcdn.net/thumb/C200x278.fwebp.q85/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2F3jtQ%2Fimage%2FCXQeP3cgNqaOGX9_Dx7a9mlt41U.png 주소를 잘 보면 여러 정보를 볼 수 있다 크기로 crop quality: 85% 원본 이미지 주소: http://t1.…

소개 javascript의 module system의 탄생 배경(히스토리)을 알아보고, 이어서 현재 대표적인 javascript module system인 cjs, amd, umd, esm에 대해서 간략하게 알아본다. 배경 초창기 javascript는 module의 기능 or 개념이 없었고, javascript의 구동환경 역시 browser로 고정되어 있었습니다. 따라서 이당시에서는 하나의 (js)파일로 모든 기능을 제공하거나, 태그의 순차 로딩과, window(global)객체를 활용하여 모듈을 흉내(IIFE의 module pattern)내거나 기능을 분리하여 제공하였습니다. javascript생태계가 발전함에 따라서, Javascript을 범용적으로 사용하려는 요구사항들이 발생하게 되었고, 이런 요구사항에 따라서 javascript에서의 module 기능의 필요성이 대두되게 되었습니다. 이러한 필요성에 의해서 탄생한 것이 javascipt module 시스템의, 양대산맥격인 c…

문제점 pm2의 2.7.0 버전에서, multiple instance사용시, 첫번째 instance만 roate되는 문제 위 그림을 보면 로 4개의 로그가 instance마다 각각 생성되는데, logroate는 (첫번째 instance의 log)만 되는 문제가 있음을 알 수 있다. 이미 공식 이슈로 이슈업 되어 있다. 관련이슈: https://github.com/keymetrics/pm2-logrotate/issues/143 해결 방법 요약 위 두가지 방법중 하나를 사용하여 해결 가능하다. pm2에서 multiple instance를 사용해도 Log는 하나로 합치기 pm2.config.js 파일에 아래와 같이 을 추가한다. pm2-logroate conf설정 방법 추가로 아래와 같이, pm2-logroate 설정도 가능하다. pm2-logrotate:compress, logroate된 파일을 압축(gzip) 한다. pm2-logrotate:retain, rotation된 파일은…

소개 Node.js 환경에서 https설정하는 방법을 설명한다. 현재 은 이미 ,  가 존재한다. 다만 해당 파일이 파일로 되어있고, 현재는 의 https의 설정용으로 되어 있다. 또한 현재 nginx용 ssl은 을 받게 되어 있다. 따라서, node에서 해당 ssl(cert, key)을 바로 사용하는 경우 에러가 발생한다. 현재 이미 있는 nginx용 ssl을 node.js(webpack-dev-server)에서 사용하는 방법을 설명한다. Node.js 에서 https설정하기 정상적인 ssl(cert, key)가 존재하는 경우 아래와 같은 코드로 https설정이 가능하다. 공식Doc - https://nodejs.org/api/https.html Node의 공식 문서에서 알 수 있는 사실 확장자가 , , , 을 다 지원 가능 ca을 넣지 않아도 무방 pass을 넣는 부분은 없음 Express에서 https설정하기 가장 기본이 되는 Node의 설정과 거의 동일하다. 는 내부적으로 …

소개 node application에서 흔하게 사용하는 enviroment 변수의 사용에 대해서 간략히 알아봅니다. enviroment 개념 어떤 process환경에서 접근 가능한 변수(key-value)를 의미 합니다. unix 환경을 사용하고 있다면 간단히 다음 명령어로 현재 shell의 환경 변수를 알 수 있습니다. window의 환경에서 JAVA_HOME등을 위해서 설정하는 환경변수등이 이러 변수의 대표적인 예 입니다. 주의해야 할 부분은 환경변수가 ‘어떤 process환경’ 에서 접근 가능한 변수라는 부분 입니다. 위의 printenv로 확인 가능한 환경변수는 해당 shell(terminal) process 환경에서 접근 가능한 환경 변수를 보여줍니다. 만약 사용자가 어떤 ‘node application’을 구동한 경우, node 프로그램상에서 process.env[key] 로 접근하는 환경변수는, 해당 node process 환경에서 접근 가능한 변수 입니다. 이는 해당…

소개 git hook 의 개념과 사용법에 대하여 소개합니다. Git Hook Git도 다른 버전 관리 시스템처럼 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있습니다. Git 에서는 이를 hook 으로 제공하고 있습니다. 내부적으로 client hook과 server hook으로 구분됩니다. git hook 설치 및 사용 git hook의 설치 위치는 기본적으로 입니다. 이 디렉토리에 가보면 Git이 자동으로 넣어준 매우 유용한 스크립트 sample이 몇 개 있습니다. 그리고 스크립트가 입력받는 값이 어떤 값인지 파일 안에 자세히 설명되어 있습니다. 기본적으로 모든 예제는 Shell 또는 Perl 스크립트로 작성돼 있지만 실행할 수만 있으면 되고 node, ruby, python같은 익숙한 언어로 만들어도 됩니다. 실행할 수 있는 스크립트 파일을 확장자 없이 저장소의  디렉토리에 넣으면 훅 스크립트 활성화 됩니다. 다음에서 대표적인 hook을 몇개 살펴보겠습…

소개 javascript의 logger의 개념과 사용을 간략하게 소개합니다. 개념설명 javascript 개발 환경에서 특히 client개발을 하는경우 console.log을 보통 사용하기 때문에, 다른 언어나 framework에서 사용하는 별도의 logger을 도입하는 경우가 많지는 않습니다. 하지만 node와 같은 서버에서는 logger를 도입해서 사용하는것이 좀더 효율적으로 server log을 관리 할 수 있다고 생각됩니다. logger을 도입하면 아래와 같은 이점이 있습니다. Log을 Level별로 관리 할 수 있습니다. Log을 file or stdout형태로 관리 할 수 있습니다. Log format을 각 프로젝트에 맞게 custtomize할 수 있습니다. Log을 빌드 시점 or Runtime에 on/off 할 수 있습니다. Log Level 로그 레벨이 javascipt에서는 표준처럼 정해진 부분은 없습니다. 다만 unix system의 syslog의 RFC5424…

react + typescript에서 svg import로 사용하기 scss처럼 svg을 react module처럼 쓰기 위해서는 아래와 같은 처리 필요 a. 우리는 typescript이기 때문에 최초 typescript(tsc)가 알아먹도록 type정의 추가 필요 b. type스크립트 이후 react가 component형태로 알아먹게 하기 위해서,  와,  필요 c. 이제 각 webpack의 rule에 아래와 같이 svg 모듈 처리 추가 필요 d. 일반적인 프로젝트에서는 위 설정적용으로 완료인데, storybook은 그래도 에러 발생, 이유는 - storybook의 내장 webpack설정에 svg파일은 file-loader로 rule이 정의되어 있음. 해당 부분을 storybook webpack hook(config hook)으로 덮어 써야함 e. 사용 참고: https://stackoverflow.com/questions/54121536/typescript-module-svg-…

소개 webpack의 기본 개념과, webpack config을 구성하는 요소들을에 대한 개념을 이해합니다. 이를 통하여 직접 webpack 빌드 구조를 구현하거나, 이미 구현된 webpack 빌드를 이해할 수 있도록 합니다. Webpack 의 기본 개념 what is webpack? 참고: webpack은 최신 javascript application을 위한 module bundler 입니다. webpack은 내부적으로dependency graph 을 각각의 모듈별로 생성하고, 해당 정보를 이용하여 최종적으로 한개 또는 여러개의 bundle을 생성합니다. webpack은 node 프로그램입니다. 이는 webpack이 javascript로 구현되어 있고, 실질적으로는 node app.js을 수행하듯, node webpack.js 형태로 수행된다는 것을 의미합니다. 실제 webpack의 code을 살펴보면 shebang 형태로 webpack entry point가 구성되어 있음을 …

소개 shebang에 대하여 개념 및 실제 사용법에 대해서 간략하게 알아봅니다. 참고: https://en.wikipedia.org/wiki/Shebang_(Unix) 개념설명 unix 계열의 명령어나 스크립트 파일을 실제 코드로 살펴보면 ’#!’ 로 시작되는 코드를 볼 수 있습니다. 이를 영어로 shebang이라 표현하고 쉬뱅 정도로 발음하면 됩니다. sharp(#) + bang(!) 에서 유래되었다고 합니다. ’#!‘은 2Byte의 매직넘버(magic number)로 이 스크립트를 실행시켜줄 프로그램의 경로를 지정하는 역활을 합니다. 보통 unix시스템에서 /bin 하위에 해당 명령어들이 존재하지만, 정확하게 해당 path에 존재하지 않는 경우도 많습니다. 따라서 이러한 경우, env를 지정하여, 각 환경에 env에 정의된 path을 참조하게 할 수 있습니다. 대체로 다양한 환경을 지원하는게 좋기 때문에 ‘env’형태로 shebang을 구성하는게 추천됩니다. 실제 사용법 실제…

소개 기본적인 SSR(Server Side Rendering)의 개념 이해 및 React의 SSR에 대해서 살펴보고, React에서 좀더 심화된 형태의 SSR을 지원하는 방법에 대해서 알아봅니다. 이를 통해서 직접 React SSR을 구성하거나, 이미 구성된 React SSR의 구조 및 코드 파악을 할 수 있게 합니다. SSR 의 기본 개념 기본적으로 SSR은 서버 연산을 통해서 Page(HTML)을 만들고, 해당 Page을 응답(response)하여서 그리는 형태입니다. 사실 static한 html을 응답하여서 화면이 그려지는 page는 SSR을 하였다고 봐도 크게 다르지 않습니다. 쉽게 이해하자면, React나 Vue등을 사용하여 Render하는 경우를 떠올리면 됩니다. 이 경우 아래와 같이 Render를 호출하여 그리게 되는데, 위 그림과 같이 사용자가 실제 화면(Content)을 보기까지 SSR에 비해서 시간이 좀 더 걸리게 됩니다. 보통 SSR의 장단점은 아래와 같습니…

소개 polyfill 와 transform을 이용하여 브라우저 하위환을 맞추는 방법에 대해서 간략하게 설명합니다. 브라우저 하위호환? javascript 언어가 발전하고, 해당 언어가 구동되는 browser역시 발전하면서, 최신 javascript언어의 문법이 old 브라우저에서는 구동 안되는 문제가 발생하게 되었습니다. 이를 해결하여, 최신 javascript언어 & 문법을 사용해도, old 브라우저에서 구동되게 하는것이 브라우저 하위호환 입니다. old 브라우저에서 지원하지 않는 javascript사용시 아래와 같이 구문에러가 발생하게 됩니다. 하위호환을 하는 방법 결론적으로 보면, old 브라우저에서 구동 가능한 형태로, 현재 구현되어있는 javascript을 변경(transform)해 주거나, 미지원 내장 함수에 대해서 javascript level에서 해당 함수를 직접 구현하여 넣어주는 형태(polyfill)로 가능합니다. 이밖에 실제 코드가 구동되는 run-time에…

소개 node project을 진행중에 폴더 구조 변경 이후 아래와 같이 “breakpoint ignored” 가 발생하면서, 코드 디버깅을 IDE(vscode, intellij, 등)에서 하지 못하는 문제가 발생하였다. 하여 해당 문제의 발생 원인 및 해결 방법에 대해서 간략하게 설명한다. 원인 해당 문제가 발생하는 이유는 ts이건 js이건 빌드 이후 생성한 debug용 “*.map” 파일에 기록되어 있는, 원본(original) 코드 위치 및 loader위치가, 실제 해당 프로젝트의 원본 코드(original code)의 위치가 맞지 않아서 발생하는 문제이다. 해당 문제가 발생했을때, 상황을 좀더 빠르게 확인하려면, dubug용 빌드시 명확하게 path가 보이는 옵션으로 빌드하여 “*.map” 파일을 열어서 확인해보는게 좋다. 문제가 발생하는 경우 예제 원본 소스 위치: /packages/pr-server/src/routes/ping.route.ts 디버그 map파일에 기록…

소개 svg, canvas, 일반 DOM이 섞여 있는 Web Page을 브라우저에서 screenshot을 생성하기 위한 web tech tip에 대해서 이야기 합니다. Web에서 스크린샷 생성하는 Lib html2canvas doc: https://html2canvas.hertzen.com/ git: https://github.com/niklasvh/html2canvas/ web에서 screenshot을 생성하는 대표적인 lib가 존재합니다. 해당 lib는 screenshot을 생성하기 위한 타겟 dom을 canvas에 draw하여서 screenshot을 생성합니다. 보통 일반적인 web page의 경우 큰 문제 없이 구동되지만, 복잡한 구조의 page인 경우, 특히 IE에서 아래와 같은 문제가 발생 할 수 있습니다. html2canvas의 문제 svg: svg → canvas로 draw할때, SecurityError가 발생하여, svg가 그려지지 않음 ref: https://ht…

소개 약간 시대에 뒤떨어지는 UI/UX & 사용법으로, 사용자들이 많이 이탈하였지만, 아직도 Top20 등으로 CI/CD Tool검색시 항상 포함되는 정통의 강자가 Jenkins 이다. 여기서는, Jenkins의 Abort(Cancel) action에 대한 후처리(post control or after control)를 별도의 plugin설치 없이 simple하게 하는 방법에 대하여 설명한다. why needed? 현재 프로젝트에서, 서버로 API를 쏘는 CLI을 사용중인데, Jenkins에서 Cancel하여도, 실제 Build or Deploy동작은 Cancel되지 않는 문제가 있음. 해결방법으로, Jenkins에서 Cancel하면, 해당 동작을 감지하여 서버에 Cancel API을 호출하여 실제 Build or Deploy동작을 Cancel처리 하고자 함. pre required knowledge Jenkins 관련 Jenkins Basic open source: https:/…