Study56 React ) Class 형 보다 Hook(함수) 형을 권장하는 이유 React 공식 문서에서는 Class 보다 Hook 을 사용할 것을 권장하고 있습니다. 학습 동기부여를 위해(?) 왜 그런지 살펴보기로 했습니다. Hook 이 해결한 문제들 1. 컴포넌트 사이에서 상태 로직을 재사용하기가 어렵다. React 는 컴포넌트간에 재사용 가능한 로직을 연결하는 방법을 제공하지 않습니다. render props 나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결할 수 있습니다. 하지만 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 합니다. Hook 을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있기 때문에 이를 이용한 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2... 2022. 5. 6. ES6 ) Class 클래스 클래스 ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다. function Vacation(destination, length){ this.destination = destination; this.length = length; } Vacation.prototype.print = function(){ console.log(this.destination+" "+this.length+"일"); } var daegu = new Vacation("대구",5); daegu.print() // 대구 5일 객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다. ES6 부터는 클래스 선언이 추가되었습니다. 함수는.. 2022. 4. 17. VueJS 3 ) Chart.js + Ag-Grid-Vue3 연결(?)하기 chart.js + ag-grid-vue3 문제사항 위와 같이 같은 데이터를 나타내는 차트와 그리드가 있습니다. 우측의 그리드에서 데이터가 변경되었을 때 차트 또한 업데이트되도록 구현하고 싶었습니다. 사용한 json 데이터는 다음과 같습니다. [ { "name": "mark", "score": 100 }, { "name": "Nick", "score": 80 }, { "name": "Jack", "score": 60 }, { "name": "Mary", "score": 55 }, { "name": "John", "score": 90 } ] 해결 과정 순서 Props 로 동일한 data 공유하기 Grid 에서 변경된 데이터를 emit 을 이용해 App.vue 의 기존 데이터에 덮어쓰기 :key 속성 이용하.. 2022. 3. 24. VueJS 3 ) <script setup> 과 setup() 의 차이 script setup 과 setup() 이용의 차이 Composition API 를 기반으로 Vue 3 프로젝트를 진행하는 방법에는 아래의 두 가지 방식이 있었습니다. script setup setup() Vue 3 공식 가이드를 보면 export default 구문이 필요가 없어졌습니다. 또한 setup() 함수를 정의하는 부분도 필요가 없어졌습니다. 그러므로 return 문 또한 필요가 없습니다. import 한 컴포넌트를 정의하지 않고 바로 템플릿 태그에서 사용이 가능합니다. props 사용 상위 컴포넌트로부터 받은 props 를 사용하기 위해 defineProps 를 사용해야합니다. 방식 export default { props: { userInfo: { type: Object, }, }, };.. 2022. 3. 21. 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. 이전 1 2 3 4 5 ··· 7 다음 반응형
