반응형 📍ETC/🜸 기타지식10 AWS Amplify로 웹 앱 호스팅하기 새로운 사내 프로젝트를 들어가면서 AWS Amplify를 이용해 빠르게 프론트엔드 배포 시스템을 구축하고, 개발 서버 호스팅까지 완료해 보았다. 기존에 AWS route53에 도메인을 보유한 상태였고, 관련한 AWS 권한도 회사 계정에 부여받은 상태임을 먼저 알려드립니다 🙇🏻♀️ 🔥 Amplify 설정 1. Amplify 접속 먼저 AWS에 로그인한 후 Amplify를 검색해 주세요 Amplify 페이지까지 왔다면 새 앱 버튼을 눌러 웹 앱 호스팅을 선택! 2. Git 리포지토리 선택 배포를 원하는 Git 리포지토리와 연결하는 단계입니다. 저는 Bitbucket으로 Git을 관리하고 있으므로 Bitbucket을 선택 후 다음으로 넘어가 볼게요. 3. 리포지토리 브랜치 추가 전 Bitbucket에 이미.. 2023. 12. 22. Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 2편 Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 1편 이슈를 발견하고 해결하는 삽질,, 아 아니 과정을 포스팅 하겠습니다 👿 이슈 MUI(Material-UI) 기반으로 개발된 부서 공통 컴포넌트 라이브러리에서 하나의 컴포넌트를 가져올 때 해당 모듈의 사이 yelee.tistory.com 앞서 작성한 1편에 이어 2편에서 해결 과정을 포스팅해보겠습니다 🥳 해결 과정 이슈가 있는 코드로 돌아와 rollup.config.js 파일을 살펴보았습니다. import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import typescript from '@rollup/plu.. 2023. 10. 11. Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 1편 이슈를 발견하고 해결하는 삽질,, 아 아니 과정을 포스팅 하겠습니다 👿 이슈 MUI(Material-UI) 기반으로 개발된 부서 공통 컴포넌트 라이브러리에서 하나의 컴포넌트를 가져올 때 해당 모듈의 사이즈가 MUI의 컴포넌트 사이즈에 비해 크게 측정되는 것을 발견했습니다. 또한 Button과 ButtonGroup 등 다른 컴포넌트임에도 동일한 사이즈로 측정되는 현상을 확인했습니다. 🙄 원인 파악 과정 1. 부서 공통 컴포넌트 라이브러리 코드 분석하기 부서 공통 UI 컴포넌트는 rollup을 통해 번들링 되고 있으며 cjs(Common JS)와 esm(ES Modules)포맷 모두 지원하고 있었습니다. 리액트 프로젝트에서 import/export 문으로 모듈을 불러오고 내보내고 있으므로, esm 포맷으로 .. 2023. 10. 6. 스토리북에서 addon-controls 패널이 사라졌을때 해결 방법 스토리북에서 이것저것 테스트 해보는데 저 Controls가 사라질 때가 있다 (아무래도 단축키를 잘못 눌러서 그런 거 같은데 단축키가 뭔지 까먹음,,) 그래서 일단 급한 해결책으로 찾은 방법은 개발자 도구 -> 애플리케이션 -> 로컬 스토리지에서 storybook-layout 키를 삭제하는 것인데 이걸 쓰는 순간 단축키가 뭔지 떠올랐다 그냥 A 버튼 누르시면 됩니다 2023. 1. 18. 이전 1 2 3 다음 반응형
