전체 글 102

네이티브 앱에서 하이브리드 앱으로

모바일 기기의 성능이 압도적으로 좋아지면서 하이브리드 앱의 한계를 느끼기 어려워졌다. 웹 개발이라는 특성상 빠른 배포로 다양한 실험을 진행함으로써 지표를 확인할 수 있고, 특히 앱 심사라는 골치아픈 문제를 피해갈 수도 있다는 점도 큰 장점이다. 토스를 필두로 실제 서비스에 적용하는 사례가 많아지면서 다니고 있는 회사에서도 적용하겠다는 목표가 세워졌다. 실제 개발에 들어가는 것은 몇 달 뒤가 될 것 같지만 어떤 점을 고려해야 할지 미리 생각해두었다.  고려해야 할 것들Android뒤로가기(Back Key)안드로이드는 물리적 버튼(요새는 제스처)으로 뒤로 가기가 가능하다는 점을 고려해야 한다. 브라우저인 웹뷰 자체에서 '뒤로 가기'를 해 버리므로 의도하지 않은 동작을 할 가능성이 높다. 특히 앱에 노출되는 ..

ETC 2024.09.25

팀장이 되면 어떻게 해야 할까

들어가며실장에 이어 팀장도 퇴사한다는 소식을 전해왔다. 전 CTO가 이직한 회사로 간다고 한다. 팀장뿐 아니라 팀원도 한 명 같이 가기에 더 많은 퇴사자가 있을 가능성이 크다. 흔히 그렇듯 대규모 이동이다. 이 와중에 상위 조직인 유닛의 유닛장이 나에게 팀장 의사가 있는지 물어왔다. 팀장 아래 레벨 중 지원자가 있는지 확인하는 것이었다. 최근 회사가 비즈니스적인 이슈로 여러가지 이야기들이 있는 불안정한 시기이기에 우선 "손 들고 하겠다고 하지는 않겠다" 정도로 의사를 전했다. 곰곰히 생각해보면 조만간, 혹은 적합한 사람이 없다면 당장 팀장이 되어야 하는 상황인 것을 깨달았다. 지금이 아니더라도 팀장이 되어야 할 것이며, 미리 준비하지 않는다면 내가 욕하던 무책임한 팀장이 되리라는 생각이 들었다. 내가 팀..

ETC 2024.09.17

atob와 encodeURIComponent. 짝이 되는 변환 함수들

개요두개 함수는 모두 파라미터와 반환 값이 문자열이다. 그렇기 때문에 boolean이나 undefined를 입력했을 때 아무런 오류 없이 문자열 "true" 나 "undefined"를 입력한 결과가 반환된다. 이 특징은 encode(decode)URIComponent 함수에서 특히 두드러진다. 웹 개발을 하다보면 쿠키에 저장된 값을 읽어 처리해야 하는 경우가 많다. 함수의 입력과 반환 값에 대해 고민하지 않는다면 무심결에 아래와 같은 코드를 작성하기 쉽다.  위 로직은 꺼내 사용하는 key라는 쿠키가 정의되어있지 않을 때 문제가 발생한다.   위 예시처럼 undefined를 파라미터로 입력하면 문자열 "undefined"가 반환되기 때문이다. 이 값을 다시 쿠키에 쓰지 않았다면 한 숨 돌릴 수 있지겠만,..

2024년 상반기를 보내며

벌써 상반기가 지나갔다. 일이 많아서인지 루틴화된 생활 때문인지 시간이 너무 빠르게 흘러가는 것 같다. 반기치고는 꽤 굵직한 일들을 많이 했다. 연말 회고는 평가 자료를 수집할 겸 작성하지만 지금은 평가 기간이 아니다보니 지표나 결과보다는 기억에 남은 것들에 대해 적어두려고 한다. 어떤 작업을 했었고, 아쉬웠던 점이 무엇인지 정도다. 주요 업무문서작업코딩 스타일 가이드회사의 방침에 따라 팀 별로 언어나 플랫폼에 대해 코딩 스타일 가이드를 작성하라는 지시가 있었다. 웹 개발이니 그에 맞춰 TypeScript, HTML의 코딩 스타일 가이드를 작성했다. 당연히 처음부터 작성한 것은 아니고, 유명 기업들의 가이드를 참고하여 현재 프로젝트에서 사용하고 있는 것들을 문서화하고자 했다. 실제 프로젝트와 비교하면서 ..

ETC 2024.06.09

protobuf를 이용한 "자동 함수 생성" 프로젝트

이전부터 강조했듯 FE는 필연적으로 통계(클라이언트 로그)와 친숙해질 수 밖에 없다. 이번 상반기의 주요 프로젝트는 이 클라이언트 로그와 관련된 프로젝트로 내가 소속된 웹 팀 뿐 아니라 앱 팀, 그리고 다른 부서의 웹 팀까지 사용하는 것을 목표로 하는 프로젝트를 진행했다. 간단하게 말하자면 protobuf 정의를 이용해 Java, Kotlin, Swift, Typescript 4개 언어의 소스 파일을 생성하는 프로젝트였다. 들어가며다니고 있는 회사에는 통계와 관련된 작업을 하는 DIA팀이 있다. DIA팀은 상반기 프로젝트로 엑셀로 작성하던 클라이언트 로그 명세서를 protobuf로 작성하는 프로젝트를 진행했다. 많은 팀이 참조하는 클라이언트 로그 정의가 변하면 업무 프로세스도 변할 수 밖에 없다. 왜 하..

