전체 글 97

내 문장이 그렇게 이상한가요? 를 읽고

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

ETC 2022.11.15

이벤트 대응을 위해 인스턴스 개수 늘리기(Scale in/out)

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

ETC 2022.09.26

하이브리드 웹과 BF캐시

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

인클루시브 디자인 패턴을 읽고

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

2022년 상반기를 보내며

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

ETC 2022.09.07

Vue.js 2.x SSR시 computed 객체와 template 렌더링 문제

정확한 이유는 알 수 없지만 Vue.js 2.x (3버전대로는 경험하지 못했으니)에서 v-디렉티브 사용시 SSR도중 DOM이 렌더링 되지 않는 현상이 때때로 발생한다. 내가 경험했던 케이스는 모두 vuex 데이터를 가공하는 computed 구문 내의 객체를 v-for 혹은 v-if에 사용했을 때 발생했다. 대략 2.3 ~ 2.4부터 경험했던 문제인데 2.7이 되도록 해결되지 않은 것으로 봐선 해결이 쉽지 않은 문제로 보인다. 이 문제는 정말 골치아픈 것이, computed로 처리하는 객체를 템플릿에 {{ object }} 구문 등으로 직접 노출시에는 데이터가 담겨있지 않지만, 라이프사이클에서 객체를 stdout으로 출력시에는 의도한대로 데이터가 담겨 출력된다. 심지어 data에 computed된 데이터를..

썸네일과 썸네일 서버 로직에 대해

FE 개발자가 자주 사용하지만 직접 구현해보는 사람은 많지 않은 썸네일 서버 로직에 대해 정리한 글이다. 회사에서 팀 내에 공유한 문서였는데 쓰는 글이 없어 허전하길래 다시 정리해서 업로드한다. Thumbnail 썸네일이란? 트래픽 문제 → 용량의 문제 → 비용의 문제 사용자 경험 (UX) 증대도 있지만 클라우드 비용 감소에 있어 아주 큰 영향을 차지한다. 결국 사용자/제공자 모두에게 있어 비용 감소가 주요 목표라고 할 수 있음 최근 IOS에서도 webp가 지원되어 (webm은 아직) 많은 사이트에서 썸네일을 webp로 제공하는 추세 webp/webm: 구글에서 공개한 이미지 코덱(포맷)으로 webp는 정적, webm은 동적(gif) 이미지에 사용됨 대부분의 경우 용량을 아주 큰 폭으로 줄일 수 있지만 ..

함수형 프로그래밍에 대해

예전에 공부하다 남긴 자료(이 블로그에 흔적으로 남아있는) 것들을 최대한 간략하게 요약한 내용. 대부분의 개발자는 수학과 출신 개발자가 아니므로, 수학적 이론을 기반으로 한 학습(탑다운)이 아닌, 실제 구현된 내용으로부터 이론을 알게 되는(바텀업) 경우가 많아 그 측면에서 설명하고자 했다. 팀 슬랙에 공유했었는데 그냥 버리긴 뭔가 아까워서 글로 작성해둔다. 함수형 프로그래밍 함수형 프로그래밍이란? 절차적, 객체지향과 같은 언어 패러다임으로 상위 요소나 전역에 의존성이 없는 순수한 함수를 만들고, 그 함수들을 조합함으로써 프로그램을 만들어 내는 프로그래밍 방식. 문제의 요소를 간단한, 처리하기 쉬운 형태의 함수 단위로 나누기 때문에 어려운 문제를 쉽고 사이드 이펙트 없이 풀어낼 수 있다고 주장한다. 함수형..

ETC 2022.02.26

전략과 전술

군 부대에서 자주 사용하던 단어로 전략과 전술이라는 단어가 있다. 이 두 단어는 쉽게 혼용되는 단어인데(사회에서의 의미는 약간 다르므로), 나는 훈련소에서 두 단어의 차이를 듣고 꽤나 재미있다는 생각을 했었다. 두 단어는 네이버 국어사전에서 아래와 같이 설명된다. 간단하게 요약하자면 국가간 전쟁을 이기기 위한 전체적인 규모의 행동은 전략, 하나의 전장에서 전투를 승리하기 위한 행동은 전술이라고 하는 것이다. (스타크래프트에서의 핵이 전술 핵미사일이라는 점을 떠올려보자) 전산병으로 근무하던 군 복무 시절 나는 다양한 AS 업무로 사단 본부에 가는 일이 잦았다. 특히 사단 본부 지하에 있던 사단 지휘통제실은 영화에서나 볼 법한 대형 원탁과 수 많은 빔 프로젝터, 초대형 스크린 등으로 정기 점검을 나가야 할 ..

ETC 2022.01.29

책임과 기술, 그리고 오버엔지니어링

아키텍처에 관한 글을 작성하다 보니 자꾸 늘어져서 다른 글을 주저리 적어본다. 현재 재직중인 회사에서 API 요청과 응답에 대한 Type validation 라이브러리 도입에 대한 논의를 진행했다(zod, joi, yup 등). 이 라이브러리들은 단순 응답 형식(타입스크립트 인터페이스) 작성을 통한 형변환을 넘어, 최소값과 최대값, 그리고 형식 등을 체크해주는 일종의 미들웨어다. 그런데 나는 회의 도중 문득 '이게 정말 필요한 것일까'라는 반골 기질의 의문이 들었다. 개인적으로 FE 개발자로서 업무를 진행한다면 프론트엔드에서 하는 '사내 내부 요청'은 항상 검증되어 있어야 한다고 생각하기 때문이다. 프론트엔드 제공을 위한 백엔드(BFF)에서 저런 데이터 검증을 한다는 것은 API, 다시말해 백엔드을 믿지..

ETC 2022.01.26