개발 (5) 썸네일형 리스트형 React에서 의존성 주입하기 회사에서 새로운 페이지 구현을 맡았다.책임감이 막중했다 요구사항 분석부터 설계, 구현까지의 과정을 소개하고자 한다. 요구사항1. 계산기를 구현해주세요.2. 생성, 갱신 화면이 존재해요.3. 생성은 POST /api/create를, 갱신은 POST /api/update를 요청해요. 생성, 갱신 화면의 UI는 동일했고, 사용되는 데이터와 API가 다르다고 판단했다. 설계 목표1. 산탄총 수술을 방지하자 (중요)2. 컴포넌트 재활용성을 높이자3. 해당 기능과 연관된 상품을 출시할 것이므로, 연결될 수도 있겠다. 변경에 유연한 구조를 가지자 설계 결과 1. 컴파운드 컴포넌트 패턴자유로운 컴포넌트 주입유연하고, 재사용성이 높으며 선언적인 설계 방식 생성 (/create) 새로운 계산.. 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 다음