ETC 2024.06.02

H2에서 청크 개수 제한은 성능에 영향을 줄까? 주는 것 같다.

얼마 전 회사에서 공유했던 문서 중 하나를 가져와 블로그에도 적어둔다. 다른 글과 다르게 회사에 공유했던 주요 내용만 요약한 글이지만, 제대로 확인된 내용이 아니기도 하고 평소에 어떤 식으로 이야기를 풀어 공유 해왔는지를 남겨두는데 의미를 둔다. 개요신규 프로젝트 런칭 이후 성능 개선 작업 도중 문득 이상한 것을 발견했다. HTTP2를 지원하는 스테이지 서버임에도 때때로 굉장히 "느리게" 페이지의 JS가 실행되는 것이었다. 혹시나 하여 청크 개수 제한을 걸고 배포해보니 불규칙적인 로드 완료 지연이 크게 줄어든 것을 느꼈다. 이것을 제대로 확인해보진 않았지만 분명하게 빨라진 것을 느꼈고, 다른 성능 개선 작업에 더해(서비스에 아무런 영향이 없으니) 청크 제한을 건 상태로 라이브 배포를 진행했다. 다른 작업..

ETC 2023.12.07

gRPC에 대해

최근 여기저기에서 gRPC에 대한 이야기가 들린다. 회사에서 gRPC를 쓰겠다는 말이 있기도 했지만 이런 통신 계열에 재미있는 것이 자주 나와 관심을 가져봤다. 책을 읽고 이런저런 테스트를 해보니 당장 쓰진 않을 것 같지만, 관련 시스템을 한번쯤 만질 일은 있을 것 같다는 생각이 들어 이 글을 남겨둔다. 최소한 순식간에 없어질 정도는 아닐 것 같다는 뜻이다. gRPC gRPC는 구글에서 만든 원격 프로시저 호출(RPC) 시스템이다. CGI부터 이어져 온, 외부 시스템에 값을 전달해주기 위해 사용하는 연결 방식이다. 더 줄이자면 "RESTful API를 대체할 수 있는 무엇이다" 정도로 말할 수 있겠다. 물론 응답을 주고 받을 프로젝트가 웹 프로젝트로 한정되지 않았다는 점 때문에 약간 다르지만, 결국 서버..

ETC 2023.12.04

2023년을 보내며

연말 평가가 다가와 수행한 업무들을 정리하던 중 블로그에도 회고를 적는다. 11월이지만 늦게 적는 것보단 미리 적는 게 더 나을 것 같기도 하고, 하반기에 남은 업무가 많지 않아 한두 달 지나도 차이는 없을 것 같다. 올해 상반기까지는 계속 혼자 작업을 진행했었는데, 하반기부터 팀원이 한분 붙어 함께 작업하기 시작했다. 정/부 개념이 되어 부담은 덜해졌다. 다만 서로 코드 리뷰를 해도 놓치는 부분이 여전히 있었다. 주로 스타일이나 로그 등 상대적으로 중요하지 않은 부분이 그랬는데, 이건 리뷰하는 인원이 늘어난다고 해도 별 차이가 없을 것 같다. 주요 업무서비스 업무1. 국내 숙소 상세 사이트 개편 (07/20 ~ 11/08)개요 11월 8일에 런칭한 가장 최근 프로젝트이기도 하지만 중요도와 성과를 생각하..

ETC 2023.11.18

딱히 구분할 필요는 없지만 다른, 그런 것들

개발자로서 업무를 진행하다 보면 별 생각 없이 섞어 쓰는 단어들이 있다. 정확한 뜻은 다르지만 모두 이해하고 있고 구분할 정도로 다르지는 않기에 다들 무시하는 그런 단어들이다. 섞어 쓰면 안된다거나 고쳐야 한다는 그런 것은 아니고, 단순히 재미삼아 떠오르는 대로 몇가지 적어본다. 1. Function과 Method최근 멀티 패러다임 언어가 많아지며 이 둘을 구분하는 것이 꽤 중요해지긴 했다. 자신이 어떤 것을 만들고자 하는지 알아야 방향을 잡을 수 있기 때문이다. 간단하게 요약하면 이렇게 쓸 수 있겠다.함수는 외부에 영향 없이 입력에 대한 출력을 반환하는 명령이다. 메소드는 요소(객체)의 상태를 변화시키는 행동이다. 함수형 언어를 공부했다면 이 두개 단어를 혼용하는 것에 미묘한 반감을 가지게 된다. 함수..

ETC 2023.09.24

React의 hook deps와 Object.is

의문 리액트의 훅은 deps값을 저장하고, 이전 값과 비교하여 변화가 있을 때 재실행(갱신)하도록 한다. deps 비교는 당연히 reference 비교라고 생각했기에 아무런 의심 없이 사용해왔다. 하지만 최근 IDE의 자동 완성을 이용해 deps 구문을 작성했을 때 의도했던 갱신이 이루어지지 않았다. 확인해 보니 deps에 등록된 객체의 필드가 문자열이었고, 객체가 변경되었지만 문자열 자체는 변하지 않았기 때문이었다. 이 참에 deps에 대해 짚어보자는 생각으로 리액트의 코드를 확인해 보고, 그 기록을 남긴다. 물론 이 글 역시 너무 오랫동안 글을 쓰지 않아 팀 메신저에 공유했었던 내용을 정리하여 다시 쓰는 글이다... React는 훅의 deps를 어떻게 비교하는가? 먼저 리액트의 코드를 직접 확인해 본..