전체 글 (14) 썸네일형 리스트형 LG OLED 모니터 신상 https://m.blog.naver.com/PostView.naver?blogId=official_hjsystem&logNo=224292616745&proxyReferer=https:%2F%2Fm.smartstore.naver.com%2Fhjsystem%2Fshoppingstory%2Fdetail%3Fid%3D5002768043&trackingCode=naver_shopping_catalog_review Vue CLI + Babel 기반 Vue2 프로젝트, Vue3로 전환하기 📝 회사에서 진행 중인 Vue2 + Vue CLI + Babel 환경 프로젝트를 Vue3로 점진적으로 옮겨가며 겪은 시행착오와 해결 방법을 공유합니다. package.json 변경 사항 👉 설명@vue/composition-api: Vue3에서는 Composition API가 기본 제공 → 불필요vue-template-compiler: Vue2 전용 SFC 컴파일러 → 제거vue-fragment: Vue2 다중 루트 지원용 라이브러리 (Vue3 기본 제공)vue: Vue3 설치🟦 main.ts 변경 포인트1. 앱 생성 방식Vue2new Vue({ render: h => h(App),}).$mount('#app')Vue3const app = createApp(App)app.mount('#app') .. Vue 2.6에서 Vue Query Devtools 연동 도전기 회사에서 진행하는 Vue2 기반 프로젝트에서는 API 통신을 기본적으로 axios로 처리하고 있었다.❌ 기존 axios 통신의 한계상태 관리 미흡: API 호출 결과를 Vuex나 로컬 상태로 직접 관리해야 해서 로딩/에러/성공 상태를 명시적으로 처리하는 반복적인 코드가 많았다.서로 다른 API 간 연계 어려움: 예를 들어 "등록 성공 시 목록 자동 갱신" 과 같은 API 간 상호작용은 별도로 watch, emit, 또는 강제 리프레시 로직을 작성해야 했다.불필요한 재요청: 동일한 API 요청을 여러 컴포넌트에서 수행할 경우 중복 요청이 발생했고, 이를 캐싱하거나 취소하는 로직은 매번 수작업으로 구현해야 했다.공통 로직 중복: try/catch, loading, errorMessage 처리 코드가 API마.. responseType 500 에러가 발생할 때 API 응답으로 {code: string, message: string}을 받고 있었다.그래서 인터셉터에서 response.data.message로 공통 에러 메시지를 처리했는데,엑셀 다운로드 API에서는 undefined가 나왔다. 엑셀 다운로드 API는 responseType을 blob으로 설정하기 때문에 응답이 blob 형태로 온다.따라서 메시지를 얻기 위해서는 blob 데이터를 텍스트로 변환한 후 JSON 파싱이 필요하다. let errorMessage = '관리자에게 문의하세요'; if (response.request.responseType === 'blob') { const errorText = await response.data.tex.. Optimistic Updates requestAnimationFrame mui 탭 컴포넌트를 사용하면서 탭이 변경될 때마다 컴포넌트가 렌더링 되는 과정에서 스크롤을 최하단으로 내리고 싶을 때 사용한다. 스크롤 애니메이션등, 애니메이션에 최적화된 함수이다. useEffect(() => { if (componentEndRef.current) { const scroll = () => { componentEndRef.current?.scrollIntoView({behavior: 'smooth'}); }; requestAnimationFrame(() => { requestAnimationFrame(scroll); }); } }, []); return ( ... 여러가지 컴포넌트 ); 렌더링 되는 컴포넌트보다 아래쪽에 ref를 두면 된다. stretch alignItems: stretch 를 써서 모든 자식 컴포넌트들이 동일한 높이를 갖게함. mui helperText 쓸 때, 요소 2개가 한 줄에 있게 배치했을 때 Recoil이란? Recoil이란 무엇일까? Recoil을 사용하기 위해서는 몇 가지 중요한 개념을 알아야합니다. 1) Atoms 2) Selectors 3) Hooks 먼저 이 세 가지 개념에 대해 간단히 알아봅시다! Atoms Recoil의 기본 단위로, 상태의 일부를 나타냅니다. 각 Atoms는 고유한 키를 가지며, 어떤 컴포넌트에서든 사용할 수 있는 전역 상태를 관리합니다. Selectors Selectors는 파생된 상태(derived state)를 나타냅니다. 기본 상태(Atom)를 입력으로 받아, 이를 변환시켜 새로운 값을 생성합니다. Hooks Recoil은 React의 hook API를 사용하여 상태를 컴포넌트에 연결합니다. `useRecoilState`, `useRecoilValue`등의 훅을 통해 At.. 이전 1 2 다음
