본문 바로가기

소프트웨어-이야기

[후기] makereal tldraw: 와이어프레임으로 HTML 뽑아내기 소개 makereal tldraw은 온라인 화이트보드에 와이어프레임을 그리면, HTML과 Tailwind으로 바꿔주는 기능을 제공한다. HTML 삽입 미리보기할 수 없는 소스 github의 이 영상을 보고 혁신적이라는 생각이 들어서, 테스트를 해봤다. 준비물 1. openai에 금액 충전하기 makereal tldraw은 chatgpt의 gpt-4-vision-preview 모델 기반으로 동작한다. 이 기능을 사용하려면 chatgpt credit이 충전되어있어야한다. 최소 5달러는 있어야한다. 2. chatgpt api key 준비하기 3. open api key 등록하기 실험1. 단순한 어드민 화면 만들기 실험2. 디자인이 적용된 UI 화면 만들기 디자인이 적용된 UI를 구성하기에는 어렵단 생각이 ..
손글씨st으로 예쁘게 노트 기록하기 1. Obsidian을 설치한다. https://obsidian.md/download 2. Obsidian excalidraw plugin을 설치한다. 3. 모든 확장자 파일을 볼 수 있도록 설정한다. 4. 손글씨 폰트를 다운로드 받는다. https://clova.ai/handwriting/list.html# 새로운 나눔손글씨 글꼴 - 네이버 클로바 한글한글 아름답게 캠페인과 함께합니다. clova.ai 5. Obsidial 폴더에 폰트를 추가한다. 6. Excalidraw에 폰트 추가한다. 7. Excalidraw에서 폰트를 선택한다. 7. 결과물
<김용욱> 마이크로서비스 아키텍처 구축 가이드: 프론트엔드 마이크로 서비스 아키텍처 5.1.3 프론트엔드 마이크로 서비스 아키텍처 프론트 도메인 분리하기 프론트엔드를 여러 도메인 별로 분할해야하는 경우가 있다. 프론트엔드 팀의 규모가 지나치게 큰 경우다. 이 경우, 개발 생산성이 낮아지고, 테스트와 배포가 어려워진다. 도메인 별로 팀을 묶어두었으나, 프론트엔드 애플리케이션은 1개인 케이스다. 이렇게 되면 팀 별로 독립적인 배포가 어려워진다. UI 조합하기  화면을 도메인 별로 분리하고 난 이후에는, 분리된 화면을 연결해줄 수 있는 방법이 필요하다. 크게 두가지 방법이 있다. 분리된 UI를 조합하는 심플한 방법은 HTML 링크를 사용하는 것이다. 서비스마다 별도의 사이트를 두고, 메뉴를 선택할 때 해당 사이트로 전환한다. 각 서비스는 같은 인증 체계를 갖고 있어서, 별도의 로그인 없..
HTTP KeepAlive와 Spring Tomcat과 Netty ConnectionPool의 관계 persistent connection이란? 클라이언트에서 매번 커넥션을 새로 맺는 비용을 줄이기 위해, 커넥션을 일정기간 유지하는 것을 말한다. KeepAlive이란? persistent connection을 맺는 방법 중 하나이다. HTTP 1.0부터 지원하기 시작했다. HTTP 1.0에서는 기본값은 비활성화이다. HTTP 1.1부터는 KeepAlive가 기본 설정이다. 서버의 커넥션 최대 유휴 시간 클라이언트에서 커넥션을 맺어두기만 해놓고, 사용하지는 않는다면 서버 입장에서는 불필요한 리소스를 낭비하게 된다. 그래서 서버 애플리케이션에서는 서버 최대 유휴 시간을 설정할 수 있다. 즉, 커넥션을 맺은 이후 특정 기간동안 사용되지 않았다면, 커넥션을 강제로 끊어버리는 행위를 말한다. Spring > T..
개발자를 위한 최소한의 인증 시스템 지식: Oauth2.0 + HTTP JWT 인증에 필요한 정보를 암호화한 Token이다. JWT 구성을 살펴보자. JWT은 3가지 구성요소로 나뉜다. 각 구성영역은 토큰의 점으로 구분된다. header payload signature JWT이 등장한 배경 요구사항 로그인을 하려면 아이디와 패스워드가 필요하다. 그리고 로그인을 일정 시간동안 유지해야한다. 아이디와 패스워드를 매번 보내주려면, 어딘가에 이 정보를 저장해야한다. 대안 (1) 아이디와 패스워드를 API를 요청할 때마다 전달하기 아이디와 패스워드를 사용자에게 매번 입력받는 것은 무리이다. 그래서 클라이언트 저장소에 아이디와 패스워드를 저장해서, 매번 전달해야한다. 쿠키에 아이디, 패스워드를 저장해서 전달하는 안이 있다. 그러나 개인 민감정보가 쿠키에 담겨있는 것은 보안상 안전하지 ..
<고승범> 실전 카프카 개발부터 운영까지 고승범님의 카프카 저서를 통해 학습한 내용을 정리하고자 한다. 카프카의 기본 구성 kafka: 데이터를 받아서 전달하는 데이터 버스 역할 producer: 카프카에 데이터를 만들어서 주는 역할을 하는 클라이언트 consumer: 메시지를 빼내서 소비하는 역할을 하는 클라이언트 zookeeper 카프카의 동작을 관리하기 위한 메타데이터를 관리하는 역할 브로커 정상 상태 점검 (health check) 담당 그외 카프카 주요 요소 kafka: 브로커를 구성한 클러스터 broker: 카프카 애플리케이션이 설치된 서버 혹은 노드 topic: 카프카는 메시지 피드들을 토픽으로 구분하고, 각 토픽의 이름은 카프카 내에서 고유함 RDB의 테이블 같은 역할 partition 병렬 처리 및 고성능을 위해 하나의 토픽을 ..
개발자를 위한 최소한의 DNS 지식 (2): 쿠버네티스 응용편 개발자를 위한 최소한의 DNS 지식 (1): 기초편에 이어서, 쿠버네티스를 통해 DNS을 살펴보자. 쿠버네티스 컨테이너의 DNS 설정 확인해보기 dnsutils를 설치해서, 테스트를 해보자. kubectl apply -f https://k8s.io/examples/admin/dns/dnsutils.yaml 그다음 resolv.conf 설정을 살펴보자. kubectl exec -i -t dnsutils -- cat /etc/resolv.conf dnsutils 컨테이너를 실행하여, resolv.conf 기본값을 살펴보자. resolv.conf 파일에 search option이 설정되어있다. 쿠버네티스에서 올라간 애플리케이션에서 PQDN으로 도메인을 호출했을 때, 알아서 주소를 찾아가는 이유는 이 설정 덕분..
[Kubernetes] readiness/liveness probe 쿠버네티스는 두가지 유형의 상태 체크 기능을 가지고 있다. Readiness Readiness Probe는 애플리케이션이 트래픽을 받을 준비가 되었다는 것을 쿠버네티스에 알리는 역할을 한다. 쿠버네티스는 트래픽을 받기 전에 Readiness Probe를 통과했는지 확인한다. Readiness Probe에 실패하면, 쿠버네티스는 Readiness Probe을 통과할 때까지 파드로 트래픽 전송을 중단한다. Liveness Liveness Probe는 애플리케이션이 살았는지, 죽었는지 알려주는 역할을 한다. 파드가 살아있으면 쿠버네티스는 별도의 조치를 하지 않는다. 그러나 파드가 죽어있다면, 쿠버네티스는 파드를 제거하고 새로운 파드를 시작한다. 두가지 시나리오를 통해, 두 차이점을 이해해보자. Readines..