[Vue] 기존 Vue 프로젝트에 타입스크립트 도입하기
2024. 10. 30. 00:58
dev-log/Front-End
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...
23.12.31
2023. 12. 31. 23:58
끄적끄적/일상
올해 1월 1일에 글 썼던 게 일상 카테고리의 가장 최근글이라니.. 2023년에는 정말 블로그에 신경을 너무 안 쓴 것 같다.. 올해는 크게 심각하게 다가오거나 기쁘게 다가오거나 했던 일들이 별로 없었다. 그냥 1년 내내 전반적으로 생각이 많았고 그래서 내면에 신경을 많이 쓰느라 외부 자극?에는 무뎠던 것 같다. (애초에 '큰 일'이라고 할만한 일이 거의 없기도 했다.) 1월 1일에 썼던 글을 보니 2022년에는 생각을 잘 안 하고 살았던 것 같아서 아쉬워했던 것 같은데 올해는 원 없이 생각을 많이 했고 여전히 그러고 있다. 작년에는 사색에 잠기는 것을 괜히 어색해했다. 작년에는 책을 많이 안 읽은 것도 아쉬워했다. 올해도 제대로 읽은 책이 솔직히 달과 식스펜스와 구의 증명 밖에 없고 나머지는 생각나면 ..
[Vue] Vue 3 마이그레이션 일지 (2)
2023. 8. 17. 02:20
dev-log/Front-End
(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) 라이브러리도 교체했다. ..
[Vue] Vue 3 마이그레이션 일지 (1)
2023. 8. 4. 00:42
dev-log/Front-End
6월 30일부터 7월 31일까지 Vue 3 마이그레이션 작업을 진행했다. 평일에만 작업했고 다른 태스크도 병행했지만 그래도 매일 근무 시간의 60-70% 정도 썼던 것 같다. 혼자서 작업했다. 프로젝트 규모가 작진 않지만 엄청 큰 편도 아니어서 그런지, 어느 정도 고비(?)를 넘기고 나서는 수월하게 작업할 수 있었다. 마이그레이션을 진행한 이유는 올해 말에 Vue 2 지원이 끝난다길래.. 구식 기술에 안분지족하면서 살 것이 아니라면 아니면 언젠가는 바꿔야 할텐데 나중에 바꾸려고 하면 더 어지러울 거 같기도 하고, 비교적 여유있는 시기이기도 해서 진행하게 되었다. 이 글 쓰는 이유는 개인적으로 기록해두기 위한 게 크지만.. 그 외에도, 혹시 Vue 3로 마이그레이션 하실 분들 계시면.. 이 글 보고 조금이..
vite + yarn berry + react 프로젝트를 aws amplify로 배포하며..
2023. 2. 20. 02:36
dev-log/Project
vite + yarn berry + react 프로젝트를 aws amplify로 배포하는 과정에서 일어난 몇몇 슬플 뻔한 사건을 기록해보려고 한다. 몇 시간동안 고생했는데 미래의 나는 덜 고생하길 바라면서.. 아 그 전에 amplify 이용 후기부터 적어보자면, 이번에 처음 써봤는데 ec2에 비해서 훠어얼씬 간단하고 배포 자동화도 디폴트로 지원해줘서 너무 편리했다. 편리한만큼 ec2로 배포하는 것보다 자유도가 떨어진다고 하는데 지금 프로젝트에선 amplify에서 제공해주는 기능들로도 충분해서 딱히 답답하진 않았다. 배포할 때 참고했던 블로그: React AWS amplify에 배포 React AWS amplify에 배포 React로 만들어진 프로젝트를 AWS amplify를 통해서 배포해보겠습니다.이해를..
개발 서버에서 HTTPS 사용하기 (React, Vite)
2023. 2. 2. 02:09
dev-log/Front-End
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
vite + yarn berry(pnp) 사용할 때 node_modules가 생긴다!?
2023. 1. 31. 04:38
dev-log/Front-End
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가 좀비처럼 되살아나는 현상을 막기 위해 이것저것 시도해 본 상황에 대해 기록했었다. 당시에 명확한 원..
패키지 매니저 npm에서 yarn berry(zero install)로 바꾸기
2023. 1. 24. 19:51
dev-log/Front-End
진행 중이던 프로젝트(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..