vue.js3 개발기초 Vue.js computed (캐싱, 반응형, 성능 최적화) Vue.js를 처음 배울 때 computed를 보고 "그냥 함수랑 뭐가 다르지?"라고 생각하신 적 있으신가요. 저도 그랬습니다. 그런데 제조 MES 프로젝트에서 설비 상태 데이터를 실시간으로 화면에 뿌리다가 브라우저가 버벅거리기 시작했을 때, 그 생각이 완전히 바뀌었습니다. computed는 단순한 편의 기능이 아니었습니다.methods로 버텼던 시절, 그리고 한계처음 MES 화면을 만들 때는 설비 상태 계산 로직을 전부 methods로 처리했습니다. 데이터가 적을 때는 문제가 없었는데, 실시간으로 들어오는 데이터가 많아지기 시작하면서 테이블 필터링과 상태 집계 함수가 화면이 갱신될 때마다 반복 실행되는 상황이 벌어졌습니다. 버튼 하나 눌러도 화면 전체가 버벅거렸고, 처음에는 서버 문제인 줄 알았습니다... 2026. 5. 30. 개발기초 Vue.js 컴포넌트 (구조 설계, 데이터 흐름, 상태관리) 솔직히 저는 Vue.js 컴포넌트를 처음 접했을 때 "HTML 파일을 잘게 나눠놓은 것 아닌가?" 정도로 생각했습니다. 그냥 화면 조각을 재활용하는 도구 정도로 봤던 거죠. 그런데 제조 MES(Manufacturing Execution System) 프로젝트를 실제로 운영하면서 그 생각이 완전히 뒤집혔습니다. 컴포넌트는 UI 조각이 아니라 데이터 흐름과 책임을 분리하는 구조라는 걸, 직접 겪어보고 나서야 비로소 이해했습니다.컴포넌트 구조 설계, 왜 기준이 중요한가Vue.js의 컴포넌트(Component)란 UI와 로직을 하나의 단위로 묶어 독립적으로 재사용할 수 있게 만든 블록입니다. 쉽게 말해, 버튼 하나, 입력 폼 하나를 독립된 파일로 관리하고 여러 화면에서 가져다 쓰는 방식입니다.제가 직접 써봤는데.. 2026. 5. 29. 개발기초 Vue.js 반응형 (반응형 데이터, 상태관리, 컴포넌트) 데이터를 바꿨는데 화면이 알아서 따라 바뀐다면 어떤 느낌일까요? JSP나 jQuery를 먼저 배운 개발자라면 이게 얼마나 낯선 경험인지 공감할 겁니다. 저도 처음 Vue.js를 접했을 때 그 흐름이 신기하면서도 "이게 어떻게 가능하지?"라는 의문이 먼저 들었습니다. Vue.js의 반응형 구조는 단순한 편의 기능이 아니라, 프론트엔드 개발의 사고방식 자체를 바꿔놓습니다.반응형 데이터 — 화면이 자동으로 따라오는 구조Vue.js는 반응형 데이터(Reactive Data) 시스템을 핵심 아키텍처로 삼고 있습니다. 여기서 반응형 데이터란, 특정 변수의 값이 바뀌면 그 변수를 참조하는 화면 요소가 자동으로 다시 그려지는 구조를 말합니다. 기존 jQuery 방식에서는 값이 바뀌면 개발자가 직접 document.ge.. 2026. 5. 28. 이전 1 다음 반응형
