frond-end 썸네일형 리스트형 API 키 안전하게 관리하기: GitHub Actions Secrets와 CI/CD 동적 환경 변수 주입 해당 글은 프로젝트에서 민간한 정보인 API KEY 를 안전하게 관리하는 방법입니다. 제가 회사에서 한창 개발 중이었던 'AI 음성 주문 시스템'에서 시작되었습니다. 이 시스템은 아직 내부 테스트(QA) 단계에만 배포된 베타 서비스였는데요. AI 기능을 구현하기 위해 OpenAI API 키를 비롯한 여러 키 값들을 .env 파일에 넣어두고 프로젝트를 진행하고 있었습니다. 며칠전에 QA 환경에서 AI 서비스가 동작하지 않는다는 보고를 받았습니다. 의아한 마음에 OpenAI 대시보드에 접속해보니 분명히 존재해야 할 API 키가 사라져 있었습니다. gpt-5가 업데이트 되고 OpenAI 내부에서 모든 api를 삭제한건가..? 라고 생각했어요저는 대수롭지 않게 생각하고 키를 다시 생성해서 프로젝트에 업데이트한.. 더보기 Vite manualChunks로 웹사이트 로딩 속도 2배 빠르게 만들기(rollup-plugin-visualizer 로 분석 리포트 시각화) 안녕하세요.웹사이트 초기 로딩 성능 모니터링과 개선을 간단하게 할 수 있는 방법을 공유해볼려고 합니다. 현재 회사의 서비스 프로젝트는 Vue.js 기반이고, Vite 를 사용해 개발과 빌드를 진행하고 있는데요Vue2 -> Vue3로 진행하면서 여러 라이브러리들도 대체하거나 없앨려고 노력중인데, 문득 빌드 시 우리 앱의 번들 중 어떤 라이브러리가 얼마나 많은 용량을 차지하는지 궁금해졌습니다. 그래서 빌드 시 번들 분석 리포트가 생성되도록 visualizer 플러그인을 추가합니다. yarn add -D rollup-plugin-visualizer `vite.config.ts`파일에 아래의 코드를 추가하여 빌드를 하면 번들 사이즈를 시각화 한 리포트가 생성됩니다.import { visualizer } from.. 더보기 AWS S3 + CloudFront 프론트엔드 배포 환경 구성 안녕하세요! 실무에서 AWS S3와 CloudFront를 활용한 `프론트엔드 배포 환경을 구성`하고 운영하는 경우가 많습니다. 이 글에서는 S3와 CloudFront를 사용하여 정적 웹사이트를 안정적이고 빠르게 배포하는 과정을 AWS 모범 사례를 반영하여 상세하게 안내해 드리겠습니다. ✅ 이 글에서 다룰 내용Amazon S3 (Simple Storage Service) 란 무엇인가?Amazon CloudFront 란 무엇인가? 왜 S3와 함께 사용하는가?S3 버킷 생성 및 보안 설정 (OAC 활용)CloudFront 배포 생성 및 주요 설정 (캐싱, 보안, 사용자 정의 도메인)배포 후 고려 사항 (캐시 무효화) Amazon S3 (Simple Storage Service)Amazon S3는 AW.. 더보기 가상스크롤 vue-virtual-scroller 활용한 대량 데이터 테이블 성능 최적화 서비스에서 데이터가 엄청나게 많아서 화면이 버벅거리거나, 스크롤 할 때마다 렉 걸려서 짜증난 적 있으신가요?사내 백오피스 화면인 실시간 주문 관제 시스템에서 예전부터 주문이 폭주하는 날이면 화면이 느려져서 관제팀에서 '이것 좀 어떻게 안 될까요?' 하고 계속 요청하셨던 고질적인 문제가 있었는데요. 다들 바쁘고, 백엔드 수정은 또 큰 작업이다 보니 쉽게 손대지 못하고 있었는데, 이번에 제가 프론트엔드 단에서 이 문제를 시원하게 해결하고 관제팀으로부터 '진짜 편해졌어요!', '빨라져서 너무 좋아요'라는 칭찬까지 들었던 그 해결 과정을 한번 풀어보려고 합니다 ... 이전에 있었던 문제점: 많은 주문 목록이 화면을 버겁게 만들었어요 우리 실시간 주문 관리 시스템에서 이런 문제들이 있었습니다:1. 일단 너무 느.. 더보기 웹페이지 로딩 지연 시 사용자 경험 개선을 위한 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.. 더보기 Bitbucket 배포 환경 만들기 안녕하세요! 이전 글 "AWS S3 + CloudFront 배포환 생성"에 이어, 이번에는 Bitbucket Pipelines를 활용하여 S3와 CloudFront 배포를 자동화하는 CI/CD 환경 구축 방법을 작성해봤습니다. 이 글을 통해 개발자가 소스 코드를 Bitbucket 저장소에 푸시하는 것만으로 빌드, 테스트, S3 업로드, CloudFront 캐시 무효화까지 자동으로 이루어지는 효율적인 배포 파이프라인을 구축할 수 있게 됩니다. 이 글에서 다룰 내용Bitbucket Pipelines란 무엇인가?Bitbucket Pipelines와 AWS 연동을 위한 OIDC 설정 (권장)`bitbucket-pipelines.yml` 파일 상세 분석 및 작성법브랜치 및 태그 기반 파이프라인 트리거Docker.. 더보기 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, s.. 더보기 이전 1 2 다음
