Front-End (web)19 [Typescript] 개발 환경 만들기 typescript -> javascript 컴파일 해서 결과 확인하는 용도의 개발환경 만들기 $ npm install -g typescript typescript 먼저 설치. - test.ts - tsconfig.json 파일은 위에 2개만 만들었다. // tsconfig.json { "compilerOptions": { "outDir": "./out/", "target": "es6", "strictNullChecks": true } } tsconfig는 위와 같이 적어두었다. typescipt의 컴파일 옵션만 간단하게 설정했는데 outDir 은 컴파일 결과(.js 파일들)를 어느 폴더에 저장할지에 대한 설정이다. target 에는 컴파일 한 javascript의 버전을 명시한다. strictNullC.. 2019. 7. 24. [Typescript] 얕은 복사 // test.ts const srcMember = { name: "member" }; const destMember = srcMember; destMember.name = "change"; console.log(`srcMember : ${srcMember.name}`); console.log(`destMember : ${destMember.name}`); ts 파일 작성 srcMember라는 객체를 하나 만들고 destMember에 srcMember를 복사한뒤(=) destMember의 name만 변경 $ tsc test.ts 컴파일 // test.js const srcMember = { name: "member" }; const destMember = srcMember; destMember.name .. 2019. 7. 24. [Typescript] openAPI 문서 모델을 typescript interface로 전환하기 1. openAPI Generator Install brew install openapi-generator Generate 변환 가능한 리스트 이 중 typescript-axios로 해보자. openapi-generator generate -i -g typescript-axios -o 변환 명령어는 위와 같다. openapi-generator generate -i swaggerPetstore.yml -g typescript-axios -o ./openApi-Generator 위 명령어로 현재 폴더에 있는 swaggerPetstore.yml(swagger editor에서 예시로 주는 yml을 따로 파일로 저장한 것) 이라는 이름을 가진 openAPI yml 파일을 openApi-Generator 폴더에 t.. 2019. 7. 20. [Vue.js/Typescript] 4. Vue-router 말머리에 typescript를 적긴 했지만 이번에는 거의 vue와 관련 있는 내용이다. Vue-router 사용하기 npm install --save vue-routercs먼저 위 명령어로 vue-router 의존성을 추가함과 동시에 다운한다. /* src/components/Index/Index.html */ Colored by Color Scriptercs인덱스 컴포넌트 템플릿을 위와 같이 바꾼다.router-view는 경로에 따라 컴포넌트가 변경되는 곳이다. /* src/routes/index.ts */ import Vue from 'vue'import VueRouter from 'vue-router' // modulesimport Test1 from '../components/Test1';impo.. 2019. 3. 11. [Vue.js/Typescript] 3. Vuex - State, Getter 데이터가 특정 컴포넌트에 종속되지 않고 다른 컴포넌트에서도 사용되는 데이터라면 vuex를 사용하여 공통 저장소에 저장하는게 좋다.(부모, 자식 컴포넌트간 데이터 교환이라면 props, events로 해도 되긴한다.) Vuex 사용하기 npm i --save vuexcsvuex를 사용하려면 먼저 의존성에 vuex를 추가한다. // src/store/index.ts import Vue from "vue";import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state:{ // data }});Colored by Color Scriptercs그 후 src/store 폴더를 만들고 index.ts 파일을 만듭니다.그리고 위와 .. 2019. 1. 26. [Vue.js/Webpack] vue-html-webpack-plugin으로 임시 html 만들기 참고 : [Vue.js/Typescript/Webpack] 2. webpack-dev-server 설정 Colored by Color Scriptercs 웹팩 빌드 결과물을 확인하기 위해 index.html 이란 파일을 만들어서 빌드된 결과물을 코드로 직접 작성했다.이런 html 파일을 만들지 않고 결과물을 확인할 수 있게 해주는 플러그인이 htmlWebpackPlugin 이다. 위와 같이 직접 작성한 index.html 파일을 플러그인이 만들어준다. index.html 파일은 삭제해준다. npm install --save-dev vue-html-webpack-plugin의존성 추가. // webpack.config.js const HtmlWebpackPlugin = require('vue-html-we.. 2018. 12. 17. 이전 1 2 3 4 다음
