간단한 블로그

의문더블클릭과 더블탭. 아주 흔하게 사용하고 핸들링하는 제스쳐 이벤트다. 그런데 생각해보면 이상하다. 클릭하고 또다시 클릭한다는 더블 클릭의 기준은 뭘까? 클릭과 터치는 기기에 따라 다른 이벤트로 구분하지만 이 글에서는 같은 동작에 대해 설명하려 하므로 더블 클릭으로 통일한다. 위키백과에서는위키백과에 따르면 더블 클릭은 움직임 없이 버튼을 두번 '빠르게' 누르는 것이라고 설명한다. 당연하게도 위키백과에 속도에 대한 부분도 있다. 기본 설정의 윈도우에선 500ms 안에 다시 클릭했을 때 더블 클릭으로 판단한다는 내용이다. 심지어 마우스 설정에서 속도를 변경하는 법에 대해 설명하고 있다. 하지만 웹 개발자에게 있어 os는 독립적이며, 브라우저라는 샌드박스 위의 동작에 대해 알아야 하니 다른 이야기이다. W3..

FE 개발자는 많은 Rest API(웹 개발에 대한 이야기이니 이하 API로 칭한다)를 사용한다. 대부분의 로직을 백엔드에서 처리하기 때문이다. 그러다 보니 많은 개발자가 만든 API를 사용해보게 된다. 나 역시도 정부 기관, 오픈 API나 사내 API 등 꽤 많은 수의 API들을 사용해보았다. 겉으로 보기에 큰 차이는 없어 보였지만 유독 쓰기 곤란한 것들도 있었고 오랜 기간 다양한 작업을 수행했음에도 아무런 수정이 필요하지 않았던 훌륭한 API들도 있었다. 물론 비즈니스 로직의 영향도 있고 변경 범위가 크지 않아서 그럴 수 있다. 하지만 API를 호출하는 입장에서 느껴지는 '무엇인가'가 있다. 그 차이가 무엇일까 궁금해 얼마 전부터 떠오르는 것들을 메모장에 적어두었다. 어느정도 내용이 쌓인 것 같아 블..

회사에서도, 개인적으로도 최근 진행한 프로젝트는 모두 Next.js를 사용하고 있다. 퍼블리싱을 맡는 부서가 나누어져 있지 않고 SEO와 관련된 문제를 해결하기 위한 것이 크지만, 한편으로는 리액트 진영의 라이브러리들로 편하게 개발하고자 하는 면도 있다. 하지만 Next.js를 사용해도 백엔드의 컨트롤러 부분, 그러니까 클라이언트의 요청을 직접 받는 부분을 개발하기 위한 해답이 명확하지 않다. 작은 규모의 프로젝트에서 서버간 통신을 구현할 때에는 Axios를 이용한 레이어링으로 충분하다. 하지만 API의 개수와 규모가 커지다 보면 Next.js에서 지원하는 api 폴더 내에 코드 뭉치를 욱여넣는 것으로는 부족해진다. 특히 API 엔드포인트들을 관리하고 타입 체크를 하는 것 자체가 엄청난 피로감을 유발한다..

이 책은 PM-PO 직군, 그러니까 기획 계열의 업무 관련 도서다. 어떻게 해야 프로젝트를 성공적으로 이끌어 나갈 수 있을지에 대한 책으로 일종의 자기계발 서적이다. 자기계발 서적들이 흔히 그렇지만 250장이 넘는 책의 내용 중 얻을 것이 극소수라 부정적인 시선으로 보게 된다. 최근들어 PM-PO 직군으로 운영하는 회사가 많아져서인지 이 책을 추천 도서로 넣는 경우가 있는데 개인적으로는 PM-PO 직군 밥그릇 내구도 강화 재료라고 보인다. 한동안 개발쪽에서도 유행했던 그런 책이란 느낌이다. 제목이기도 한 '개발 함정'에 관한 골자는 한줄로 요약할 수 있다. "필요없는 기능을 개발하는데 쓸데없는 시간과 인력을 소모하지 말라" 이것이다. 하지만 실무를 경험해본 사람들은 의아할 수 밖에 없다. 어떻게 "필요없..

하반기 회고라기에는 상반기 회고를 너무 늦게 작성하는 바람에 뭔가 꼬인 느낌이 있다. 내용 중 하반기에 한 작업이 많았고(8~9월 작업이니) 그 이후로는 대부분 서스테이닝 작업을 진행했기에 기록하기 애매한 내용들이 많다. 이 유지보수성 작업들은 뭔가 하는건 많은데 포트폴리오로 남길만한 내용이(뭔가 있어보이는 내용이) 없는 편이다. 그런데도 오히려 서비스 운영을 위한 근본적인 실력 자체는 늘어난다는게 참 아이러니하다. 어쨌든 사내 평가 시스템에 내용을 작성하며 정리한 김에 블로그에도 정리해두려고 한다. 1. 클라이언트 로그 라이브러리 개발이곳의 서비스들은 클라이언트 로그(통계 정보) 수집을 위해 aws kinesis를, 사용자의 인증 정보를 획득하기 위해 cognito를 사용하고 있다. 문제는 이 클라이언..

