Nuxt3의 nitro가 Cloudflare Pages Functions에서 GET 메소드 이외의 처리를 하지 않은 크나큰 충격으로 Vercel을 손절하고 갈아탄 Remix도 역시 나사가 몇가지씩 빠져있었습니다. Vue Svelte Astro Nuxt2 Nuxt3 Sveltekit 등 다양한 Reactive Framework를 사용해왔지만, React는 JSX 문법이 싫어서 항상 꺼려왔는데 대부분의 프레임워크가 Vercel이 관여하고 있어서 결국 Remix로 돔황쳤습니다. Nuxt3와 Astro의 강제 주입식 문법으로 인해서 React의 함수들이 어색하진 않았는데 리믹스의 문제점은 크게 2가지가 나타났습니다. - 뒤로가기 캐싱 안됨. 일부러 그런건지는 모르겠지만 이전페이지 데이터를 다시 불러옵니다. 이럴..

Go언어 에서 많은 ORM이 있지만, 여러가지 써보아도 결국 GORM으로 회귀하게 됩니다. 매우 많은 기능과 이미 많이 쌓인 커뮤니티 그리고 사용이 쉽기 때문이죠. 그런데 제약사항 설정 중 on delete CASCADE를 설정한다던가 SET NULL 을 넣는다 등을 Auto Migrate 과정에서 진행하고 싶을 수 도 있습니다. 당연히 ORM 코드상에서 명시하여 DB에 자동설정이 되어야 orm을 쓰는 의미가 있기도 하구요. Node.js의 대부분 ORM들은 물리적 db에 이과정을 진행하지 않는 경우가 많긴 하지만요. 하지만 foreignKey에 constraint를 넣어도 물리 DB상에서는 constraint로 on delete on update가 적용되지 않는 현상이 있습니다. 이럴 경우 GORM에서..

Alpine.js Alpine.js는 MarkUp(HTML) Template에 작성하여 Reactivity (재활동)이 가능하게끔 하여, Vue 스러운 문법으로 가장 이상적이면서 간단하고 간결하고 쉬운 라이브러리입니다. Gzip 압축 기준 무려 8KB 밖에 안되는 적은 용량으로 굉장히 강력한 기능들을 가지고 있습니다. state Management (상태관리) global Store (페이지내 전역 상태 관리) Data / Binding (데이터 바인딩 및 액션) teleport 이외에도 다양한 기능이 있으며, Vue의 문법과 유사하게 x- 라는 prefix 를 사용합니다. x-if, x-for, x-teleport 등등 그런데 아쉽게도 x-if는 존재하지만 else나 else-if는 존재하지 않습니다...

https://astro.build/ Astro Build fast websites, faster. Astro is a new kind of static site builder for the modern web. Powerful developer experience meets lightweight output. astro.build Astro.js 는 SSG (Static Site Generator) Framework로 근래 대중화된 React.js Vue.js Svelte.js 등을 함께 사용할 수 있는 특이한 프레임워크 입니다. 가장 큰 특징은 함께 사용할 수 있으며, SSR서버로도 이용은 가능합니다. 또 강력한 점은, React, Next, Vue, Next, Svelte, Sveltekit을 사용..

svg 포맷을 이용한 이미지 파일의 색상을 변경하는 것에 대해 검색을 해보면 대부분이 svg 파일을 html에 작성해서 fill 또는 CSS를 이용해서 색상을 변경하라는 내용을 볼 수 있습니다. 하지만 그렇게 비효율적인 방법이라면 mdi같이 svg 포맷을 폰트로 만들어서 사용했을 듯 합니다. SVG 파일의 색상을 HTML 작성 없이 CSS만으로 변경하는 것은 의외로 매우 간단합니다. .svg-test { background-color: #eeeeee; -webkit-mask: url('image.svg') no-repeat center; mask: url('image.svg') no-repeat center; } 이런식으로 mask를 이용해서 image를 불러오고 background 색상을 변경 작업해주..

『JavaScript 두 걸음』- JavaScript란? 이번 게시글은 MDN의 '웹 페이지에 JavaScript를 어떻게 넣나요?' 게시글을 탐구합니다. 자바스크립트를 사용하기 위해서는 크게 2가지 방식이 존재합니다. HTML 파일 내부의 자바스크립트 선언 및 호출 HTML 파일 외부의 자바스크립트 호출 HTML 파일 내부에서 자바스크립트 사용 See the Pen by GM Yankee (@GMyankee) on CodePen. html 내부에서는 위처럼 html 영역에서 ``를 이용해서 감싸고 사용합니다. body 내부에서 작성하여도 동작하지만, head에 작성하는 경우를 많이 볼 수 있습니다. head에 작성하는 이유는 주로 브라우저가 콘텐츠를 그려내기 전에 미리 호출하여 파일을 불러옵니다. 하지..