전체 글

Svelte와 vite로 CSR 개발 환경 세팅

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

서버에서 이메일 발신자 한글(UTF-8)로 설정하기 feat. AWS SES

플로우를 개발하면서 메일과 관련된 기능을 개발하던 중, 서버에서 메일을 발송하는데 발신자 이름이 한글로 안나오고 글자가 깨지는 현상을 발견했습니다. 메일과 관련된 공통 지식인 것 같아서 블로그에 올려봅니다. 증상은 위와 같이 발신자 이름이 한글로 깨지는 문제가 발생 했는데, 발신자 이름은 "협업툴 플로우" 라고 보냈습니다. 메일 서비스는 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는 Representational State Transfer 줄임말이며, 웹 서비스 아키텍처의 한 형태입니다. 서버의 자원을 정의하고, 자원에 대한 주소를 지정하는 통신 규약입니다. 통신 규약! 즉,일종의 약속입니다. REST의 기본 원칙 자원 (Resource) 웹 서비스에서 제공하는 모든 것들을 각각의 이름으로 식별합니다. 예를 들어, 사용자 정보 /users, 제품 정보 /products 등 각각이 자원입니다. 표현 (Representation) 각 자원은 클라이언트가 원하는 형식으로 표현되어야 합니다. 흔히 사용하는 형식은 JSON, XML, 텍스트 등이 있습니다. 상태 없음 (Stateless) 서버는 클라이언트의 상태를 기억하지 않습니다. 각각의 요청은 독립적으로 처리되며, 클라이언트는..

REPL(Read Eval Print Loop) 이란?

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

2023 상반기 회고 1편 (플로우, 도시부엉)

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

PostgreSQL 사용자 정의 함수 (User-Defined Function)

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

Sveltekit + Vercel + Supabase 삼위일체 사용 후기

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

rel 속성 - noopener, noreferrer, nofollow

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

Shadow DOM - DOM을 캡슐화 하자!

Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..

V8 Liftoff와 웹 어셈블리: 웹 성능을 향상시키는 강력한 조합

웹 성능은 현대 소프트웨어 개발에서 매우 중요한 측면입니다. 웹 애플리케이션이 점점 더 복잡해지면, 웹 성능을 최적화하여 부드럽고 반응성 있는 사용자 경험을 보장하는 것이 더욱 중요해집니다. 이를 위해 V8 Liftoff와 웹 어셈블리라는 두 가지 기술이 큰 영향을 미치고 있습니다. 웹 어셈블리 (WebAssembly) 란? 웹 어셈블리(WebAssembly) 라는 것은 무엇일까요? 웹을 개발할 때 주로 사용하는 언어는 무엇인가요? 바로 자바스크립트입니다. 우리는 웹을 개발할 때, 자바스크립트 없이는 개발할 수 없습니다. 그러나 만약 자바스크립트가 아닌 다른 언어로 웹 개발을 하는 방법이 있다는 사실 알고 계셨나요? C언어와 C++로 웹 개발을 할 수 있습니다. 이것은 웹 어셈블리가 있음으로써 가능합니다..

[노션 API] 노션 API 연동으로 데이터베이스 사용하기

개요 다들 한 번씩 노션을 사용해 보셨을 겁니다. 노션 안에는 표나 갤러리, 리스트 등 노션 데이터베이스 기능이 있습니다. 이 기능을 잘 쓰면 사용자나 팀원에 좋은 데이터베이스가 되죠. 만약 노션에 있는 데이터가 정말 유용한 데이터라면, 이 데이터를 이용해 서비스를 구축할 수 있습니다. 노션의 데이터베이스를 그대로 사용하면 되기 때문에 따로 데이터베이스를 만들 필요 없습니다. 물론 서비스가 커진다면 DB를 구축해야겠지만, 프로토타입을 위해 빠른 개발이 필요하다면, 노션 데이터베이스를 사용하는 것이 좋은 선택이 될 수 있습니다. 가벼운 사이드 프로젝트를 만드는데도 좋은 선택이 될 수 있습니다. 따로 DB를 구축하지 않고 그 과정에서 생기는 과금도 생길 일이 없습니다. 저도 노션 데이터베이스로 몇몇 사이드 ..

포토샵 vcruntime140_1.dll 오류 해결 방법

문제 vcruntime140_1.dll이(가) 없어 코드 실행을 진행할 수 없습니다. 프로그램을 다시 설치하면 이 문제가 해결될 수 있습니다. 라는 문구가 뜨면서 포토샵을 열 수 없는 문제가 발생할 수 있습니다. 이런 경우 다시 지웠다가 깔아서 잘 되면 문제 없겠지만, 지웠다 깔아도 이 팝업이 계속 뜰 경우가 문제입니다. 해결방법 아래 링크를 통해서 본인이 사용중인 컴퓨터의 운영체제와 프로세서에 맞게 패키지를 다운받습니다. https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist?view=msvc-170 Latest supported Visual C++ Redistributable downloads This article lists..