구리

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 서버에게 질문(요청)을 보내 비동기 데이터를 받게 된다.즉..

문제 상황 (요구사항)기획 기반 테스트 시나리오 작성시 서버 에러, 인증 시간 만료 등 클라이언트 조작만으로는 재현하기 어려운 테스크 케이스가 존재한다.이런 케이스들을 건너 뛰는 것보단 정상적인 조작에 의한 응답은 아니어도 mock api를 적용해 테스트를 하는 것이 좋다고 판단된다.또한 mocking 라이브러리를 적용하면 백엔드 API가 없어도 프론트엔드 개발이 수월해진다는 장점도 있다.결론적으로 도입하는 편이 여러모로 좋을 것 같다.분석mocking 라이브러리 비교 mswjson servernock브라우저 환경 지원OOXWebSocket 지원OXO프로젝트에서 e2e test 라이브러리로 사용 중인 playwright는 브라우저 환경에서 테스트를 진행하기에 nock은 제외했다.브라우저 환경을 지원하는 ..

KeepDX 개선Google Analytics 이벤트 코드가 여기저기 분산되어 있어 수정할 때 여기저기 찾아다녀야 하는 불편함이 생길 것 같아 마음에 들지 않았다. 그래서 사용자 동작이 중요하지 않은 단순 데이터 수집 이벤트라면 vuex plugin을 통해 한곳에서 이벤트 전송 코드를 관리하도록 개선했다. 기능 개발도 중요하지만 DX도 고려해서 개발하는 습관을 들여야겠다.import { trackUserCpk, trackUserId, resetUserInfo } from "@/helpers/tracking";export default function sendUserEventPlugin(store) { store.subscribe((mutation, state) => { const {type} = ..

React 상태 관리 라이브러리에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다!Redux가 나온 이유Redux는 JS 상태관리 라이브러리로 전역 상태 관리시 Redux를 쉽게 사용할 수 있는 Redux Toolkit을 많이 사용한다. 그렇다면 Redux 탄생 이전에는 클라이언트 상태 관리를 어떻게 했을까?전역 상태 관리를 생각하면 React가 제공하는 Context API를 떠올릴 수 있지만 이는 16.3 버전으로 2018년에 출시되었다. (엄밀히 말하면 상태 관리보다는 상태 주입을 도와주는 역할이다.) 그 전까지는, React에서 대표적인 상태 관리 라이브러리는 없었다.기존에는 MVC 패턴을 주로 사용했는데 애플리케이션이 비대해지며 상태(데이터)도 많아짐에 따라 상태 변화를 추적하고 이해..

이슈회사 서비스는 ArgoCD를 사용해 helm-chart를 배포하고 있다. helm chart 리포지토리에는 배포 환경, 서비스에 따라 폴더별로 구분되어 있으며 굉장히 많은 commit, push가 일어난다.배포시 가장 최신의 이미지를 사용하기 위해 deployment에서 imagePullPolicy : always 옵션을 사용해 k8s에 해당 도커 이미지가 있든 없든 무조건 다운로드하게끔 설정했다. 그러면 로컬에서 개발 후 Dockerhub에 동일한 버전의 이미지를 push 해도 배포시 항상 최신 이미지를 가져오기에 변경사항이 반영되어 있을 거라 생각했지만... 아무런 반응이 없었다.apiVersion: apps/v1kind: Deploymentmetadata: name: testspec: sel..