본문 바로가기

분류 전체보기70

VueJS 3 ) Composition API 를 기반으로 한 NewsWebApp VueJS 3 ) HackerRank NewsWebApp 제작을 통한 Composition API 학습 전체코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. Github 바로가기 실행화면 Vue 2 로 제작한 NewsWebApp 과 동일합니다. 학습 내용 Router - transition Vue 3 에서도 라우터 트랜지션을 활용할 수 있습니다. Vue 2 Vue2 에서는 위와 같이 transition 태그 안에 router-view 태그가 들어있는 형식이었습니다. 하지만 Vue3 부터는 v-slot 과 함께 아래와 같은 형식으로 쓰입니다. Vue 3 Router 속성 이용하기 User 페이지 구현을 위해 Route 의 params 속성을 이용해야 했습니다. Vue2 에서는 this.$r.. 2022. 3. 21.
VueJS 3 ) setup() 함수의 2 가지 인자 props, context setup() 함수의 인자 setup 함수는 props, context 두 가지 인자를 가집니다. props setup 내부의 props 는 반응성이 있고, 새로운 props 가 전달되면 업데이트 됩니다. props 는 다음과 같이 사용할 수 있습니다. export default { props: { name: String, age : Number, }, setup(props){ console.log(props.name); } }props 는 반응성을 가지고 있지만 ES6의 구조분해할당을 사용하면 props 의 반응성이 사라지기 때문에 setup 함수의 toRefs 를 사용해 반응성을 유지해야합니다. import { toRefs } from 'vue' export default{ setup(.. 2022. 3. 20.
VueJS 3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 Vue3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 같은 동작을 하는 TodoApp 을 각각 OptionsAPI 와 Composition API 를 이용해 제작했습니다. 전체 코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. README 파일을 참고해 브랜치별로 원하는 코드를 볼 수 있습니다. Github 로 이동 실행화면 코드 비교 setup 사용 Options APi > Composition API > Options API 와 다르게 Composition API 에서는 setup() 함수 내부에 data 속성과 method, lifeCycle hook, watch 를 입력합니다. 그 다음 setup() 함수내에서 생성한 함수들을 return 해.. 2022. 3. 20.
Vuejs ) TodoApp (Vue2에서 Vue3으로) TypeScript 를 적용해 Vue2, Vue3 만든 TodoApp 비교 Inflearn 강좌 "Vue.js+TypeScript 완벽가이드" (장기효) 를 참고하며 제작한 Vue2 버전의 TodoApp 을 Vue3 Options API 기반으로 다시 제작해보았습니다. 아래 링크를 통해 Github 로 접속한 뒤 README 파일의 브랜치 설명을 참고하셔서 Vue3 버전의 전체 코드를 확인하실 수 있습니다. Github 에서 확인하기 실행화면 코드 비교 TypeScript 사용 두 개의 프로젝트 모두 vue-cli 로 프로젝트를 생성하는 시점에 TypeScript를 적용해 생성했습니다. Vue 2 버전에서는 의 형태로 script 코드를 작성해야합니다. defineComponent 는 전달된 객체를 반환.. 2022. 3. 20.
JavaScript ) 간단한 click Counter 만들어보기 click counter 버튼을 누르면 1씩 증가, 감소하는 카운터 실행화면 코드 0 매번 프레임워크를 활용한 학습 및 프로젝트를 진행하다보니 javascript 에 소홀했던 것 같습니다.. 아주 기초적인 부분부터 다시 복습해볼 계획입니다. 2022. 3. 16.
JS ) 함수를 생성하는 방법 함수를 정의하는 방법 JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다. 함수 선언문 function add(x,y) { return x+y; } 함수 선언문은 함수 이름을 생략할 수 없습니다. 함수 표현식 var add = function(x,y){ return x+y; }; 함수 선언문 vs 함수 표현식 함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다. 이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다. 함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 .. 2022. 3. 13.
Chart.js ) Vue2 + Chart.js 해당 글은 vue2.^, chart.js 2.^ 버전을 바탕으로 합니다. Vue2 + Chart.js 실행화면 Chart.js 설치 npm install chart.js 를 통해 간단하게 설치할 수 있습니다. chart.js NPM 폴더 구조 plugins/ChartPlugin.js import Chart from 'chart.js' export default { install(Vue) { Vue.prototype.$_Chart = Chart; // xx.vue // this.$_Chart => 차트 접근 } } 여러 컴포넌트에서 chart library 를 import 해야 할 경우, 위처럼 임의의 js 파일에서 chart.js 를 import 한 뒤 사용할 컴포넌트에서 this.$_Ch.. 2022. 3. 1.
JS ) Sort() 정렬에서 CompareFunction 의 필요성 Sort() 배열에서 자주 쓰이는 sort() 함수는 기본적으로 정렬 순서가 유니코드의 코드 포인트를 따르게 되어 있습니다. 한 자리 수의 숫자들로 이루어진 배열 정렬 var numbers = [2,3,5,1,4]; numbers.sort(); console.log(numbers); // [1,2,3,4,5] 문자로 이루어진 배열의 정렬 var characters = ["b", "e", "s", "d", "a"]; characters.sort(); for(let x of characters){ console.log(x); // ['a','b','d','e','s'] } 따라서 문자열로 이루어진 배열이나 한 자리 수의 숫자들로 이루어진.. 2022. 2. 28.
node.js ) 비동기 패턴 해결 (3) - async/await 비동기 패턴 해결 - async/await 이전 글에서 Promise 패턴을 이용해 비동기 처리를 동기 처리처럼 처리하는 방법을 다뤘습니다. node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니 jongik.tistory.com 하지만 async/await 을 이용하면 더 보기 좋은 형태로 비동기를 처리할 수 있습니다. async/await 구조 async 와 await 는 세트로 사용합니다. test.txt async test 1 async test 2 const fs = require('fs'); con.. 2022. 2. 5.
반응형

티스토리툴바