공부하자

유어슈에서 만든 디자인 시스템인 handy를 기반으로 새 프로젝트에 쓰이는 컴포넌트를 만들기로 했다.그러다 handy right icon에 아이콘이 겹쳐 나타나는 문제가 생겼고 이를 해결하기 위한 과정과 삽질기(ㅠㅠ)를 공유하고자 한다. 문제 상황현재 handy라는 디자인 시스템을 사용하고 있는데 여기에서 BoxButton을 사용중이다.BoxButton 스토리북은 밑에 링크에서 확인 가능하다.http://handy-react-storybook.s3-website.ap-northeast-2.amazonaws.com/2.1.0/?path=/docs/components-boxbutton--docs이렇게 BoxButton에는 아이콘을 넣어서 사용할 수 있는데제목 그대로이런식으로 아이콘이 겹쳐서 나타나는 문제이다..

문제 상황개발을 진행하면서 눈에 거슬릴 정도로 사용자 경험을 해치는 부분이 하나 있었다. 바로 폰트이다. 영상을 보면 폰트가 깜빡인다는 문제를 확인할 수 있다. 이게 바로 FOUT(Flash of Unstyled Text)나 FOIT(Flash of Invisible Text) 현상인데  FOUT(Flash of Unstyled Text)나 FOIT(Flash of Invisible Text)이란?FOUT (Flash of Unstyled Text) 폰트 로딩 전에 기본 폰트로 텍스트 표시폰트 로드 후 깜빡이면서 폰트 교체 FOIT (Flash of Invisible Text)폰트 로딩 전까지 텍스트 자체를 숨김폰트 로드 후 텍스트가 갑자기 나타남이런 문제라고 설명할 수 있다. 나는 이를 개선하기 위해 ..

프로젝트의 규모가 커지면서 초기 로딩 속도가 느려지는 문제가 발생했다. 특히 홈페이지 접속 시 불필요한 코드까지 모두 다운로드되는 현상을 발견하고, 이를 개선하기 위한 최적화 작업을 진행했다. 말로만 들어보던 lazy loading을 처음으로 적용해봤다! 각 이론에 대한 간단한 설명과 함께 내가 적용했던 코드와 성능 분석 방법들을 말해보고자 한다. Code Splitting이란?Code Splitting은 번들링된 코드를 여러 개의 작은 청크(chunk)로 분할하는 기술이다.초기 로딩 시 필요한 코드만 다운로드 -> 나머지 코드는 필요할 때 로드 -> 전체 페이지 로드 시간 감소 이런 효과를 얻을 수 있고 React에서는 React.lazy()와 Suspense를 통해 쉽게 구현할 수 있다! 문제 상황불..

문제 상황프로젝트를 진행하다 보니 북마크 기능에서 불필요한 API 호출이 발생하는 것을 발견했다. 정보 딱 하나만 조회하면 되는데 전체 정보 조회 API가 하나만 존재하는 상황이었다. 그리고 각 페이지마다 중복된 북마크 로직이 존재하는 구조적으로 비효율적인 부분을 발견했다! 나는 단순한 북마크 상태 변경에도 전체 상세 정보를 다시 불러오는 것이 비효율적이라고 판단했고, 이를 개선하기 위해 백엔드 팀과 적극적으로 소통하며 해결책을 찾아갔다. (= 설득해서 단일 조회 API를 만들었다 ㅎㅎ) 기존 코드의 문제점 1처음에는 북마크 상태 변경 시 전체 상세 정보를 조회하는 API만 있었다. 백엔드 팀의 초기 설계는 단순했지만, 실제 사용에서는 비효율적인 부분이 있었다.이 구조의 문제점은 API 비효율, 즉 불필..

평소 프론트엔드 모니터링에 관심이 많았는데, 운영 중인 서비스에서 발생하는 에러를 실시간으로 파악하지 못하는 불편함을 겪고 있었다. 이를 해결하고자 Sentry를 도입한 경험을 공유하고자 한다.Vite + React 프로젝트에서 Sentry를 설정하고 활용하는 방법을 상세히 다룰 예정이다.Sentry란?Sentry는 실시간으로 애플리케이션의 에러를 감지하고 모니터링할 수 있는 플랫폼이다Sentry를 선택한 이유프론트엔드 모니터링 도구로 Google Analytics나 Microsoft Clarity 같은 대안들도 있었다. 하지만 이 도구들은 사용자 행동 분석이나 일반적인 웹 분석에 초점이 맞춰져 있다는 한계가 있었다. GA, Clarity와 Sentry의 차이점Google Analytics: 사용자 행동..

해당 글은 OSSCA - Git 활용 및 표준프레임워크 MSA 활동을 진행하며 작성한 글입니다.https://github.com/kenu/egovmsa2024 해당 글은 노션 기준으로 작성되었습니다.https://smoggy-client-47f.notion.site/API-10e5cbc9c488801bb93ed0af08eeca02?pvs=41. MicroService Architecture (MSA)MicroService Architecture는 크게 Inner Architecture와 Outer Architecture로 구분할 수 있다.MicroService Architecture는 크게 Inner Architecture와 Outer Architecture로 구분할 수 있다. 위 그림에서 남색 부분은 ..