학습 내용/Front-End17 [Vue] 기존 Vue 프로젝트에 타입스크립트 도입하기 Step1: Migrate from Vue CLI to ViteVue CLI를 사용하고 있다면, TypeScript를 좀 더 안정적으로 사용하기 위해 Vite로 마이그레이션하기Vue CLI also provides TypeScript support, but is no longer recommended.If you are currently using Vue 3 + TypeScript via Vue CLI, we strongly recommend migrating over to Vite. We are also working on CLI options to enable transpile-only TS support, so that you can switch to vue-tsc for type checking... 2024. 10. 30. [Vue] Vue 3 마이그레이션 일지 (2) (2주만에 쓰는 2편) Vue3 마이그레이션 과정은 다음과 같이 크게 9가지 단계로 나눠볼 수 있다고 했었다. (1편에서..) 1. vue-cli와 Vue 버전 업그레이드하기 2. @vue/compat 설치하고 compat 모드 켜놓기 3. 컴파일 에러 고치기 4. Vue 3 주요 변경사항에 따라 코드 수정하기 5. 주요 패키지(vuex, vue-router 등) 버전 업그레이드 하기 6. 그 외 라이브러리들 버전 맞추거나 교체하기 7. @vue/compat 제거하기 8. QA 진행 9. 배포하기 1편에 이어서, Vue 3 마이그레이션 과정에서 제일 오랜 시간과 정성을 들였던 6번의 외부 패키지 버전 맞추는 작업에 대해 좀 더 끄적여보자면.... 캘린더(또는 datepicker) 라이브러리도 교체했다. .. 2023. 8. 17. [Vue] Vue 3 마이그레이션 일지 (1) 6월 30일부터 7월 31일까지 Vue 3 마이그레이션 작업을 진행했다. 평일에만 작업했고 다른 태스크도 병행했지만 그래도 매일 근무 시간의 60-70% 정도 썼던 것 같다. 혼자서 작업했다. 프로젝트 규모가 작진 않지만 엄청 큰 편도 아니어서 그런지, 어느 정도 고비(?)를 넘기고 나서는 수월하게 작업할 수 있었다. 마이그레이션을 진행한 이유는 올해 말에 Vue 2 지원이 끝난다길래.. 구식 기술에 안분지족하면서 살 것이 아니라면 아니면 언젠가는 바꿔야 할텐데 나중에 바꾸려고 하면 더 어지러울 거 같기도 하고, 비교적 여유있는 시기이기도 해서 진행하게 되었다. 이 글 쓰는 이유는 개인적으로 기록해두기 위한 게 크지만.. 그 외에도, 혹시 Vue 3로 마이그레이션 하실 분들 계시면.. 이 글 보고 조금이.. 2023. 8. 4. 개발 서버에서 HTTPS 사용하기 (React, Vite) https://web.dev/how-to-use-local-https/ 로컬 개발에 HTTPS를 사용하는 방법 web.dev 👆 그냥 여기 나와있는대로 따라하면 쉽고 빠르게 할 수 있음. ★★★ Vite 쓰는 경우엔 여기서 한 단계 더 필요함. 프로젝트에 vite-plugin-mkcert 이거 설치하고 vite config의 plugins 목록에 mkcert() 추가 (윈도우에서는 package.json의 개발 서버 시작 스크립트에서 HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem 2023. 2. 2. vite + yarn berry(pnp) 사용할 때 node_modules가 생긴다!? TL;DR vite와 yarn berry(pnp)를 사용하는 프로젝트에서 dev server 실행 시 node_modules가 생성되는 것을 원치 않는다면: 1) vite.config.ts의 config 필드 중 cacheDir 경로 따로 지정해주기 2) yarn.lock 파일에서 vite의 dependencies 목록 중 esbuild의 버전이 0.15.15보다 작다면 0.15.15로 수정 후 yarn install하기 3) node_modules 삭제 후 dev server 실행하기 일전에 패키지 매니저 npm에서 yarn berry(zero install)로 바꾸기 포스팅에서 node_modules가 좀비처럼 되살아나는 현상을 막기 위해 이것저것 시도해 본 상황에 대해 기록했었다. 당시에 명확한 원.. 2023. 1. 31. 패키지 매니저 npm에서 yarn berry(zero install)로 바꾸기 진행 중이던 프로젝트(cra로 생성했음..)에서 기존에는 패키지 매니저로 npm을 사용하고 있었다. yarn berry zero install 직접 써보고 싶어서 다음과 같은 과정을 거쳐 마이그레이션을 진행했다. yarn 설치 및 재설치 yarn 이미 설치 되어있어서 다음 단계로 바로 넘어가서 yarn 명령어 쳤는데, 다음과 같이 Cannot find module '.../yarn-3.3.1.cjs' 어쩌고 하면서 에러 메시지 뜸. yarn 제거하고 재설치했다. 제거하는 명령어는 어떻게 설치했는지에 따라 다르므로 How Do I Uninstall Yarn(stack overflow) 참고 설치 명령어 npm install --global yarn 프로젝트 디렉토리로 이동하여 yarn 명령어 입력하기 cd.. 2023. 1. 24. 이전 1 2 3 다음
