개발하는 일상

우리 서버는 응답 시간이 500ms 정도야. 평균 속도보다 느리니까 개선하면 좋을 것 같아. 정말 개선하면 좋을까? 좋다면 얼마나 좋은걸까? 프로젝트 Domination Game은 이 질문에서 시작되었다. Domination Game은 땅따먹기 싸움과 비슷하다. 다만 땅을 따먹는데 1시간이 걸린다. Dominate 버튼을 누르면 점령을 시작하고, 한 시간 동안 다른 사람이 버튼을 누르지 않길 바라고 있어야 하는 게임이다. 다른 사람이 버튼을 누르면 나는 점령에 실패한다. 점령에 성공하면 쌓인 상금을 받는다. Dominate 요청에 서버가 응답하는데 한 시간이 걸린다면, 그 서버는 빠른걸까? 아니면 느린걸까? 나는 게임 소개란에 "알맞게 빠르다" 라고 썼다. (물론 비용을 생각하면 알맞지 않다. 아래 비하..

나는 github copilot이 베타 서비스 할 때 부터 사용하기 시작해서, 지금은 코파일럿 없이 코딩한다는 것은 상상도 못하는 사람이 되었다. 2년 넘게 사용하다 보니 코파일럿이 어떤 것을 잘하고, 어떤 것을 못하는 지 어느정도 감이 생겼다. 그래서 코파일럿에 익숙하지 않은 사람들을 위해 나의 활용법 몇가지를 소개한다. 나는 vscode 환경에서 코파일럿을 사용한다. 코파일럿이 잘 하는 것 1. 유틸 함수 생성 코파일럿은 github의 다른 코드를 기반하여 생성된 모델로 돌아가기 때문에, 단순하고 범용적으로 쓰일 법한 코드일 수록 더 잘 생성해낸다. 유틸 함수가 대표적인 사례이다. 아래 [그림 1]을 보자. [그림 1]에서 밝기를 구한다는 주석을 작성한 뒤 코드를 추천받고 있다. 이 함수는 실무에서 ..

지난주에 나는 3년 가까이 다닌 회사를 그만두었다. 일을 할 때 회사가 원하는 방식과 나의 방식이 달랐고, 그 차이가 쉽게 좁혀지지 않을 것이라 판단하였다. 이 기회에 지금의 나는 어떻게 일하고 싶은지 남겨두려 한다. 지난 1월, 어떤 노트북을 알리기위한 팝업스토어(전시)에 외주 개발자로 참여하게 되었다. 나는 처음 전시에 방문하는 사람들이 참여할 이벤트 프로그램을 만드는 일을 맡았다. 사람들이 노트북 화면에서 스노우볼을 터치하면 확률에 따라 받을 상품을 보여주는 간단한 프로그램이었다. 약 2~3일간의 시간을 들여 작업을 끝냈다. 구현하기로 한 기능은 완벽히 동작했다. 일이 끝났지만 나는 더 잘할 수는 없었는지 고민해보았다. 깔끔하고 읽기 좋은 코드를 작성한다. 유지보수하기 좋은 구조로 설계한다. 로딩 ..

이 글은 vue query를 왜 실무에 도입했으며, 어떤 과정과 배움이 있었는지를 기록한 글이다. 비슷한 과정에 있는 분들이 도움을 받을 수 있을까하여 남겨본다. 이 글을 읽는 분은 기본적인 vue query에 대한 개념을 알고 있는 분이라고 생각하고 글을 썼다. Vue Query를 도입하게 된 이유 먼저 요약하자면, 쉽게 이해할 수 있는 코드를 작성하기 위해 vue query를 도입하게 되었다. 기존 코드의 어떤 점이 가독성을 떨어뜨리게 되었는지 얘기해보겠다. 우리 팀은 vue를 클라이언트 개발에 사용하고 pinia를 상태관리 라이브러리로 사용했다. 서버에서 받아와야 하는 데이터(이하 서버 state)를 pinia store에서 같이 관리했는데, 아래 그림1 과 같은 코드를 작성했다. 여기서 발생한 문..

한 줄 요약 select 태그를 커스텀하게 만들고 싶다면 div 태그에 tabIndex="0" 속성을 주고, blur 이벤트리스너를 활용해보자 여러 옵션 중 하나를 선택할 수 있게 해주는 HTML 태그가 있다. select 태그인데, 내부 운영용 툴을 만들다가 이 태그를 쓰게 되었다. select 태그를 쓰게 되면 디폴트로 아래 그림1와 같은 디자인이 따라온다. 이 디자인은 css로 바꿀 수 없다는 것이 문제였다. 아무리 내부용 툴이지만 이렇게 만들고 싶진 않아서, div 태그로 직접 select 태그를 구현하기로 했다. 적절한 style과 클릭 이벤트리스너를 달아서 아래 그림2와 같은 태그를 만들었다. div 태그로 select 태그를 흉내내면서 생긴 하나의 문제가 있었다. select 태그는 선택지를..

최근 채널톡을 컨트롤하는 모듈을 만들다가 아주 기발하다고 생각한 아이디어가 있어서 리뷰를 요청했다. 아이디어는 아래 내용과 같다. 채널톡의 문의버튼을 Vue 컴포넌트처럼 사용할 수 있게 만들었다. 원래 채널톡 버튼은 iframe을 삽입하도록 동작한다. 1의 컴포넌트를 상태 관리 라이브러리(Pinia)의 getter에 선언했다. 더 자세한 맥락은 다른 글 "SPA에서 채널톡 사용하기" 에서 작성할 예정. 이 방식이 재밌다고 느껴서 들뜬 마음으로 리뷰를 기다렸다. 그리고 우리팀 인턴이 그날 밤 이런 리뷰를 달아주셨다. 조금 설명을 덧붙이자면 컴포넌트처럼 보이게 하지 않고, 조금 귀찮더라도 채널톡이 제공하는 method를 lifecycle hook에서 직접 호출하는 방식이 어떻겠냐는 의견이었다. 왜 그렇게 생..