해당 글은 AI 정보들을 모아 보관하는 글입니다.급변하는 기술인만큼 포스팅 시간이 지날수록 잘못된 정보일 수 있습니다.https://jules.google/ Jules - An Asynchronous Coding AgentJules creates a PR of the changes. Approve the PR, merge it to your branch, and publish it on GitHub. Also, you can get caught up fast. Jules creates an audio summary of the changes.jules.google 예전에 OpenAI에서 Codex를 내놓으려 할 당시, 구글에서 먼저 jules를 출시했다.Codex를 써보고 싶었으나, 월 200달러인가 ..

해당 글은 AI 정보들을 모아 보관하는 글입니다.급변하는 기술인만큼 포스팅 시간이 지날수록 잘못된 정보일 수 있습니다. https://stitch.withgoogle.com/ Stitch - Design with AI stitch.withgoogle.com최근에 사이드를 하면서 늘 고민이였던게 UI 디자인이었는데, 그만큼 CSS 프레임워크에도 많이 의존도 하고 UI 컨셉도 생각하기 정말 어려운 부분이긴 했다. AI가 UI 디자인을 해주는게 없나? 생각했지만, 최근에 구글이 Stitch를 내놓으면서 이거다 싶었다. Google Labs에서 새로 내놓은 실험적인 도구. 프롬프트나 이미지를 입력하면 몇 분 안에 UI 디자인과 프런트엔드 코드를 생성해준다고 한다. 그래서 해본 찍먹. 사진에서 보면 알지만 만들어..

