TypeScript 변수 선언 시 주의점 let name: string; // name이란 변수는 string의 값만 들어갈 수 있다 // let name = 'john'; //typeScript에선 변수의 선언과 초기화를 한 줄에 작성하면 자동으로 변수타입을 설정한다. name = 500; //name이란 변수가 이미 string type으로 설정되어 있어 error // let name; name = 'john'; name = 300; //위의 반례로 변수의 선언을 단독으로 한다면 any타입으로 설정된다. // const name; //error //const는 초기화를 해 주어야 한다. 2022. 5. 22. TypeScript를 쓰는 이유 1. 타입을 명시해 줌으로써 코드파악에 도움이 되고 에러를 줄임 let name: string = 'Jone'; typescript는 위 코드처럼 name이란 변수를 선언할때 타입을 설정해줄 수 있다. 저렇게 설정해 주는 것 하나만으로 - name이란 변수에 숫자가 들어간다면 컴파일시간에 버그로써 잡아줄 수 도 있고, - 협업에서도 변수에 대한 정보를 하나 더 들고 가는 셈(자기가 짠 코드도 며칠뒤면 까먹음) name은 당연히 string아니냐 라고 할수도 있어서 예시코드를 바꾸면 let userCode: number = 15 let userCode: string = 'A_361' userCode가 순전히 숫자로만 이루어질 수 도 있고 알파벳과 혼용해서 만들 수 도 있으니 타입을 명시해주면 확실히 도움이.. 2022. 5. 22. [vue] plugin 제작/실행 본 포스팅은 vue3를 기준으로 작성하였습니다. vue에서 전역함수를 사용하기 위한 방법 중 하나로 plugin이 있다. 짧게 사용법을 정리 먼저 플로그인 파일을 작성한다. //plugin/add.js export default { install: (app) => { // inject a globally available $translate() method app.config.globalProperties.$add = (key,key2) => { // retrieve a nested property in `options` // using `key` as the path return key+key2 } } } 나는 $add라는 함수를 작성하였고 인자를 두 가지 받아 더해 반환하는 간단한 함수이다. 이 플러.. 2022. 5. 3. [vue] 비동기 컴퍼넌트 lazy loading | _defineAsyncComponent() LAZY LOADING spa의 단점 중 하나는 처음 웹에 진입 시 번들해놓은 모든 리소스를 한번에 받아 초기 진입속도가 느리다는 점이다. 개발자도구 - network 탭을 보면 chunk-vendors란 메뉴가 있는데, 이 chunk-vendors가 맨 처음 리소스를 받는 것이고, lazy loading는 이 chunk-vendors의 용량을 컴퍼넌트 단위로 나누어 다른 화면에서 리소스를 받도록합니다. component: () => import(/*webpackChunkName: "about" */ '../views/About.vue') 위 코드처럼 작성할 시 별도의 chunk 파일을 생성하여 실제 이 라우트를 방문했을 때 리소스를 로드하게 됨 다만 lazy loading를 남발할 시 spa.. 2022. 4. 14. [vue] 클래스 바인딩하는 여러 방법 공식문서에서 클래스 바인딩하는 여러 방법이 있어 정리하기 위한 포스트 https://vuejs.org/guide/essentials/class-and-style.html Class and Style Bindings | Vue.js vuejs.org 1. 스타일을 data에 string으로 미리 선언 후 사용 이후 activeClass의 값을 바꿔 동적으로 클래스를 바꿀 수 있다. 2. boolean 데이터를 이용해 클래스를 동적으로 부여 ㄻㅇㄴ로ㅓㅁㅇㄴ론ㅇㅁ롬러ㅏ 별건 없음. isActive의 값이 ture이니 {active: isActive}문이 일차적으로 선택이되고, isActive가 true이니 active 클래스가 주어진다. 2022. 4. 12. 차세대 빌드 도구 vite (vue) Webpack의 번들링과정이 길어 짜증날때 사용할 수 있는 빌드도구 vite를 써봄 (react에도 사용 가능) 우리는 vue를 사용할때 기본적으로 Webpack을 이용하여 빌드를한다. vue create '프로젝트명' 위의 명령어로 vue project를 생성 시, node_modules폴더나 package-lock.json 에 웹팩관련 모듈,설정들이 작성되어있어 vue는 웹팩을 기본으로 사용하는구나 알 수 있다. 다만 프로젝트의 크기가 커지면 커질수록 빌드할 시에 시간이 너무 오래걸린다. 나같은 경우에는 프로젝트 생성만 10초쯤 걸리는듯. 이 대기시간이 짧은 빌드도구 vite가 있다해서 사용 해보기로 함 npm install -g vite npm init vite@latest 먼저 vite를 설치 후.. 2022. 4. 7. 이전 1 ··· 6 7 8 9 10 11 12 ··· 15 다음