이 책은 크게 두 파트로 나누어져 있다. 딱딱하지만 도움되는, 문장이나 어휘, 맞춤법등을 예시와 함께 설명하는 파트와 '함인주'라는 가상의 인물을 내세운 일종의 소설 부분이다. 문장에 대한 부분은 글쓰기에도 도움되며 아무 생각 없이 사용하던 어휘에 대해 되돌아보는 좋은 파트였다. 본래 글을 자주 쓰는 직업을 가지지는 않았지만, 코로나 이후 정착된 재택 근무로 다양한 사람들과 메신저로 소통하며 생기는 크고 작은 오해를 해결할 수 있는 작은 단서가 될 지도 모른다. 특히 저자가 말하는 '깔끔하게 읽히는 문장'이 된다면 업무 자체에도 큰 도움이 될 것이라는 생각이 든다. 특히 그 문제에 대해 나도 책임이 있다 -> 그 문제에 나도 책임이 있다. 서로에 대해 깊은 신뢰를 느낀다 -> 서로 깊은 신뢰를 느낀다. ..

아래에 적어두는 방식은 평상시 운영하고 있는 서비스가 특정 이벤트로 인해 더 많은 요청이 들어올 것을 대비하기 위한 계산 방식이다. 단순히 요청량과 CPU 사용률만으로 계산하는 방식으로 신뢰도가 굉장히 낮지만, 기본적인 지표로 삼고 메모리 혹은 로드 밸런서의 부하 등을 감안하여 인스턴스의 수를 조정할 수 있다. 평상시 인스턴스당 요청 처리량 먼저 이벤트 중이 아닌, 평상시 운영중인 서비스의 인스턴스당 요청량을 계산한다. 평상시 피크 타임의 Request 횟수를 획득한 후, 그 값을 인스턴스 개수로 나눠 피크 타임에 인스턴스 하나당 처리되는 요청의 양을 구한다. 평상시 피크 타임(23시 ~ 00시) 총 250,000 Request, 16개의 인스턴스를 사용 중일 때 250,000 req / 16 insta..

BF캐시와 pageshowBack-Forward Cache. BF캐시는 SPA나 다이나믹한 웹 사이트 등 JS의 영향이 커지고 각 페이지의 '무게감'이 커짐에 따라 중요해졌다. 브라우저가 노출하던 페이지를 메모리에 그대로 유지해두고 다른 페이지로 이동함으로써, 사용자의 뒤로가기/앞으로가기 동작시 유지해둔 페이지와 그 상태를 그대로 노출하는 것이다. 간단하게 각 페이지를 스택 구조로 쌓는다고 보면 될 것이다.사용자 입장에서는 보던 페이지를 빠르게 볼 수 있고 하던 작업을 이어서 할 수 있으니 아주 좋은 경험을 할 수 있다. 특히 초기 동작이 느린 SPA기반 사이트에서는 더 큰 도움이 된다. 하지만 FE개발자의 입장에서는 이 BF캐시가 양날의 검이다. '느리다'는 말 대신 화면이 업데이트 되지 않거나(메모리..

최근에 '인클루시브 디자인 패턴'이라는 책을 읽었다. 아무래도 퍼블리싱-디자인에 가까운 내용이고 대부분의 사용자가 모바일 기기를 사용하며 제공하는 서비스가 아주 다이나믹한(그래서 이 책에서 자주 언급하는 스크린 리더와 전혀 어울리지 않는), 그리고 인터넷 속도의 저점이 매우 높은 우리나라에는 어울리지 않는 내용이 많았다. 하지만 그 중에서도 충분히 주의깊게 읽어 볼만한 내용들이 있었기에 그 내용들을 지금의 내가 가진 생각과 더불어 간략하게 적어두려고 한다. 인클루시브 디자인 인클루시브 디자인이란 타깃이 아니라고 생각되는 소수의 사용자, 그러니까 흔히 말하는 장애인, 고령자, 다른 언어를 사용하는 외국인 등이다. 따라서 우리나라에서는 당연하게 무시하는 스크린 리더 사용자를 포함한다. 이전 어느 웹툰 회사에..

내가 2022년 상반기에 진행했던 프로젝트는 사내에서 PDP라고 불리던(이곳에서는 호텔,모텔,펜션,게스트하우스 등 국내 숙소의 상세 정보 페이지를 통칭한다) 상세 페이지를 완전히 새롭게 개발하여 기존 페이지를 대체하는 작업이었다. 개발하기로 하여 사전 회의에 모두 참여했던 담당자가 퇴사하는 바람에 갑자기 맡게 된 프로젝트로, 2명이 약 5개월간 개발을 진행했다. 나는 페이지에 노출되는 숙소의 위치, 정책 등 상세 정보, 후기, 그리고 쿠폰 정보 등을 주로 담당하여 개발했다. 이 프로젝트는 기존 하나의 프로젝트에서 노출하던 영역을 새로운 도메인이자 서비스로 분리하여 개발하는 마이크로 프론트엔드 개발이었다. Next.js를 이용하여 개발하고 AWS Beanstalk를 이용해 배포되었기에 새로운 도메인이 추가..