구리

인터페이스와 추상 클래스, 언제 어떻게 써야 할까?react + typescript 관련 책을 보다 아래 예시 코드를 보게 되었다. 여기서 AbstractMenuItem 클래스는 일반 클래스로도 구현할 수 있는데 왜 굳이 추상 클래스로 표현되었는지 의문이었다. 그래서 인터페이스, 추상 클래스를 언제 사용하는지 찾아보며 정리한 글이다.export interface IMenuItem { id: string; name: string; type: string; price: number; ingredients: string[]; calculateDiscount(): number;}export abstract class AbstractMenuItem implements IMenuItem { privat..

이슈로컬 빌드 방식에서 GitHub Actions 기반의 빌드 자동화 방식으로 전환한 뒤, 특정 기능이 정상적으로 동작하지 않는 문제가 발생했다.에러 메시지는 다음과 같다.TypeError: Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objects must have a [Symbol.iterator]() method.원인해당 기능은 코드 변경이 없었기 때문에, 원인은 코드 자체가 아니라 빌드 환경 차이에 있다고 생각했다.로컬 빌드 시에는 문제 없음GitHub Actions 빌드 시 생성된 이미지의 결과물이 달랐음같은 코드가 빌드 결과에서 다음과 같이 달라졌다.# 정상 이미지 js 코드on: { ad..

작년 진행했던 서비스 마이그레이션 주제로 테크토크 발표, 기술 블로그에 기고하게 되었다. 회사를 다니며 많은 사람들 앞에서 발표할 수 있는 좋은 기회였으며 기고한 글을 공유하기 위해 링크를 남긴다. 다음엔 오픈 소스에 기여하는 것을 목표로!여담으로 독자들이 잘 이해할 수 있는 조리 있는 글을 쓰는 건 참 어려운 것 같다...https://medium.com/p/bd0a0a702a7a 카테노이드 VOD 콘솔 V2 로 이전하기2024년에 진행했던 VOD 콘솔 V2 이전 작업에서의 여러가지 개선사항 정리techblog.catenoid.net

vue virtual scroll 라이브러리 관련 문제의 원인을 찾고 해결 방안을 모색하기 위해 라이브러리를 분석한 글입니다.컴포넌트 마운트 후 scrollToIndex를 통해 하단 요소로 접근시 해당 요소로 스크롤되지 않는 이슈문제배열 요소가 1000개이고 virtual scroll을 통해 목록을 노출, 이때 요소별 height는 모두 다름컴포넌트 마운트 후 test 버튼 클릭시 scrollToIndex를 통해 최하단 (ex: 995) 요소로 접근할 경우, 해당 요소로 스크롤 되지 않음원인virtual scroll 컴포넌트 생성시 아래와 같이 동작한다.1. scrollToIndex해당 인덱스에 해당되는 요소의 offset을 가져와 변경getOffset 내부적으로 getIndexOffset를 통해 off..

2025년 3월 회고 (KPT 방식)3월은 유난히 바쁜 한 달이었다. 정신없이 쏟아지는 업무 속에서도 스스로 어떤 부분을 잘 해냈고, 어떤 점에서 아쉬움이 남았는지를 돌아보는 시간을 가졌다. 그리고 다음 달엔 더 나아진 내가 되기 위해 무엇을 시도해볼 수 있을지도 정리해보았다.✅ Keep — 잘한 것시간 관리에 대한 감각이 생긴 것 같다3월은 정말 정신없는 달이었다. 새로운 작업이 끊임없이 들어오고, 중요한 고객사의 급한 요청까지 겹치면서 마치 타임어택처럼 일했다. 그 와중에도 큰 문제 없이 마무리할 수 있었던 건, 일의 우선순위를 빠르게 판단하고 중요한 이슈부터 정리했기 때문이다.특히 어려운 이슈를 먼저 처리하면 시간 조율이 훨씬 쉬워진다는 걸 이번에 체감했다. 앞으로도 일정 관리할 때 이 전략을 적극..

이슈현재 개발 중인 서비스는 트랜스코딩 진행률 알림을 위해 socket.io를 사용하고 있었다. 그러나 유지보수가 어려워 WebSocket으로 된 새로운 push 알림 서버가 개발되었다. 그래서 나는 기존 소켓 연결 로직을 socket.io에서 WebSocekt (web api), 변경된 도메인으로 업데이트했다. 그런데 테스트를 하니 postman에선 잘 연결되던 소켓 도메인이 브라우저에서는 바로 끊겼다. (연결 시도시 바로 끊김)WebSocket close이벤트 로그를 봐도 원인이 뭔지 자세히 알 수 없었다. code가 단지 1006 (비정상적인 연결 해제)라는 힌트말고는 큰 수확은 없었다...해결1. wireshark로 패킷 분석브라우저가 실제로 연결 요청을 보내는지 알기 위해 wireshark를 통..

KPT 회고 방법론을 적용하며 잘한 점은 유지하고 부족한 점은 개선하기 위해 2월을 회고해본다.Keep더 나은 코드를 위한 고민개발할 때 코드 구조(컴포넌트 설계 등)에 대해 고민하며 제일 나은 방안에 대해 코드 리뷰 시간에 논의한다.사수분은 나의 고민과 방안에 대해 들으시곤 고민 해결 방향성을 봤을 때 바람직한 것 같다는 피드백을 주셨다. 물론 코드를 짜는 방식은 취향 차이가 있을 수 있지만 그렇게 짠 방식에 대한 타당한 이유는 있어야 한다고 생각하기에 고민하며 보낸 시간들이 헛되지 않았다고 느꼈다.아무리 바쁘지만 내가 짠 코드에 대한 설명은 할 수 있어야 한다고 생각한다. 그래야 결과물에 책임을 질 수 있기 때문이다.Problem고민을 너무 많이 하는 것 같다는 피드백한 문제에 대해 더 나은 코드 구..

React Query에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다상태란?리액트에서 상태는 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체라고 한다. 즉, 시간이 지나면서 변할 수 있는 동적인 데이터를 의미한다.리액트 앱 내의 상태는 지역 상태, 전역 상태, 서버 상태로 분류할 수 있다.여기서 React Query가 다루는 서버 상태는 외부 서버에 저장해야 하는 상태들을 의미한다. 예를 들면 UI 상태와 결합해 관리하게 되며 로딩 여부나 에러 상태 등을 포함한다.React Query의 역할공식 문서에 따르면 React Query는 비동기 상태 관리를 위한 라이브러리다.여기서 query는 직역하면 질문이라는 뜻으로 DB 서버에게 질문(요청)을 보내 비동기 데이터를 받게 된다.즉..