[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로 마이그레이션 하실 분들 계시면.. 이 글 보고 조금이..
개발 서버에서 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..
[Next.js] Next.js 13 - Data Fetching, Server Components
2023. 1. 20. 17:12
dev-log/Front-End
Data Fetching 13 이전까지 사용되었던 getServerSideProps와 getStaticProps는 이제 잊어라!!..는 아니고.. 13부터 도입된 방법이 앞으로 활발하게 사용되더라도, 레거시 코드에는 이 둘이 남아있을테니 아예 잊어버리는 건 안될 것 같다. (참고: [Next.js] Next.js의 프리 렌더링(pre-rendering) 옵션 3가지 / SSG, SSR, ISR) 이 둘은 이름도 뭔가 장황한 느낌이고, 개인적으로는 어떤 상황에 어떤 걸 써야할지 딱 떠오르지가 않았다. 13부터는 data fetching을 할 때 이 둘 대신 fetch API를 사용하면 된다! getServerSideProps와 getStaticProps와 비슷하게 구현하려면 fetch 메서드의 두 번째 인..
intermock을 사용하여 mock data 만들기
2022. 7. 10. 00:26
dev-log/Front-End
intermock 사용 방법이 아직 잘 나와있지 않아서 소스코드 보면서 츄라이츄라이 해본 결과입니다. 엉성하더라도 참고할 것이 아예 없는 것보다는 낫...낫지 않을까..? 싶어서 정리해보았습니다. ㅎㅎ intermock 사용 방법을 찾고 계신 분께 부디 제 코드가 조금이라도 도움이 되길 바라며.. 설치 필요 모듈 intermock : TS interface를 이용하여 mock data를 생성할 수 있게 도와주는 모듈 swagger-typescript : intermock을 위한 TS interface를 생성하고 이를 단일 파일에 모아두기 위해 사용 인터페이스를 생성해주는 라이브러리라면 어떤 것이든 무관하나, 인터페이스들을 단일 파일이 아니라 모델별로 생성해주는 경우에는 intermock 사용 전에 각각의..
[Next.js] Next.js의 프리 렌더링(pre-rendering) 옵션 3가지 / SSG, SSR, ISR
2022. 6. 1. 16:33
dev-log/Front-End
Next.js의 프리 렌더링 옵션으로는 잘 알려진 SSG와 SSR 두 가지 외에도 ISR라고 불리는 한 가지 방식이 더 존재한다. 이 세 가지 프리 렌더링 방식의 특징과 차이점에 대해 알아보자. 참고로 하나의 애플리케이션에서 하나의 방식만 사용해야 하는 것은 아니며, 필요에 따라 어떤 페이지에선 SSG 방식을 사용하고 나머지 페이지에선 SSR 방식을 사용하는 것도 가능하다. 또한 이 방식들과 클라이언트 사이드 렌더링 방식을 혼합하여 사용하는 것도 가능하다. (즉 어떤 페이지의 특정 부분은 전적으로 클라이언트 사이드에서 렌더링 되도록 하는 방식) ❓Pre-rendering이란? Next.js에선 기본적으로 모든 페이지를 프리 렌더링한다. 즉 HTML이 클라이언트 사이드에서 자바스크립트를 통해 생성이 되는 ..