분류 전체보기 썸네일형 리스트형 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 활용한 대량 데이터 테이블 성능 최적화 혹시 지금 만들고 있는 서비스에 데이터가 엄청나게 많아서 화면이 버벅거리거나, 스크롤 할 때마다 렉 걸려서 짜증난 적 있으신가요?저도 회사의 백오피스 화면인 실시간 주문 관제 시스템에서 예전부터 주문이 폭주하는 날이면 화면이 느려져서 관제팀에서 '이것 좀 어떻게 안 될까요?' 하고 계속 요청하셨던 고질적인 문제였어요. 다들 바쁘고, 백엔드 수정은 또 큰 작업이다 보니 쉽게 손대지 못하고 있었는데, 이번에 제가 프론트엔드 단에서 이 문제를 시원하게 해결하고 관제팀으로부터 '진짜 편해졌어요!', '속 시원하다!'는 칭찬까지 들었답니다! 😊 오늘은 그 해결 과정을 한번 풀어보려고 해요 ... 이전에 있었던 문제점: 많은 주문 목록이 화면을 버겁게 만들었어요 우리 실시간 주문 관리 시스템에서 이런 문제들이 있.. 더보기 웹페이지 로딩 지연 시 사용자 경험 개선을 위한 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"느린 사이트는 유.. 더보기 google Mediapipe(hand detection) + React.js (feat. AI 수화 번역 실시간 채팅 서비스 [1]) 제 블로그에서 가장 인기 좋은 글은 아래의 'AI 수화번역 프로젝트' 인데요 🙌 [지난 글] https://eonhwa-theme.tistory.com/45 [딥러닝프로젝트_AI수화번역기 ] 최종결과물그동안 이것저것 할게 많아서 프로젝트는 11월에 끝났는데 정리를 못했다. 최종적으로 2021 혁신성장 청년인재 집중 양성 사업 "인공지능 개발자 양성 과정 최종 프로젝트" 에서 부산대표 1등을eonhwa-theme.tistory.com 첫 직장을 가기 전에 했던 프로젝트이니 지금은 4년이 지난 결과물입니다 ...ㅎ하하 그동안 직장생활을 살면서 코드를 볼 겨를이 없었는데요. 사실 웹쪽은 부트스트랩 템플릿으로 빠르게 만들었고 ai 가 더 주였기 때문에 (현재는 프론트엔드 개발자) 더욱 신경을 쓸 시간이 없었.. 더보기 Github Action Cache 를 사용하여 CI/CD 최적화 로컬 환경에서 개발을 할 때는 외부 패키지를 최초에 딱 한 번만 설치하면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방하여 워크플로우의 최적화를 해보았습니다. 테스트 환경Runner 환경: ubuntu-20.04Node.js 버전: 20.15.0 (.nvmrc 파일 기반)패키지 매니저: Yarn캐싱 대상: node_modules의존성 파일: yarn.lock 해당 레포에는 `.github/workflows` 폴더 안에 `deploy-dev/release/production.yml` (환경별로 각각의 3개의 파일이 존재) 이 있는데요. PR 을 생성.. 더보기 Vuex -> Pinia migration + 로그인 상태 유지 및 authStore https://pinia.vuejs.org/cookbook/migration-vuex.html Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org Vue 2버전대 레포를 Vue3 로 버전업을 하였는데요.상태관리라이브러리 역시도 Vue3 와 호환성이 좋은 Pinia 로 마이그레이션을 할려고 합니다. (vue공식 홈에서도 Pinia 사용을 권장하기도 함)Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리로, Vue 2와 함께 널리 사용되었습니다. 그러나 Vue 3가 출시되면서 새로운 상태 관리 라이브러리인 Pinia가 등장했습니다. Pinia는 .. 더보기 Vue3 + vite 에 Typescript 적용하기 vue2 프로젝트에서 vite 로 바꾸고, vue3 로 마이그레이션 까지 한 상태에서 typescript를 적용하기 위한 그 과정들을 적어봤습니다.보통 vue 프로젝트 생성 시 초기 설정에서 ts 를 선택할 수 있어서 큰 어려움이 없을겁니다.기본 베이스가 js 인 프로젝트에서 ts 를 설치하여 js와 함께 통합하여 쓸 수 있게 설정하기 위해 공식홈페이지, 블로그 등을 찾아보며 공부해봤습니다. 🁢 Typescript install & 컴파일 설정npm install typescriptyarn add typescript package.json 에 설치된 모습 npm install --save @types/nodeyarn add @types/node package.json 에 설치된 모습 npm .. 더보기 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 버전, 브라우저 …등 ] 또는 브라우저 캐시 문제 라고 생각이 들었습니다 그래서 이슈가 났던 분의 계정으로 로그인해봤습니다.제 컴퓨터에서 모달.. 더보기 [Vue.js] Vue3 환경에서 Storybook 설치 및 Pagination 공통 컴포넌트 적용기 어느 날, 새로운 기획 요구사항을 받았습니다. "페이지네이션 디자인을 변경해야 합니다."일반적으로는 디자인 요구사항에 따라 기존 컴포넌트를 수정하거나 새로 제작하면 됩니다. 하지만 이번에는 단순히 디자인을 바꾸는 데 그치지 않고, 디자인 시스템을 도입해보면 좋겠다고 생각했습니다. 왜 디자인 시스템인가?페이지네이션 같은 공통 컴포넌트는 서비스 전반에서 자주 사용되므로, 디자인 변경 시 전체적인 일관성을 유지하는 것이 중요합니다.여러 개발자가 함께 작업할 때, 컴포넌트가 표준화되어 있지 않으면 유지보수성이 떨어지기 때문에 효율적인 협업 환경이 필요했습니다.Storybook을 활용하면 UI를 독립적으로 테스트하고 문서화할 수 있어 개발 및 디자인 협업이 수월해진다는 점에서 매력을 느꼈습니다. 왜 이 작업을 .. 더보기 이전 1 2 3 4 ··· 11 다음
