지난 포스팅에서 CRA에서 Vite로 마이그레이션 하는 방법을 다루었다.이번 포스팅에서는 마이그레이션 하는 과정에서 발생한 문제와 이를 해결한 방법에 대해 소개하고자 한다. 01. SVG 컴포넌트 불러오기 실패환경 설정을 완료하고 npm run dev로 프로젝트를 수행한 결과, 아무 화면 출력되지 않는 문제가 발생하였다.개발자 도구에서 Network에는 필요한 파일들을 불러오고는 있었지만, 화면에는 아무것도 출력되지 않았다.처음에 src/router 경로에 있는 라우터 파일의 경로가 잘못되었나 생각해서 같은 경로에 다른 파일을 생성해 Hello World와 같이 간단한 텍스트를 출력하도록 테스트 해보았는데, 텍스트는 정상적으로 출력되었다. 따라서 경로 문제는 아니었다. 이때 개발자 도구의 console에..
지금까지 리액트 프로젝트를 진행하면서 대부분 CRA로 생성하였다.이전 프로젝트들의 크기 및 파일 개수는 상대적으로 많지 않았지만 1년째 진행중인 프로젝트는 파일 개수가 점점 많아지면서 규모가 커졌다.Github Actions로 CI/CD로 설정된 상태에서 merge 될 때마다 빌드가 되고 있는 상태인데, CRA로 프로젝트를 생성하여서 규모가 커질수록 빌드 속도가 매우 오래걸리는 단점을 가졌다.규모가 지금보다 크기 전까지는 1분전으로 빌드되던 프로젝트였다.하지만 지금 현재는 거의 3분 가까이 시간이 소요되는 것을 확인할 수 있었다.Vite가 CRA에 비해 빌드 속도가 압도적으로 빠르다는 것을 알고 배포까지 완료하여 업데이트 중인 프로젝트를 Vite로 마이그레이션 해보기로 결정하였다. " 해당 프로젝트는 C..
Front-End/React JS 2024. 9. 17. 23:29
지난 포스팅에서 CRA에서 Vite로 마이그레이션 하는 방법을 다루었다.이번 포스팅에서는 마이그레이션 하는 과정에서 발생한 문제와 이를 해결한 방법에 대해 소개하고자 한다. 01. SVG 컴포넌트 불러오기 실패환경 설정을 완료하고 npm run dev로 프로젝트를 수행한 결과, 아무 화면 출력되지 않는 문제가 발생하였다.개발자 도구에서 Network에는 필요한 파일들을 불러오고는 있었지만, 화면에는 아무것도 출력되지 않았다.처음에 src/router 경로에 있는 라우터 파일의 경로가 잘못되었나 생각해서 같은 경로에 다른 파일을 생성해 Hello World와 같이 간단한 텍스트를 출력하도록 테스트 해보았는데, 텍스트는 정상적으로 출력되었다. 따라서 경로 문제는 아니었다. 이때 개발자 도구의 console에..
Front-End/React JS 2024. 9. 11. 22:50
지금까지 리액트 프로젝트를 진행하면서 대부분 CRA로 생성하였다.이전 프로젝트들의 크기 및 파일 개수는 상대적으로 많지 않았지만 1년째 진행중인 프로젝트는 파일 개수가 점점 많아지면서 규모가 커졌다.Github Actions로 CI/CD로 설정된 상태에서 merge 될 때마다 빌드가 되고 있는 상태인데, CRA로 프로젝트를 생성하여서 규모가 커질수록 빌드 속도가 매우 오래걸리는 단점을 가졌다.규모가 지금보다 크기 전까지는 1분전으로 빌드되던 프로젝트였다.하지만 지금 현재는 거의 3분 가까이 시간이 소요되는 것을 확인할 수 있었다.Vite가 CRA에 비해 빌드 속도가 압도적으로 빠르다는 것을 알고 배포까지 완료하여 업데이트 중인 프로젝트를 Vite로 마이그레이션 해보기로 결정하였다. " 해당 프로젝트는 C..