| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- 클린코드
- Aria
- context.api
- react
- JavaScript
- TypeScript
- provider 패턴
- CRA
- 에세이
- Web
- 프론트엔드
- Function Region
- CustomHook
- frontend
- sharedworker
- 티스토리챌린지
- 아키텍처
- MFA
- 회고
- 오블완
- MicroFrontEnd
- 접근성
- vite
- 리액트
- 웹워커
- Webworker
- 이것저것
- 리팩토링
- AI
- 자바스크립트
- Today
- Total
목록frontend (32)
Lighthouse of FE beginner
기대 효과더 이상 유지보수 되지 않는 CRAVite는 ESModule을 활용하기 때문에 로컬에서 개발 서버를 실행 시 번들링 없이 빠르게 시작이 가능 (대기시간 감소)빠른 소스 코드 갱신CRA는 개발 시 소스 코드를 변경하면 모든 파일을 다시 번들링을 수행하기 때문에 페이지가 리로드가 됨.Vite는 ESM을 이용해 수정된 모듈만 교체하기 때문에 코드 수정이 갱신 시간에 영향을 미치지 않음. 또한 HTTP 헤더를 활용해 모듈을 캐싱하여 페이지의 로드 속도를 높여줌.빌드 시간 감소개발서버, 프로덕션, 빌드에 필요한 옵션을 별도의 리소스 투입 없이 config 파일로 설정이 가능해 개발 비용 감소 Vite 마이그레이션 전 고려해야 할 사항Node.js 버전 (최소 18버전을 요구)Eject 하여 설정한 부분들..
History회사에서 현재 진행중인 프로젝트 프론트엔드의 환경은 CRA 템플릿을 활용한 SPA 프로젝트입니다.CRA의 유지보수가 중단되고 Vite라는 더 좋은 개발툴이 있기에 해당 툴로 개발 환경과 번들러를 Rollup으로 마이그레이션 할 계획을 잡았습니다. 프로젝트가 시작되고 유지보수까지 굉장히 오랜 시간이 흘렀기에 한번에 딸깍 모든 것을 교체할 수 없었습니다. 본격적으로 마이그레이션 하기 전 어떤 문제가 있을지 테스트를 해봤고 도출한 여러 문제 중 react-data-export 라는 라이브러리에서 문제가 발생한다는 것을 알게 됐습니다. 그래서 이번 이슈를 통해 해당 라이브러리를 사용하는 엑셀 다운로드를 exceljs를 활용해 엑셀을 다운로드 받는 것으로 리팩토링을 결정했고 리팩토링 한 과정을 소개하..