계란 블로그

얼마 전부터 회사에서 IoT 관련 웹 페이지를 만들고 있습니다. 그림과 같이 최상위 컴포넌트(Page) 안에 검색 컴포넌트(SearchForm)와 목록 컴포넌트(List)가 있고 그 안에 또 자식 컴포넌트(Modify)가 있는 형태입니다. 검색폼에 조건을 넣어서 조회하던 도중, 디바이스 정보를 등록하거나 수정한 다음, (검색 조건을 그대로 적용한) 새로운 목록이 조회되는 기능을 만들려고합니다. 그러기 위해서는 검색 정보(searchInfo)를 Page로 전달하고 또 다시 하위로 전달하는 구조가 필요합니다. Vue.js 3에서 컴포넌트 간에 데이터를 주고 받는 방법을 정리하며 살펴보겠습니다. 하위 컴포넌트(DeviceSearchForm) → 상위 컴포넌트(Page) 데이터 보내기 DeviceSearchFo..

객체 지향 설계의 원칙, SOLID 에 대해 각 예시와 함께 살펴보려고 한다. 평소에 자주 사용하는 Java, JDBC 도 SOLID와 관련되어 있다. SRP (Single Responsibility Principle, 단일 책임원칙) 단일책임원칙이란? 하나의 클래스는 하나의 역할만 수행해야한다는 의미. "어떤 클래스를 변경해야하는 이유는 오직 하나뿐이어야한다." Ex 1) SRP를 만족하는 설계 "남자" 클래스는 다음 네 가지 역할을 하고 다음 8개의 메서드로 구성된다. 남자친구 역할 - 기념일 챙기기(), 데이트하기() 아들 역할 - 효도하기(), 안마하기 사원 역할 - 출근하기(), 아부하기()" 소대원 역할 - 사격하기(), 구보하기() 이를 SRP에 맞게 바꾸려면? 남자클래스 안에서의 역할과 책..