본문 바로가기
반응형

전체 글93

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.
자바스크립트 slice()와 splice()의 차이 1. Slice slice() 메서드는 배열의 일부를 추출하여 새로운 배열을 반환 기존 배열은 변경되지 않는다 const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.slice(1, 4); // [2, 3, 4] console.log(originalArray); // [1, 2, 3, 4, 5] (원본 배열 변화 없음) 2. splice splice는 배열을 수정하는 것! 원본 배열에서 요소를 제거하거가 추가, 교체 가능 const originalArray = [1, 2, 3, 4, 5]; const removedElements = originalArray.splice(1, 2); // removedElements: [2, 3] con.. 2023. 8. 30.
반응형