지금, 개발하기81 [Vue.js] Immediate Watch를 이용한 🏴1. 구현 의도 test.vue {{ `${cam.cameraSeq}. ${cam.cameraName}` }} export default { props: { info : { type: Object, }, }, data() { return { cam: { cameraSeq: '', cameraName: '' } } }, watch: { info: { handler(newVal) { this.cam = newVal; }, } } }; Vue.js에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 저는 test.vue에서 부모로부터 props를 이용해서 info 데이터를 받았습니다. 그리고 info를 cam에 바인딩해서 카메라정보를 화면에 뿌려주려고 하는데요. 실제 구현.. 2024. 2. 15. [Vue.js] Vue의 코드 재사용 방법 - mixin vs Compositon API 🚨1. 현재 프로젝트의 문제점 제가 하고 있는 프로젝트의 여러 컴포넌트에는 현재시간을 불러와서 조회하는 기능이 있습니다. 같은 기능인데 개발자가 다르다 보니 컴포넌트 마다 현재시간을 불러오는 방법이 각각 다르게 구현되어 있었습니다. 최근에 이 시간 조회 방식을 변경해야 했는데, 모든 컴포넌트를 돌아다니면서 수정을 했어야해서 여간 불편했습니다😥 그래서 재사용 가능 기능(여기선 현재시간을 불러오는 기능)을 여러 컴포넌트에 분산시킬 때, 어떤 방법이 좋을지 비교해보았습니다. 💡2. Vue의 코드 재사용 방법 1) EventBus EventBus는 Vue 인스턴스를 이용하여 한 컴포넌트에서 다른 컴포넌트로 이벤트를 전달하는 방법입니다. 이를 통해 컴포넌트간에 데이터나 알림을 보낼 수 있습니다. 👍 장점: "구현.. 2024. 1. 28. javascript] 옵셔널체이닝(optional Chaining)이란? 📌1. optional chaining이란? : 옵셔널 체이닝(optional chaining)은 객체의 중첩된 속성이나 메서드에 접근할 때, null 또는 undefined 에러를 방지하기 위한 방법입니다. 실제 개발을 하다보면객체 내의 값에 접근할 때, 값이 존재하지 않는 경우가 생각보다 많이 있습니다😥 이런 경우 프로그램이 터지는 걸 막기위해 옵셔널체이닝 같은 예외처리를 꼭 해줘야합니다. 아래 간단한 예시를 볼까요? member들의 address에 접근하고 싶은데, jinsu의 경우 주소를 입력하지 않았기때문에 city에 접근 시 바로 에러가 납니다. const member = { name: 'hana', address: { city: 'Seoul', zipCode: '10001' } }; cons.. 2023. 8. 18. javascript] 자바스크립트의 클래스 javascript에서 객체를 생성하는 방법에는 여러가지가 있습니다. 그 중에서도 class를 사용하는 방법은 javascript 뿐만아니라 다른 언어에서도 보편적으로 사용하는 방법이고, 객체지향의 원리를 이해하는데도 도움이됩니다. 1. 클래스란? : javascript에서 클래스는 객체를 생성하는데 사용되는 템플릿입니다. 클래스를 사용하여 객체를 생성하면 해당 클래스에 정의된 속성과 메서드를 가지는 새로운 객체가 생성이 됩니다. 📌 클래스 선언, 객체 생성 class Student { constructor(name, birthdate) { this.name = name; this.birthdate = birthdate; } celebrate(gift) { console.log(`${this.name} .. 2023. 8. 14. 이전 1 2 3 4 5 6 ··· 21 다음
