Frontend

네트워크로 데이터를 가져오는건 느립니다. 데이터가 지구 반대편에 위치한다면 더욱 느려지겠죠. 우리는 데이터를 더 빠르게 가져올 방법이 필요합니다. 그 중에 하나가 HTTP cache를 활용하는 것입니다. 프런트엔드 개발자로서 어떤 사이트든 개발자 도구로 분석해보면 보이지 않는 곳에서 HTTP cache가 유용하게 사용되고 있는 것을 확인할 수 있습니다. HTML을 가져올때, 이미지나 비디오를 가져올때, Javascript,CSS 등 critical resources에도 HTTP cache는 사용됩니다. 그럼 왜 HTTP cache가 필요한 걸까요? HTTP cache가 필요한 이유 HTTP cache를 사용하면 느린 네트워크를 통해 데이터를 가져오는 것이 아니라 사용자와 가까운 브라우저, 웹 서버 등으로..

웹 성능서비스가 커지고 기능이 많아질수록 프런트엔드에서 많은 데이터를 관리하게 됩니다. 제가 현재 개발하는 AI SaaS에서는 one page에서 수백, 수천개 이상의 블럭 데이터, 미디어 파일들에 대한 상태관리를 하고 있습니다. 사용자 경험을 개선하여 KPI를 향상시키기 위해서 성능 최적화의 필요성을 많이 느꼈습니다. web.dev의 웹 성능에 관한 글이 있어서 이를 소화하고 팀원들에게 공유해보려 합니다.웹 성능이 왜 문제일까?시간이 지날수록 콘텐츠를 소비하기 위해 더 많은 유저들이 웹을 사용합니다. 유저들의 눈높이가 높아지면서 여러 서비스들을 비교해보며 느리거나 반응이 좋지 않은 서비스는 자연스레 사용하지 않게 됩니다. 저만 하더라도 어떤 서비스를 사용할때 유튜브나 인스타그램처럼 최적화가 잘 되어있는..

배경최근 회사에서 유저가 구독 취소 이유를 여러 단계에 걸쳐 form으로 입력받는 기능을 개발했습니다. churn rate을 줄이기 위해 비지니스적으로 변경이 많은 기능인데요. 이러한 변경에 유연하게 대응하기 위해 tree 데이터 구조를 활용하여 개발한 경험을 공유하려 합니다.구독 취소 기능실제 구현을 설명하기에 앞서 구독 취소 기능을 간략히 설명하겠습니다. 기존의 구독 취소는 한가지 이유를 선택하고 submit하는 간단한 스텝으로 이뤄져 있었습니다.그러나 시간이 흐름에 따라서 churn rate이 높아지고 있어서 더 상세한 이유를 알아야만 했죠. 그래서 유저가 선택한 항목의 하위 항목들을 만들고, 선택한 하위 항목에 따라 여러 스텝들이 있도록 기획이 변경됐습니다. 말로만 설명하기는 어려우니 실제 사진으..

안녕하세요. 이번 포스팅에서는 최근 회사에서 contenteditable로 구현한 웹 에디터에서 cursor 관련 상태와 로직을 개선한 경험에 대해 공유하려고 합니다. 조금이나마 도움이 되었으면 좋겠네요. 먼저 구현해야 하는 기능에 대해 짤막하게 설명드리겠습니다.구현 기능contenteditable로 구현된 에디터 블럭들이 여러 개가 있습니다. 하나의 에디터 블럭에서 입력을 하는 와중에 Enter, Delete 혹은 Backspace 키를 누르면 마치 하나의 문서를 작업하는 것처럼 커서 기준으로 하나의 에디터 블럭이 두개로 나눠지거나 두개의 블럭이 하나로 합쳐지는 기능입니다.Enter를 입력하면 커서 기준으로 오른쪽부터 끝까지의 text가 다음 에디터 블럭으로 나뉘어 집니다.(separate)에디터 블럭..