전체 글 368

[12월 5주차] Vue.js 3 상위 컴포넌트 ↔ 하위 컴포넌트 데이터 전달 방법

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

개발 일지 2023.12.31

Ch 05. 객체 지향 설계 5원칙 SOLID

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

Ch 02. Java와 절차적/구조적 프로그래밍

Java 로 작성된 프로그램을 실행하기 위한 과정에 대해 알아보려고한다. JDK, JRE, JVM 의 역할 Java 로 작성된 프로그램을 실행하기 위해서는 JVM(Java Virtual Machine, 자바 가상 머신)이 필요하다. JVM으로 Java 코드를 실행하는 것은 컴퓨터가 어떤 프로그램을 실행하는 것과 비슷하다. ex) 어떤 소프트웨어 개발자가 개발 도구를 이용해서 개발하고 OS를 통해서 물리적 컴퓨터인 하드웨어 상에서 구동한다. JDK(Java Development Kit, 자바 개발 도구): JVM용 소프트웨어 개발 도구이다. 컴파일러인 javac.exe를 포함한다. JRE(Java Runtime Enviornment): JVM용 운영체제로서Java.exe(자바 프로그램 실행기)를 포함한다...

Ch 03. 자바와 객체 지향

객체 지향 객체 지향은 '인간' 지향 언어이다. 객체 지향은 현실 세계를 반영한다. 기계에 맞춰서 프로그래밍하던 방식(절차 지향 프로그래밍)을 버리고 인간이 사물을 인지하는 방식대로 프로그래밍하고자 만들고자 객체 지향 프로그래밍 언어가 탄생했다. 클래스와 객체의 관계는 붕어빵틀과 붕어빵이라기보다는 분류와 실체의 개념에 가깝다. 클래스는 분류, 집합, 같은 속성과 기능을 가진 객체를 총칭하는 개념이다. 객체지향의 대표적인 특성 캡슐화(정보 은닉) 추상화(모델링) 상속(재사용) 다형성(사용 편의) 추상화 = 모델링 Object 의 의미는 '객체'보다는 '개체'라는 뜻에 더 가깝다. 객체는 세상에 존재하는 유일무이한 사물을 말한다. (By 저자) 객체를 특성(속성, 기능)에 따라 분류해보니 객체를 통칭할 수 ..

Java 큰 수의 피보나치 수열의 값은?

피보나치(Fibonacci) 수열이란? 1, 1, 2, 3, 5, 8, .. 와 같이 f(x) = f(x - 2) + f(x - 1); 을 만족하는 수열을 말한다. (첫 항: f(0) = 0 또는 f(1) = 1) 아주 큰 자연수 n에 대하여 피보나치 수열의 n 번째 값은 어떻게 구할 수 있을까? 첫 번째 시도 [Long] static 으로 선언한 List 안에 하나씩 값을 넣어준다. list = [1, 1, 2,3, 5, ...] 해당 리스트에 메모이제이션을 적용했다. static List list = new ArrayList(); private static void fiboFunc(int idx) { if (idx == 1 || idx == 2) { list.add(idx, 1L); return; }..

[09월 1주차] 캐시와 스프링 AOP, @Cacheable

캐시(cache) 캐시란? 반복적으로 요청되는 데이터를 임시로 메모리 저장했다가 다음 요청이 왔을 때, DB에 접근하지 않고 메모리에서 읽어오는 것을 말한다. 최초 요청 시에만 DB 에 접근하므로 시간적으로 효율적이고 성능도 좋아진다. Spring 캐시 사용 방법 - @CacheEvict, @Cacheable @Cacheable(cacheNames = "model", key = "#modelNm", unless = "#result == null") public ModelVo getModel(String modelNm) { // 모델 조회 return model; } @CacheEvict(cacheNames = "model", key = "#modelNm") public void removeModel(St..

[08월 4주] MyBatis(string_agg, unnest), element plus를 이용한 스위치 버튼 만들기

PostgreSQL에서 unnest()를 사용하면 정렬이 되지 않는 이유? postgre에서는 string_agg() 를 이용해서 구분자를 기준으로 어떤 값들을 이어 붙일 수 있다. 또는 반대로 unnest()를 사용해서 구분자로 이어붙여진 값들을 펼칠 수도 있다. 그런데 여기서 unnest() 사용해서 펼친 경우, 해당 데이터들은 정렬이 되지 않는다. 원인: ? 해결 방법: ? MyBatis PostgreSQL의 string_agg()를 이용하면 특정 데이터를 구분자로 구분해서 문자열 형태로 이어붙일 수 있다. ex) ['a', 'p', 'p', 'l', 'e'] => 'apple' 검색 쿼리를 만드는 중이다. 'searchKeyword' 에 대해서 searchKeyword 가 포함된 model_id_..

도커(docker) 와 컨테이너 및 기본 명령어

서비스 배포 먼저, 인텔리제이에서 코드를 구현한다. 지금까지는 콘솔에 결과를 출력하거나 API를 호출해서 확인했다. 그런데 사용자들이 서비스를 사용하려면 서비스를 배포해야한다. 서버 컴퓨터를 구매해서 사용하거나 클라우드 서비스를 이용하는 방법이 있다. 온 프레미스(on premise) 방식으로 서버를 직접 구매해서 운영하려면 비용 부담이 크게 발생한다. 온 프레미스 클라우드 서비스: ex) AWS 가상화(virtualization) 하나의 물리 시스템에서 분리된 여러 환경을 구성하는 기술 서버의 물리적인 자원을 최대한 효율적으로 활용하기 위한 기술이다. 가상화는 기술 개념이고 클라우드는 서비스 개념이다. 가상 머신(virtual machine)과 컨테이너의 차이점 컨테이너와 VM은 유사하다. 하드웨어에서..

삭제폴더/Infra 2023.09.04

[08월 1주차] MyBatis bacth 처리 방법(INSERT, DELETE), Vue.js 3 폼 유효성 검증

MyBatis 일괄 INSERT, DELETE 여러 엔티티의 정보를 List 형태로 받아서 일괄적으로 DB에 INSERT 쿼리를 실행하려고한다. 관련된 내용을 정리해보려한다. 프론트 다음과 같이 배열 list에 각 object를 담아서 이 데이터를 POST 요청과 함께 보낸다. 그러면 백엔드에서 @RequestBody List 형태로 데이터를 받을 수 있다. cf) DELETE 요청에는 requestbody 를 보내는게 권장되지 않는다. HTTP 프로토콜의 표준 사양에 따르면 DELETE 요청에 requestbody를 포함하지 않는 게 원칙이다. 보안/캐싱에 관한 문제가 있기 때문이다. 따라서, 선택 삭제 같은 기능을 구현하는 경우, URL에 "id=model3&id=model9" 와 같은 방식으로 이어..

Chapter 08. 외부 설정을 이용한 자동 구성

Environment 추상화와 프로퍼티 지금까지 자동구성에 대한 과정을 살펴봤다. 자동 구성에 의해 만들어지는 빈 오브젝트에는 보통 기본값이 들어가있다. ex) port: 8080 cf) Environment 인터페이스 스프링 애플리케이션의 환경 설정과 관련된 정보를 제공한다. 프로퍼티 값을 가져오거나 환경 변수 값을 조회하는 메서드를 제공한다. getProperty() 스프링은 단일화된 방식으로 접근할 수 있도록 설계되어있다. 1) standardEnviroment System propertyies System Enviroment Variables 2) standardServletEnvironment: 웹 환경일 때 사용 가능 ServletConfig Parameters servletcontext Pa..