소개 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을 쓰지 않아도 됩니다. 하지만 신규 프로젝트이고 …