Client (25) 썸네일형 리스트형 wrapper로 constant 관리하기 레거시 프로젝트 루트에 config.json 파일을 두고 api로 호출해서 사용> 추후 값이 추가되거나, 변경 될 경우 json 파일만 수정해서 배포할 수 있도록 하려는 의도> 플랫폼 별로 프로젝트 서버가 따로 돌아가고 있는데, 동일한 값을 사용하고 있었기 때문에 데이터 변경 시 모든 파일을 수정해야 하는 상황, 한 벌로 관리하고 싶었음 문제점> 관리가 제대로 안됨, 결국 프로젝트마다 별개의 config 파일을 사용하고 있었음> key 하드코딩을 제거하기 위해 별도의 constant를 새로 정의해서 추가적인 관리 비용이 발생됨 레거시 데이터 예시// config.json{ "SOME_CODE": { "01": "Title 01", "02": "Title 02", ... }, "SOM.. Vue 프로젝트에 React 도킹하기 (script 방식) Module Federation 기능을 사용해서 레거시 Vue2 프로젝트에 React 를 띄운 후 점진적 마이그레이션을 하려던 시도는, 레거시 프로젝트의 webpack이 4버전인 관계로 무산되었다.webpack 버전 업그레이드로 인한 사이드이펙트를 고려하는 대신, Module Federation 을 사용하는 대신 script 를 mount/unmount 하는 방식으로 진행하기로 했는데, 다헹히 큰 틀에서의 사용성 차이는 없어 비교적 수월하게 테스트가 완료됐다.이와 함께 MF를 사용하지 않는다면, 굳이 webpack을 사용할 필요가 없어져 Vite를 사용하는 방안을 고려했다.현재 프로젝트는 SSR 사용 할 필요 없음, SEO 고려 할 필요 없음 > Next.js 등 프레임워크 사용 할 필요 없음 (무거움).. Modul Federation 으로 Vue2 > React 마이그레이션 하기 기존 프로젝트: vue2host: legacy vue2 projectremote: new react18 왜 리액트18인가 ? ssr이 필요 없는 내부 프로젝트안정성 및 레퍼런스 검증이 충분함초반 마이그레이션 베이스 잡은 후 18에서 19로 업데이트 고려. 우선은 MF 안정성을 우선으로 react 프로젝트 생성npm init -y // package.json 생성npm install react@18.3 react-dom@18.3 // react 설치// webpack 필수 패키지 설치npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react.. [Vue3] [plugin:vite:css] [sass] Undefined variable. 언젠가는 publishing도 공부를 해보겠다고 다짐하고 드디어! css 작업을 해보고자 새로 프로젝트를 생성해서 작업을 해보려는 찰나, 시작과 동시에 이런 저런 error를 마주했다. 우선은 이 에러들을 헤쳐나가는 과정을 차근차근 풀어보고자 한다. 프로젝트 스펙: vue3 / typescript / vite / scss 프로젝트는 우선 vue-cli의 npm init vue@latest 명령을 통해 구축했다. 뭐가 뭔지는 모르겠지만 이것저것 대충 입맛대로 설정해줬다. 이런 저런 기본 설정들을 마친 후 호기롭게 scss 파일을 생성했다. color 변수들을 모아놓은 variables.scss 파일. 여기저기 보니 main.ts(js) 파일에 import를 시켜주면 사용할 수 있다고 하여 import 처리.. [Vue] Nuxt fetch의 서버 사이드 호출이 안되는 건에 대하여 오랜만에 vue 프로젝트를 관리 할 일이 생겼는데, nuxt를 사용해 서버를 돌리고 있어 최근 nuxt를 조금 보고 있는 상태이다. 조금 특이한 구조로 되어있어서 (vue를 사용하는데 SPA 기능을 1도 활용하고 있지 않다.) 분석을 열심히 하는 중인데, 대부분의 호출 함수가 asyncData() 로 이루어져 있고, 이 때문에 코드를 수정할 때마다 hot reloading이 되면서 데이터를 불러오지 못하는 오류가 발생하고 있다(...). 개발자 입장에서 불편하기도 하고, 구조를 조금 개선할 수 있지 않을까 싶어 작은 것 부터 해보자는 마음으로 진행하려 했다. asyncData는 only server side 이고 처음 페이지(브라우저)가 생성되는 시점에만 호출되는 반면, fetch의 경우 페이지 load.. [React] forwardRef forwardRef와 함수를 component 형으로 빼기 서버 언어들의 class 처럼 상속 등을 통해 사용할 함수들을 캡슐화 하고 싶었다. react 문법 자체가 class형에서 함수형으로 전환되고, 보편적으로 사용되는 추세이다 보니 함수형 component라는 틀 내에서 해결하려 했는데, class 내에서는 jotai를 사용하지 못하다 보니 (hook 특성 상) 원하는 처리를 하려 하면 parameter로 대상 atom 데이터를 전부 넘겨줘야 하는 상황이 발생. 그렇게 헤메다가 발견한게 fowardRef였는데, 결과적으로는 내가 원하던 작업은 아니었고. 희망을 가지고 하다가 내가 아무것도 몰라서 헛되게 희망을 가졌었던 것을 깨닫고, 원리라도 정리해두려 한다. 내가 원했던 것은, 자식 컴포넌트 내의 .. [Vue] 외부 js에서 vue function() 호출(3) 오랜만에 다시 포스팅을 하는데, 긴 숙원인 외부 js 파일에서 vue 함수를 호출해야 하는 상황에서의 해결법을 작성해보려 한다. 이전 포스팅들에서도 몇가지 방법으로 시도를 했었는데, 이번 포스팅은 첫 번째 글의 방법을 보완한 방법으로, 참고를 원할 경우 첫 번째 글을 보고 오는것도 괜찮을 것 같다. [vue] 외부 js에서 vue fucntion() 호출 vue 프레임 워크를 사용해서 프로젝트를 진행하다 보니, api 연동 등으로 인해 vue 파일 내 스크립트 코드가 아니라 .js 파일을 작성해서 개발을 진행해야 하는 경우가 생겼는데, js 파일 내 함수에 asang-developer.tistory.com [Vue] 외부 js에서 vue 함수 호출(2) 이전에 외부 js에서 vue 함수 호출 관련 포스팅.. [Vue] Mixin 과 Plugin 일전에 typescript 든 javascript 든 vue의 mixin을 사용하는데에 있어서 나름 여러가지 시도랑 시행착오를 겪었는데, vue 공식 사이트나 다른 잘 하시는 분들 블로그에도 나와있듯이 mixin과 plugin 의 사용 용도가 조금씩 다르다. 지금도 자세히 설명은 못 하겠으나, 개인적인 기록을 위해 또 짬이 날 때 게시글로 기록해두기로 한다. 일단 mixin 은 공식 문서에서는 아래와 같이 설명한다 Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin.. 이전 1 2 3 4 다음
