Try   HackMD

5. 점진적인 타입스크립트 적용 방식 1단계 - 라우터, HOC, 유틸 함수

tags: 지호, Vue.js + TypeScript 완벽 가이드

1. 뷰 프로젝트에 타입스크립트를 점진적으로 적용하는 방법

  • Vue+Typescript 프로젝트 생성
  • 기존 서비스 코드와 라이브러리를 새 프로젝트에 이동
  • 기본적인 빌드 에러 해결
  • 타입스크립트의 혜택을 볼 수 있는 주요 파일들 위주로 .js -> .ts로 변환하며 적용

2. HOC 파일에 TS 적용 및 라우터 네비게이션 함수 로직 개선

vue-router

  • Route
    NavigarionGuardNext<Vue>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

async/await 사용 및 next 이용

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Last changed by 
 
LemonMilk
Frontend
0
104

Read more

임시 정리

&#xBB38;&#xC81C;&#xC810;&#xB4E4; &#xC911;&#xBCF5;&#xB41C; Observable &#xD638;&#xCD9C; -> &#xC774;&#xB97C; &#xB9C9;&#xAE30;&#xC704;&#xD574; Subject&#xB97C; &#xC368;&#xC57C;&#xD55C;&#xB2E4;. Subject Cold Observable &#xC9C0;&#xAE08;&#xAE4C;&#xC9C0; &#xC6B0;&#xB9AC;&#xAC00; &#xC0AC;&#xC6A9;&#xD588;&#xB358; observable&#xC774;&#xB2E4;.

Jul 27, 2022
7. 점진적인 타입스크립트 적용 방식 3단계 - Vuex 스토어 타입 정의

1. &#xC2A4;&#xD1A0;&#xC5B4;&#xC758; &#xD0C0;&#xC785; &#xCD94;&#xB860; &#xBB38;&#xC81C; 2&#xAC1C;&#xC758; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xD569;&#xCE68; &#xD0C0;&#xC785; &#xC2A4;&#xD06C;&#xB9BD;&#xD2B8; &#xC120;&#xC5B8; &#xBCD1;&#xD569;: https://www.typescriptlang.org/docs/handbook/declaration-merging.html node_modules/vuex/vue.d.ts declare module "vue/types/options" { interface ComponentOptions<V extends Vue> { store?: Store<any>;

Apr 20, 2022
Vue.js 완벽 가이드 - 라우팅 고도화

Dynamic Routing Next &#xC5D0;&#xC11C; params &#xB85C; &#xB118;&#xAE30;&#xB294; &#xB85C;&#xC9C1; &#xAD6C;&#xD604;. <template> <div> <user-profile :info="userInfo"> <div slot="username">{{ userInfo.id }}</div> <span slot="time">{{ &apos;Joined &apos; + userInfo.created }}, </span> <span slot="karma">{{ userInfo.karma }}</span> </user-profile>

Apr 20, 2022
6. 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수

1. &#xC2A4;&#xD1A0;&#xC5B4; &#xC0C1;&#xD0DC; &#xAD00;&#xB9AC; &#xD0C0;&#xC785;&#xC2A4;&#xD06C;&#xB9BD;&#xD2B8; &#xC7A5;&#xC810; api &#xD638;&#xCD9C; &#xB370;&#xC774;&#xD130; &#xC2A4;&#xD399; &#xC815;&#xC758; &#xC2A4;&#xD1A0;&#xC5B4;&#xB97C; &#xC4F0;&#xC9C0; &#xC54A;&#xC544;&#xB3C4; &#xB418;&#xB294; &#xC0C1;&#xD669; &#xB370;&#xC774;&#xD130;&#xB97C; &#xBC1B;&#xC544;&#xC640;&#xC11C; &#xD558;&#xC704; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xD558;&#xB098;&#xC5D0; &#xB118;&#xACA8;&#xC8FC;&#xB294; &#xAC04;&#xB2E8;&#xD55C; &#xC0C1;&#xD669;

Apr 19, 2022
Read more from LemonMilk
Published on HackMD