코드 비교변경 전: 수동 반복문 (느림)const bytes = new Uint8Array(binaryString.length);for (let i = 0; i 변경 후: Uint8Array.from() (빠름)const bytes = Uint8Array.from(binaryString, char => char.charCodeAt(0));성능 차이가 나는 이유1. 내부 구현 최적화수동 반복문의 처리 과정:JavaScript 인터프리터가 각 반복을 처리매번 조건 확인 (i )개별 인덱스 접근과 할당증가 연산 (i++) 반복Uint8Array.from()의 처리 과정:네이티브 C++ 코드로 구현벡터화된 연산 가능 (SIMD)메모리 접근 패턴 최적화루프 언롤링 자동 적용2. JavaScript 엔진 최적화V..

protobuf를 알아보다가 Uint8Array를 알게되고, 그러다가 TypedArray을 알게 되었다.자바스크립트 쓰면서 타입이 없어 비효율이 많다는 점을 내면속에 알고만 있었는데, 이런 부분을 보완한 Array가 있다고 해서 알아봤다.당연히 이런것들이 존재했을 법 한데, 새삼 이제야 알게된다.TypedArray는 단순히 타입이 있는것 뿐만 아니라 많은 용도들이 있는데 신기해서 가져와 봄. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray TypedArray - JavaScript | MDNTypedArray 객체는 이진 데이터 버퍼에 기초하여 배열과 같은 보기를 만들어냅니다. 하지만 Typed..

https://github.com/protobufjs/protobuf.js/ GitHub - protobufjs/protobuf.js: Protocol Buffers for JavaScript & TypeScript.Protocol Buffers for JavaScript & TypeScript. Contribute to protobufjs/protobuf.js development by creating an account on GitHub.github.com Protocol Buffers란?Google이 개발한 언어 중립적 데이터 직렬화 형식JSON/XML보다 3-10배 빠름더 작은 크기로 데이터 전송성능 중요한 애플리케이션에서 사용.proto 파일 구조package ecommerce; // 네임스페..

Claude Code를 쓰다 보면 토큰 사용량이 궁금한데, 이걸 macOS 메뉴바에서 실시간으로 볼 수 있게 해주는 앱이다. Swift로 만들어진 네이티브 macOS 앱이고, 원래 Python 버전(Claude-Code-Usage-Monitor)을 macOS용으로 포팅한 거라고 한다.주요 기능들실시간 모니터링6초마다 업데이트토큰 사용량을 색깔별로 표시 (초록/노랑/빨강)메뉴바에 사용률 퍼센테이지랑 번레이트 이모지 표시번레이트 추적최근 1시간 기준으로 얼마나 빠르게 토큰을 쓰고 있는지 보여줌이모지로 속도 표시:🐌 100 토큰/분 미만 (여유로움)🚶 100-300 토큰/분 (보통)🏃 300-600 토큰/분 (좀 빠름)🚗 600-1000 토큰/분 (꽤 빠름)✈️ 1000-2000 토큰/분 (빠름)🚀 ..

해당 내용은 포스팅 시각 기준 실험적인 기능입니다. 그래도 좋은 기능이 나와서 포스팅합니다.해당 기능은 MDN에 포스팅 되어 있지만, 크롬에서만 선두적으로 개발해둔 실험적 기능이라 다른 브라우저에서는 지원하지 않습니다.그래도 크롬 기반에서는 쉽게 번역 기능을 구현할 수 있겠네요. https://developer.mozilla.org/en-US/docs/Web/API/Translator Translator - Web APIs | MDNThe Translator interface of the Translator and Language Detector APIs contains all the associated translation functionality, including checking AI model a..

최근에 oh my zsh를 설치하면서, 터미널을 설치하면 위와 같은 아스키 아트가 나온다.우리 회사에서도 flow api 서버에서는 터미널에서 서버를 실행하면 위처럼 아스키 아트가 나온다.그것보고 내가 예전에 LLM 서버에도 적용한적 있었다. 간단간단하게 만들었는데, 도커 터미널에서 보니 뭔가 깨지는 느낌이 들어서 아쉽다.AWS 서버에서 보면 예쁘게 잘 나온다. 그래서 많은곳의 터미널이 예뻐지고 힙해지길 바라며, 이 아스키 아트를 만들 수 있는 사이트를 공유해볼까 한다.https://patorjk.com/software/taag/ Text to ASCII Art Generator (TAAG) patorjk.com 이 링크로 들어가도 좋고, 구글에 ASCII Art Generator 라고 치면 나온다. ..

FossFlow는 워크플로우를 쉽고 직관적으로 관리할 수 있게 도와주는 오픈소스 툴이다. 처음엔 가볍게 둘러보려는 마음으로 살펴봤는데, 예상보다 더 깔끔하고 직관적인 인터페이스가 인상적이었다. 보통 워크플로우 관리 도구는 처음에 설정이 복잡하거나 학습이 오래 걸리는 경우가 많은데, FossFlow는 그런 어려움 없이 금방 사용할 수 있었다.사용 경험 및 주요 기능개발자 문서를 만들때 유용하겠다 싶었다. 보통 excalidraw를 이용해서 다이어그램을 그리거나 아키텍처를 그렸는데, 특히 아키텍처 그림을 그릴때 FossFlow 쓰는게 좋을것 같다고 생각이 들었다. 사용성에 있어서 드래그 앤 드롭 방식으로 간편하게 노드를 추가하거나 연결할 수 있는 부분이 매우 편리했다.복잡한 프로세스를 설정할 때도 흐름이 명..

최근에 캘린더 기능을 만들게 되면서, 구현하다 보면 반드시 만나게 되는 것이 있습니다. 그건 바로 iCal(iCalendar) 문법이라는건데, 연동을 생각하는 캘린더 서비스를 만든다면 무조건 알아야 할 내용입니다. 각 캘린더 서비스들이 서로 연동을 위해 iCal이라는 특별한 형식의 데이터를 주고 받습니다. 실제로 많은 문법과 기능들이 있는데, 이번 포스트에는 가볍게 다뤄보겠습니다. 나중에 기회되면 더 자세하게 다뤄보겠습니다.왜 iCal을 알아야 할까?대부분의 캘린더 시스템이 iCal 형식으로 데이터를 주고받습니다. 다른 형식도 있지만 대체적으로 iCal을 사용합니다.구글 캘린더, 애플 캘린더 등과의 연동이 필요한 경우 필수적입니다.표준화된 포맷으로, 한 번 익혀두면 다양한 프로젝트에서 활용할 수 있습니다..

구글 앱 스크립트 (Google Apps Script)구글 앱 스크립트는 JavaScript 기반의 클라우드 스크립팅 언어로, 구글 워크스페이스 제품군(Google Sheets, Docs, Forms 등)을 자동화할 수 있는 도구입니다. 이를 통해 사용자는 다양한 작업을 자동화하고, 반복적인 작업을 쉽게 처리할 수 있습니다. 구글 앱 스크립트로 스프레드시트 자동화구글 스프레드시트에서 반복적인 데이터 입력이나 복잡한 데이터 처리 작업은 시간이 많이 소요될 수 있습니다. 구글 앱 스크립트를 사용하면 이러한 작업을 자동화하여 생산성을 높일 수 있습니다.예를 들어, 데이터를 자동으로 정리하거나 특정 조건에 따라 데이터를 필터링하는 스크립트를 작성할 수 있습니다. 구글 스프레드시트 자동화에 ChatGPT를 사용하..

https://www.fffuel.co/ Free SVG generators, color tools & web design tools🚀 On fffuel you'll find a collection of free SVG makers to create cool backgrounds, seamless patterns, gradients, textures, shapes and blobs. Use the generated vector patterns directly on the web or in your favorite design app. 🤹‍♂️ The SVG andwww.fffuel.co 웹을 꾸미다가 SVG이면서 다양한 패턴이 필요해 찾다 좋은 사이트를 발견했습니다. 사이트에서 "fffuel은 그라데..

Sveltekit에서 버튼이나 a tag에 라우터 url이 걸려 있으면,그 버튼을 hover만 해도, 라우터에 걸린 +page.server.js 가 실행됩니다.위의 코드를 보면 href에 user 라우터가 걸려있습니다.user 라우터에는 +page.server.js 가 있습니다.위에서 말한대로 버튼을 hover만 해도, +page.server.js 가 실행됩니다. SvelteKit에서 버튼을 호버했을 때 그 버튼을 클릭하면,가는 페이지의 +page.server.js의 load 함수가 실행되는 것은의도된 동작입니다.  왜 그럴까요?SvelteKit이 페이지 전환을 미리 준비하기 위해 preload를 수행합니다.preload은 사용자가 링크나 버튼을 호버했을 때, 해당 링크가 가리키는 페이지를 미리 로드하여..

>> 그래서 적어본 export와 export default의 차이점!      출처: https://www.google.com/url?sa=i&url=https%3A%2F%2Fbootcamp.uxdesign.cc%2Fnamed-export-vs-default-export-in-es6-a2370b062f17&psig=AOvVaw3526ddTwrULsBlVYSnaxql&ust=1715784990773000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFwoTCKiR16azjYYDFQAAAAAdAAAAABAE JavaScript 모듈 시스템은 코드를 구성하고 재사용하기 위한 방법을 제공하고 있습니다.그 중 export는 2가지 방법이 있습니다. Named Export ..

24년 3월 8일부로 플로우에 AI 기능이 추가되었다. 1월 초부터 AI 기능을 만들기 시작했다. 단 2달 만에 여러 기능을 찍어내기 위해 야근도 많이 하고 고생도 많았다. 선두를 달리고 있던 부장님도 AI 개발의 길을 개척하느라 많은 고생을 하셨다. AI 개발은 우리 회사의 1분기 핵심 과제였다. 그래서 많은 주목을 받았다. 나는 이 주목받는 곳에서 일하는 것이 즐거웠다. 2달 동안 급하게 기능을 만들면서, 뭔가 부족해도 “일단 이대로 가자!” 하며 만들어진 것이 많다. 대표님이 빠른 출시를 통해 경쟁사 견제를 주 목표로 삼았기 때문에, 이해는 한다. 하지만 더 사용성이 좋은 방향으로 개선되었으면 한다. ‘임시’가 ‘완성’이 아니길 바라면서.. 배운것도 많고 배울 것도 많다. 이번 AI 프로젝트를 통해..

쓰고 지우고 쓰고 지우고 하다가 다시 쓴다. 나쁜말은 다 빼고 좋은말만 간단히 해보자. (그렇게 말했던 간단히는 없었다.) 사실은 23년 하반기를 좋은 말을 해보려고 해도 나에겐 정말 심리적으로 힘든 일만 있었던 것 같아서 감정이 조금 새어 있을 수 있다. 하지만 페르소나를 써서라도 웃는모습 보여주며 힘내본다. 웃으며 살다보면 그것이 어느순간 내 모습이 될 것이니 말이다! 아자아자! 먼저 회사 이야기를 하자면, 나의 하반기 회사에서 했던 일은 단 하나로 설명할 수 있을 것 같다. 유지보수!! 하반기의 반 이상은 배포담당자를 맡으면서, 최대한 서비스의 안정성을 지키기 위해 노력했다. 배포담당자 하반기에 한번 서버가 크게 멈춘적이 있다. 언제인지 자세히 기억은 나지 않으나, DB 버전을 업데이트 하면서 생긴..

Svelte는 웹 애플리케이션 개발 프레임워크입니다. 직관적이고 쉬운 문법을 가지고 있는 Svelte로 만든 SSR 기반 프레임워크가 SvelteKit 입니다. 최근에 Svelte에 관한 공식 문서를 보다가 한가지 이상함을 느낌적이 있습니다. Svelte 공식 문서를 보는데, 이상하게 설치는 SvelteKit을 알려주고 있습니다. 공식적으로 CSR(Client Side Rendering)인 Svelte보다 SSR(Server Side Rendering)을 사용하라는 말인것 같네요. 그런데 저는 최근에 오직 CSR을 위해 Svelte를 사용하고 싶었습니다. 그것은 크롬 익스텐션 때문입니다. 크롬 익스텐션은 SSR은 당연히 사용할리 없고.. CSR만 쓰고 싶은데 왜 설치 방법은 따로 없는거지..? . . ...

플로우를 개발하면서 메일과 관련된 기능을 개발하던 중, 서버에서 메일을 발송하는데 발신자 이름이 한글로 안나오고 글자가 깨지는 현상을 발견했습니다. 메일과 관련된 공통 지식인 것 같아서 블로그에 올려봅니다. 증상은 위와 같이 발신자 이름이 한글로 깨지는 문제가 발생 했는데, 발신자 이름은 "협업툴 플로우" 라고 보냈습니다. 메일 서비스는 AWS SES를 사용하고 있었는데, 아무리 인코딩을 해서 보내도 계속 깨지는 문제가 있어서, 무엇이 문제인지 찾아보다 AWS에 문의를 넣은 적이 있습니다. AWS 측 답변 You would need to use MIME encoded-word syntax to use non-ASCII characters in the Source text. There's some addi..

REST는 Representational State Transfer 줄임말이며, 웹 서비스 아키텍처의 한 형태입니다. 서버의 자원을 정의하고, 자원에 대한 주소를 지정하는 통신 규약입니다. 통신 규약! 즉,일종의 약속입니다. REST의 기본 원칙 자원 (Resource) 웹 서비스에서 제공하는 모든 것들을 각각의 이름으로 식별합니다. 예를 들어, 사용자 정보 /users, 제품 정보 /products 등 각각이 자원입니다. 표현 (Representation) 각 자원은 클라이언트가 원하는 형식으로 표현되어야 합니다. 흔히 사용하는 형식은 JSON, XML, 텍스트 등이 있습니다. 상태 없음 (Stateless) 서버는 클라이언트의 상태를 기억하지 않습니다. 각각의 요청은 독립적으로 처리되며, 클라이언트는..

REPL은 "Read Eval Print Loop"의 약자로, 인터프리터 기반의 프로그래밍 언어에서 사용되는 대화식 환경을 제공하는 도구입니다. REPL은 사용자가 코드를 입력하면 해당 코드를 읽어들이고(Read), 평가하여 실행합니다(Eval), 그리고 실행 결과를 출력합니다(Print). 이후 다시 새로운 코드를 입력할 수 있도록 반복적으로 동작합니다(Loop). REPL의 동작 REPL은 다음과 같이 동작합니다: 1. Read (읽기): 사용자가 입력한 JavaScript 코드를 읽습니다. 2. Eval (평가): 읽은 코드를 평가하고 실행합니다. 3. Print (출력): 코드의 결과 값을 출력합니다. 4. Loop (반복): 이후 사용자가 더 많은 코드를 입력할 수 있도록 반복합니다. REPL은..

늘 메모와 기록을 중요시 생각해 왔지만, 요즘 들어 더더욱 기록이 중요하다고 느끼고 있다. 내가 늘 성장을 하고 싶고, 성장을 하려면 나를 돌아보는 시간을 가지는 것이 필요하다. 기록할 때가 바로 그때이다. 요즘은 예전에 비해 기록하는 습관이 적어진 것 같다. 최근에 하는 일이 많아서 그렇다고 생각한다. 다시 이 생각을 하게 되었으니 지금 당장 상반기 회고를 통해 기록을 하는 습관을 길러보려고 한다. 플로우 (flow) 첫번째로 우리 회사 서비스인 플로우를 개발하고 유지보수를 어떤 것을 해왔는지, 어떤 생각을 했는지 적어보자! 올해 상반기 내가 맡은 일 플로우 플랜과 프로 버전 플로우 플랜과 프로버전은 작년 12월부터 시작하여 올해 1월쯤에 개발이 끝난 기능이다. 플랜 기능은 짧은 시간 내 만들어야 했던..

원래 PostgreSQL의 저장 프로시저(Stored Procedure)와 사용자 정의 함수(User-Defined Function)에 대한 차이점을 설명하려고 했으나, 먼저 사용자 정의 함수와 저장 프로시저에 대한 설명을 먼저 작성해야겠다고 생각했습니다. 먼저 사용자 정의 함수에 대한 글을 작성해봅니다. 사용자 정의 함수란? (User-Defined Function) 사용자 정의 함수는 일부 작업을 수행하도록 지정된 임의의 SQL 문 그룹입니다. 보통 “function”이나 “함수”라고 부르고 때로는 “UDF”라고도 합니다. 일반적으로 여러 SQL들 또는 로직을 정의해 일련의 과정으로 데이터를 처리하기 위해 생성됩니다. 함수 내에서 SELECT, INSERT, UPDATE, DELETE 등의 다양한 쿼..

sveltekit + vercel + supabase 사용 후기 평소에 토이 프로젝트를 만드는 것을 좋아하기 때문에, 가볍고 쉽게 배포할 수 있는 방법 없을까 하며 고민을 많이 했다. 그러다 이번에 sveltekit, vercel, supabase라는 것을 알게 되고 간단한 토이 프로젝트를 이 서비스에 적용해 보았다. 삼대장을 만나게 된 계기 이번에 만들어본 프로젝트는 예전에 만들었던 회사 근처 식당 추천기이다. 그냥 간단히 회사 근처의 식당 중 어떤 것을 먹을까 고민하다, 대신 골라주는 “메뉴 추천기”가 있으면 좋겠다는 생각을 하면서 만들게 되었었다. 24년 03월 21일 아래 메뉴추천기 사이트는 현재 작동하지 않습니다. ㅎㅎ 그냥 그런게 있었다. 라고 생각해주세요. https://flow-mereco..

HTML의 a tag에 rel이라는 속성을 보신적이 있으실 겁니다. a tag는 보통 href에 target=”_blank” 같은 속성만 사용해보고 rel 속성에 대해 잘 모르는 경우가 대부분입니다. 저도 이번에 HTML을 작성하면서 “이 rel 속성의 역할은 뭘까?” 라는 생각이 들어 찾아봤습니다. rel 속성 rel 속성은 현재 HTML 문서와 링크된 두 문서 사이의 관계를 명시하는 데 사용됩니다. 이 속성은 href 속성과 함께 사용되며, 검색 엔진은 이를 통해 링크에 대한 추가 정보를 파악할 수 있습니다. rel 속성은 주로 (하이퍼링크), (외부 스타일시트 연결), (이미지 맵 영역), (폼 제출) 태그와 함께 사용됩니다. : 링크를 표현하는 태그입니다. 예시 링크 : 외부 스타일시트를 연결하는..