개발 (4) 썸네일형 리스트형 Vite 마이그레이션 시작은 개발 환경의 콜드 스타트였다. 제가 입사했을 때(24년도 11월), 해외주식 백오피스의 FE는 4명이었다. 개발 환경에서 run dev를 실행하고 첫 화면을 보기까지 30초가 소요되었고빌드에 사용되는 시간은 약 22분이었다. 더 많은 업무를 수행하기 위해선 이 시간을 단축해야 한다고 생각했고,이 시간을 아끼면 FE 개발자 4명의 시간은 물론, 팀의 시간도 아낄 수 있다고 생각했다. 토스 증권에 어시스턴트로 입사하고, 처음으로 팀에 기여한 Vite 마이그레이션에 대해 이야기하고자 한다. 결론적으로 아래 성과를 얻었다. 빨라진 콜드 스타트 🚀개발서버 구동 속도 30초 → 5초빨라진 빌드 🚀CI/CD 환경의 빌드 속도 22분 → 3분개발자의 생산성 극대화 🚀 더 빠른 주기의 배포로 팀.. ES Module의 동작과 Insight 회사에서 CRA(Create React App) 기반의 백오피스 환경을 Vite로 마이그레이션 했다. 개발 서버 시간을 35초 -> 5초빌드 시간을 22분 -> 3분 으로 단축하는 성과로 이어졌다. ES Module은 무엇일까?왜 Vite는 전 과정에서 ES Module을 사용한다고 강조할까? 그냥 import / export 다.이 글에서는 모듈의 역사에 대해 얘기하진 않을 것이다Vite 공식문서와 ESM의 관계를 설명하며 1. 왜 ESModule이 빠른지2. 더 좋은 코드를 작성하는 법 에 대해 얘기해보겠다. ES Module의 동작 방식ES Module은 3가지의 과정을 거치고, 각 과정이 비동기로 이뤄진다 쉽게 설명하자면 모듈을 분석하고, 메모리에 연결하고, 평가한다 .. Suspense, 더 나아가서 이 글에서는 Suspense, Under the Hood의 내용을 토대로 흥미로운 이야기를 작성하고자 한다. Suspense, Under the Hood선언적인 프로그래밍에 굉장히 많은 관심을 갖고 있다.Suspense는 마법처럼 로딩 상태를 외부에 위임할 수 있다는 점때문에,굉장히 많이 사용하고 있다. 어떻게 그 기능을 구현했을까?내가 좋아seongmin-kim.tistory.com 1. 조건부 Suspense 실험2. 연속된 suspense query가 waterfall을 유발하는 이유3. 컴포넌트를 분리하면 waterfall을 해소할 수 있는 이유4. useSuspenseQuery에서 enabled 지원을 중단한 이유 1. 조건부로 Suspense를 동작시키는 Condition.. Suspense, Under the Hood 선언적인 프로그래밍에 굉장히 많은 관심을 갖고 있다.Suspense는 마법처럼 로딩 상태를 외부에 위임할 수 있다는 점때문에,굉장히 많이 사용하고 있다. 어떻게 그 기능을 구현했을까?내가 좋아하는 기능이라면, 원리는 알고 사용하자 라는 궁금증과 마음가짐으로 React 내부 구조를 분석해보고자 한다. 기존의 React 코드 const [data, setData] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); useEffect(() => { fetchData() .then((result) => { setData(result); setIsLoading(f.. 이전 1 다음
