티스토리 블로그에 giscus 도입하기

배경티스토리 블로그를 개인 도메인(chaesunbak.com)에 연결해서 쓰면서 불편한 점이 있다.개인 도메인으로 접속시 구독하기 기능이 동작하지 않는다.개인 도메인으로 접속시 댓글을 작성할 수 없다.이러한 문제는 티스토리 도메인(chaesunbak.tistory.com)으로 접속하면 해결되지만, 매우 불편하며 이런걸 누가 알리가 없다.또한, 언제부턴가 매크로 댓글들이 달리기 시작했다.안녕하세요! 좋은 저녁입니다😅 따뜻하고 긍정적인 글 잘 읽었습니다! 사려 깊고 통찰력 있는 글에 깊이 감동받고 용기를 얻었어요. 귀중하고 의미 있는 정보를 공유해 주셔서 감사합니다 ❤️. 정말 잘 읽었습니다. 글에서 당신의 친절함, 격려, 그리고 감사하는 마음이 느껴졌어요. 오늘 하루도 밝고 긍정적이시길 바랍니다. 가족과..

• format_list_bulleted 회고
• · 2026. 1. 21.

2025 회고 : The Best Programmer I Know

The Best Programmers I Know오픈소스 관리자이자 Rust 컨설팅 회사 corrode의 설립자 Matthias Endler는 2025년 4월, 자신이 관찰한 최고의 프로그래머들의 특징을 공유하며 프로그래밍 입문자에게 조언을 주는 The Best Programmers I Know>을 블로그에 게시했다. 이후 이 글은 레딧과 해커뉴스같은 개발자 커뮤니티에 공유되며 많은 주목을 받았다.2025년 회고하기나 또한 위 글을 읽고 많이 공감하며 여러 인사이트를 얻을 수 있었다. 사실, 이 글을 처음 읽은 것은 올해 5~6월 쯤이이었는데, 이를 바탕으로 늦은 2024년 회고를 해보면 좋겠다고 생각했다. 하지만, 이런저런 이유로 늦어졌다. 저자는 위 내용이 체크리스트가 아님을 명확히 했지만. 이를 체..

• format_list_bulleted 회고
• · 2025. 12. 9.

클래스로 리액트 상태관리하기? (클래스 컴포넌트 아님)

class로 상태 관리하기?학점은행제 플래너 앱의 핵심 로직은 사용자가 입력한 학점은행제 플랜을 복잡한 규칙에 따라 검증하는 것이었다. 개발 초기 필요한 데이터와, 자료구조, 입출력 타입이 정해지지 않은 상황에서, class로 서비스 로직을 분리하고 클래스 인스턴스로 상태를 관리하는게 어떨까라는 생각이 들었다. 하위 클래스를 조립하는 방식으로 만들어 모듈화할 수 있고 테스트 코드를 작성하기도 용이하다고 생각했다. 물론 클래스 인스턴스를 리액트 상태로 관리하는 것이 까다롭고 권장되지 않는다는 것도 어렴풋이 알고 있었다. 하지만, UI 작업 이전에 서비스 로직을 먼저 구현할 필요성을 느꼈고 class가 좋은 선택지로 보였다.열띤 토론해당 방식으로 개발하며 이러한 방식의 장단점을 느껴볼 수 있었고, 개발완료 ..

• format_list_bulleted 회고
• · 2025. 8. 16.

Supabase + 임베딩으로 비슷한 문장 찾아주기

임베딩 활용하여 추천 서비스 만들기사용자가 인상 깊은 문장을 수집하면, 비슷한 문장을 수집한 다른 사용자와 연결해주는 서비스 글모이를 개발하면서 문장간 유사도 비교를 위해서 문장을 벡터로 변환하는 '임베딩(Embedding)' 기술을 사용하여, 생성된 임베딩 벡터를 데이터베이스에 저장할 필요가 있었습니다.임베딩(Embedding)이란 단어나 문장 같은 텍스트 데이터를 컴퓨터가 처리하고 이해할 수 있는 숫자 형태, 즉 벡터(Vector)로 변환하는 기술입니다. 이 벡터는 고차원 공간(수많은 차원을 가진 가상의 공간)에 표현되는데, 이때 의미적으로 유사한 단어나 문장은 이 공간에서 서로 가까운 위치에 배치됩니다.예를 들어, "사과"와 "배"는 과일이라는 공통점 때문에 벡터 공간에서 가깝게 위치하고, "자동차..

• format_list_bulleted 회고
• · 2025. 6. 16.

React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

배경AI 어시스턴스 앱을 개발하면서 채팅 UI를 구현하면서, 사용자와 어시스턴트 간의 대화 메시지를 보여주는 Message 컴포넌트를 만들었다. 메시지 목록은 부모 컴포넌트인 Chat 컴포넌트가 배열 상태(messages)로 관리하며, 이 배열을 순회하며 각 Message 컴포넌트를 렌더링한다.//Chat.jsximport { useState } from "React";import { Mesasge } from "./Message.jsx"export fucntion Chat(){ const [messages, setMessages] = useState([]); ... return ( ... {messages.map((message) => ( ..

• format_list_bulleted 회고
• · 2025. 5. 4.

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

배경React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유한다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

• format_list_bulleted 회고
• · 2025. 4. 24.