들어가며안녕하세요. 요즘 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 기존에는 시험 지문에 단순 텍스트만 작성할 수 있었어요. 보통 시험 문제에는 이미지가 필요한 경우가 많아 현재 방식은 문제를 만드는데 불편함이 있었습니다. 그래서 마크다운 에디터를 도입하게 되었고, 이를 활용한 이미지 업로드 기능을 추가하게 되었습니다. 이번 글에서는 마크다운 에디터에 이미지 업로드 후 이미지 링크를 삽입하는 방식을 알아보겠습니다. 개발 환경현재 플러피 서비스의 웹 클라이언트는 다음과 같은 환경에서 개발되고 있습니다.React.jsTypeScript@uiw/react-md-editor다양한 마크다운 에디터 라이브러리 중 @uiw/react-md-editor를 선택한 이유는 다음과 같습니다.Re..

들어가며안녕하세요. 현재 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 최근에, 사용자들이 시험에 대해 피드백을 제공할 수 있도록 좋아요 기능을 추가했습니다. 사용자가 좋아요 버튼을 누르고, 서버의 응답을 받은 후 좋아요 수를 업데이트하는 방식은 사용자 경험이 좋지 않다고 생각했습니다.이번 글에서는 React Tanstack Query를 사용하여, 낙관적 업데이트(Opimistic Update)를 구현하는 방법에 대해서 알아보겠습니다. 또한, 디바운스(Denounce)를 사용하여, 사용자가 너무 많은 요청을 보내는 것을 방지하는 방법에 대해서도 알아보겠습니다.낙관적 업데이트란?먼저, 낙관접 업데이트(Optimistic Update)가 무엇인지 알아보겠습니다. 낙관적 업데이트는 사..

들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 이 서비스에는 시험 목록을 보여주는 부분이 많습니다. 시험 목록에는 아래와 같은 카드가 존재하고, 여기에 시험을 설명하는 글이 들어갑니다. 시험 설명 글의 줄 수에 따라 카드의 높이가 달라지게 됩니다. 저는 카드마다 높이가 다른 것은 일관성이 없어 보기가 불편했습니다.이러한 이유로 시험 설명의 최대 라인 수와 최소 라인 수를 고정해보았습니다.최대 라인 수 고정먼저, 최대 라인 수를 고정하는 법을 알아보겠습니다.이 속성을 적용할 경우, 줄 수는 최대 3줄까지 늘어나고, 그것을 넘어가면 "..."으로 처리하게 됩니다.{ overflow: hidden; // 넘치는 부분을 숨김 displ..

안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 모바일 환경에서도 시험 문제를 풀 수 있게 하기위해서 반응형으로 개발하던 중 문제가 사소한 문제가 발생했는데요.문제를 푸는 화면의 크기를 꽉차게 하고 싶어 height: 100vh로 했지만 주소창의 크기로 인해서 스크롤이 되는 문제였습니다. 아래의 동영상을 참고해주세요. vh는 CSS에서 사용하는 단위로, 뷰포트(viewport)의 높이에 기반합니다.1vh는 viewport의 전체 높이의 1%를 의미합니다. 예를 들어, 뷰포트 높이가 1000px라면, 1vh는 10px입니다. 사파리나 크롬같은 경우 주소 표시줄을 감췄을 때를 기준으로 설정되었기 때문에 100vh를 설정했지만 스크롤되는 현상이 발생했습니..