frond-end 썸네일형 리스트형 가상스크롤 vue-virtual-scroller 활용한 대량 데이터 테이블 성능 최적화 혹시 지금 만들고 있는 서비스에 데이터가 엄청나게 많아서 화면이 버벅거리거나, 스크롤 할 때마다 렉 걸려서 짜증난 적 있으신가요?저도 회사의 백오피스 화면인 실시간 주문 관제 시스템에서 예전부터 주문이 폭주하는 날이면 화면이 느려져서 관제팀에서 '이것 좀 어떻게 안 될까요?' 하고 계속 요청하셨던 고질적인 문제였어요. 다들 바쁘고, 백엔드 수정은 또 큰 작업이다 보니 쉽게 손대지 못하고 있었는데, 이번에 제가 프론트엔드 단에서 이 문제를 시원하게 해결하고 관제팀으로부터 '진짜 편해졌어요!', '속 시원하다!'는 칭찬까지 들었답니다! 😊 오늘은 그 해결 과정을 한번 풀어보려고 해요 ... 이전에 있었던 문제점: 많은 주문 목록이 화면을 버겁게 만들었어요 우리 실시간 주문 관리 시스템에서 이런 문제들이 있.. 더보기 웹페이지 로딩 지연 시 사용자 경험 개선을 위한 Skeleton UI 구현 웹 페이지에 접근할 때, 긴 로딩 시간을 해결할 가장 좋은 방법은 시간을 단축하는 것이지만 그럴 수 없는 경우 디자인적으로 개선 할 수 있습니다.사용자 경험을 개선하기 위한 웹사이트와 애플리케이션에서 가장 일반적인 시스템 피드백 형태 중 하나는 대기 애니메이션 진행 표시기 입니다. Designing for the appearance of speed[참고: 원글] https://juneuprising.medium.com/designing-for-the-appearance-of-speed-aaabc7f568c2 Designing for the Appearance of SpeedInterface design for an impatient worldjuneuprising.medium.com"느린 사이트는 유.. 더보기 GitHub Actions를 이용한 ChatGPT 기반 자동 코드 리뷰 기능 추가하기 팀원들이 다들 바쁘거나, 코드리뷰를 제대로 해줄 시간이 부족할 때 기능 리뷰만 확인 할 때가 많습니다 코드의 품질과 원활한 코드리뷰를 위해 AI 의 도움을 받으면 좋을 것 같아서 도입을 해봤는데요! Github Action 을 이용해서 PR을 등록하면 ChatGPT 가 코드 리뷰를 해줍니다. 아래 레포를 통해 도움을 받았습니다.https://github.com/anc95/ChatGPT-CodeReview?tab=readme-ov-file#self-hosting GitHub - anc95/ChatGPT-CodeReview: 🐥 A code review bot powered by ChatGPT🐥 A code review bot powered by ChatGPT. Contribute to anc95/Cha.. 더보기 크롬 브라우저 비밀번호 자동 완성, 이렇게 하면 완벽 차단 (feat. formkit) Vue3 호환 가능한 Form 라이브러리인 "formkit" 을 사용중입니다.팀원 중 한분이 발견해주신 이슈인데, 폼 등록 모달창을 열었을 때 input에 자동으로 문자가 들어간다고 말씀해주셨습니다.해당 이슈가 모든 사용자에게 나타나는 이슈가 아니였고, 왜인지... 저에게는 재현이 되지 않아서 원인을 추적하기가 힘들었습니다. 처음엔, 페이지 로드시 input 에 초기화를 해줘야 하는 문제인가 라고 생각을 해서 코드를 추가하고, 로컬 서버로 실행하여 이슈가 났던 분의 컴퓨터로 확인을 해봤는데 확인이 안되었습니다.이건 코드 문제가 아니라 컴퓨터 의 환경에 따라 [os 버전, 브라우저 …등 ] 또는 브라우저 캐시 문제 라고 생각이 들었습니다 그래서 이슈가 났던 분의 계정으로 로그인해봤습니다.제 컴퓨터에서 모달.. 더보기 웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502) 20240502 운영 서버 에서 woff2 웹 폰트 가 Error 가 나서 사이트의 폰트적용이 안되는 이슈가 나타났다- 다른 압축 형식인 대체 폰트도 설정안해놔서 폰트 적용 안됨 (브라우저에 폰트가 캐싱이 되어 있어서 유저들은 몰랐을 수도..) 로컬에서 다운 받은 파일을 불러와서 해결 해당 이슈 몇시간 후인 GeekNews 에 올라왔다.. 다들 원인 파악 못하고 있었던 듯..https://news.hada.io/topic?id=14613 인증서 문제로 인한 cdn.jsdelivr.net 접속 불능 사태 | GeekNews생각보다 크리티컬한 이슈인데, 별도 언급이 없는 것 같아 공유드립니다.전 세계적으로 가장 큰 오픈소스 프로젝트 CDN 서비스인 jsDelivr의 엣지 도메인 중 하나인 cdn.jsd.. 더보기 AWS S3 + CloudFront 배포 생성 실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFront ? AWS 에서 제공하는 CDN 서비스. 캐싱을 통해 사용자게에 좀 더 빠른 전송 속도를 제공함을 목적으로 한다..html .css. .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다.CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다. 콘텐츠를 전.. 더보기 Bitbucket 배포 환경 만들기 AWS S3 + CloudFront + Bitbucket 배포 환경 구성을 이어서 적어보았다. 이전의 글 참고 🔽https://eonhwa-theme.tistory.com/185 AWS S3 + CloudFront 배포 생성실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFronteonhwa-theme.tistory.com 🍒 Bitbucket pipeline 이 뭔데?🍒 AWS S3+CloudFront + Bitbucket 연동 🍒 Bitbucket tag base 배포 .. 더보기 jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) Vue3 프로젝트에서 운행내역, 급여명세서, 재직증명서 등 pdf 다운받는 기능이 있다.테이블 형식으로 표출하는 내용이라 jspdf , jspdf-autotable 라이브러리 사용해서 구현해놓은 상태이다. jsPDF 함수 정리해놓은 github 참고 https://artskydj.github.io/jsPDF/docs/module-AcroForm-AcroFormComboBox.html#setOptions AcroFormComboBox - Documentation(PDF 1.5) If set, the new value shall be committed as soon as a selection is made (commonly with the pointing device). In this case, supp.. 더보기 "모던 프론트엔드" 에 대해 회사에서 담당하는 서비스는 Vue.js 를 사용하고 있다. 같은 프론트엔드 팀의 다른 서비스를 맡고 있는 팀원들은 React 를 사용하고 계시다. 담당하는 서비스가 다르더라도 매주 수요일마다 프론트엔드 세션을 하는데 이해도를 높이기 위해서 나름대로 둘 다 스위칭이 가능할 정도로 학습이 필요하다고 생각했다. 더 나아가 왜 이러한 프레임워크를 사용하며, 그 전에 바닐라 자바스크립트, HTML, CSS 기본이 되는 것들을 잘 이해한다면 어느 프레임워크를 사용하던지 잘 적응이 될거라 믿는다. 그런 점에서 프론트엔드 생태계에서 롱런하기 위해 프레임워크 같은 도구에 너무 매몰되지 말아야 한다. ﹆﹆ 모던 프론트엔드 란? 코파일럿 에게 물어보길 "Modern Frontend"는 일반적으로 Frontend 웹 개발에 .. 더보기 로그아웃 시 다른 에러 상태 코드 도 같이 보여주는 문제 (axios + vue3) 현재 실무 vue 서비스에서클라이언트에서 로컬스토리지의 액세스 토큰 유무로 로그인/비로그인을 판단한다.axios를 사용하여 HTTP 요청을 보내고 응답을 처리하는 wrapper 함수로 동작 중 이다. 여기서는 axios의 요청 및 응답 인터셉터를 사용하여 특정 상황에 대한 처리를 구현하고 있다. 🍒 실무에서 axios 이용한 로그인, 로그아웃 기능 #1🍒 trouble issue -> trouble shooting #2 🔎 #1. 현재 접속하고 일정시간 지나면 자동으로 로그아웃 되는 부분의 기능이 어떻게 동작중인가? 토큰 자체가 갖고 있는 정보로 브라우저의 시간과 비교해서 로그아웃 당함로그아웃 로직은 API 호출 시 응답의 상태코.. 더보기 이전 1 2 다음
