코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

앞서 Composition API에 대해 알아봤을 당시 ref와 reactive에 대해서도 스쳐가듯 알아봤다.https://chaeng03.tistory.com/entry/Vue-Composition-API [Vue] Composition APIVue2와 Vue3의 차이점을 정리하던 중 제일 큰 차이점인 Composition API는 따로 정리해야 할 것 같아 글을 작성하게 되었다. 1. Composition API란? Composition API는 함수 기반의 API로, 컴포넌트 내에서 사용하chaeng03.tistory.com 그러나 너무 스쳐가듯 알아본 것일까..?ref와 reactive에 대해 설명해보라는 팀장님의 말씀에 그 누구도 자신 있게 대답하지 못했다. 그래서 시작된 본격! ref와 rea..

Vue2의 공식 지원이 종료되면서 지금 진행하는 프로젝트도 Vue3로 마이그레이션을 진행 중이다.이에 맞춰 Vue2에서 Vue3로 변경되며 어떤 점이 바뀌었는지, 차이점에 대해 명확히 알아보자.1. Composition APIVue3의 가장 큰 특징이자 차이점이라 할 수 있는 composition API이다.기존에 script에서 사용하던 computed, watch 등이 API 메서드로 대체되어 setup() 메서드 내에 선언 및 반환하는 형태로 바뀌었다. 자세한 내용은 아래 블로그를 참고하자,https://chaeng03.tistory.com/entry/Vue-Composition-API [Vue] Composition APIVue2와 Vue3의 차이점을 정리하던 중 제일 큰 차이점인 Composit..

Vue2와 Vue3의 차이점을 정리하던 중 제일 큰 차이점인 Composition API는 따로 정리해야 할 것 같아 글을 작성하게 되었다.1. Composition API란?Composition API는 함수 기반의 API로, 컴포넌트 내에서 사용하는 코드를 유연하게 구성할 수 있게 하고 코드의 가독성을 높인다.게다가 반복되는 코드를 별도의 hooks로 모듈화하고 컴포넌트 내에서 import하여 사용할 수 있기 때문에 코드의 재사용성 측면에서도 유용하다. (1) setup()setup 메서드는 컴포넌트가 생성되기 전(created 이전)에 props를 인식하면 실행되는 옵션이다.인자는 props, context(attrs, slots, emit, parent, root)를 받는다. (1-1) datav..