사용자 경험을 데이터로 증명하세요 : UTMate 회고

개요부스트캠프 웹·모바일 10기 그룹프로젝트를 진행하며 매주 회고를 남겨보았다. 지루하고 현학적인 기술 이야기보다 의사결정과정에 있어서 내가 어떤 생각을 했고 무엇을 느꼈는지를 중점으로 정리해 봤다.1주차 회고 : 주제 선정과 기획사용성 테스트 플랫폼 만들기.아이디어 회의새로운 사람들과 만남에 무척 긴장했었다. 그러나 곧 바보같은 걱정을 했다고 느꼈다. 부캠에는 다 잘하고 열심히 하는 사람밖에 없다는 걸 까먹었다.평소에 나는 프로젝트 아이디어가 떠오르면 잘 쌓아놨던 것 같은데, 이번에 내가 낸 아이디어는 내가 봐도 좀 구렸다. 모두가 다 좋아해야 한다는 생각에 자체검열을 하다보니 무난하고 구린 것만 제안하게 된 것 같다.그러다 보니 나는 내 기준 팀플 블랙리스트를 비토하는 데만 애썼던 것 같다. 좋은 쪽..

• format_list_bulleted 회고
• · 2026. 2. 12.

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.