어나THE_ME

게시물이 존재할 경우 아래에 인기순 4건이 배열됩니다

• 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.. 더보기
• [javascript]01 자바스크립트 실행하기 ※ 자바스크립트를 실행할 때 (방법 2가지) 1. node.js 를 이용해서 자바스크립트 실행 2. 웹 APIs 이용 (html과 main.js를 연결해서 브라우저 상에서 실행) ◈ 1번 실습 - node.js 에는( 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트를 실행 할 수 있다 ) 1. 실습 파일 만들어준다 경로 : C:\Users\Samsung\OneDrive\바탕 화면\javascript 2. 메모장에 명령어 작성 간단한 텍스트 에딕터 툴 열어서 console.log('helloword') 출력해보기 앞서 만든 경로에 저장해준다. 저장이름 : main.js 3. 콘솔창에 실행 만약 PC 에 node.js 가 설치되어 있다면 방금 작성한 경로에 들어서 node main.js 명령어 실행하.. 더보기
• 웹페이지 로딩 지연 시 사용자 경험 개선을 위한 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"느린 사이트는 유.. 더보기
• 가상스크롤 vue-virtual-scroller 활용한 대량 데이터 테이블 성능 최적화 문제 상황사내 백오피스 중 하나인 실시간 주문 관제 화면은 관제팀이 하루 종일 띄워놓고 보는 화면이다. 평소 유입량은 300~500건 수준이라 크게 문제가 없었는데, 5월 8일 어버이날에 주문이 3,000건 넘게 몰리면서 화면이 사실상 멈춰버리는 일이 발생했다. 연말(크리스마스, 방어 시즌)이나 명절처럼 주문이 몰리는 시즌마다 반복적으로 제기되던 이슈였는데, 백엔드 페이징을 새로 붙이는 건 API 스펙 변경과 프론트 데이터 흐름을 같이 손봐야 하는 작업이라 다들 우선순위에서 밀려나 있었다.증상은 크게 세 가지였다.테이블 렌더링 자체가 느림: 주문 목록을 한 번에 전부 DOM에 그리는 구조라, 데이터가 많아질수록 초기 렌더링 시간이 그대로 늘어남스크롤이 끊김: 화면에 존재하는 (또는 ) 개수가 수천 개에 .. 더보기