- Composition API vs Option API Option API 방식은 객체지향 중심의 접근 방식이고, Composition API 방식은 논리 중심의 접근 방식 - Option API Vue.js 2.x 버전에서 사용 태그 내에서 Vue에서 사용하기 위한 하나의 Options 객체를 만들어서 export 시킴 Options 객체 내부에서는 data, methods 등 성격에 따라 미리 지정된 속성에 객체 또는 함수로 작성하고 내부에서 다른 요소를 참조할 때는 this를 이용 실질적인 data를 다루는 data(), 함수를 다루는 methods, 캐싱 처리된 computed 등의 객체를 사용하여 컴포넌트 로직을 정의 컴포넌트에 수많은 데이터가 공존한다면 methods, computed도 많아..

Java에는 크게 2가지 데이터 타입 존재 - Primitive Data boolean, char, short, int, long, float, double 가벼운 데이터 스택 메모리에 위치 - Object Data 무거운 데이터 실제 데이터는 힙 메모리에 공유하고 Reference만 스택 메모리에 위치 - Wrapper Class primitive Data를 객체로 다루기 위해서 사용하는 Class primitive Data를 Object Data화 시킨 Class 모든 기본형 타입(primitive type)은 값을 갖는 객체 생성 가능, 이런 객체를 포장 객체라고 부름 Wrapper Class로 감싸고 있는 기본 타입은 외부에서 변경 불가능, 값을 바꾸려면 새로운 포장 객체를 만들어야 함 Wrapp..

MVC(Model-View-Controller) 하나의 애플리케이션을 Model, View, Controller로 3개의 측면으로 분리하여 개발하는 디자인 패턴 - Model View에 표시되기 위해 필요한 데이터 비즈니스 로직을 설명하는 클래스의 집합 어떻게 데이터가 변경되고 조작될 수 있는지에 관한 규칙을 정의 데이터 구조 표현 및 데이터의 전달과 처리를 담당하는 영역으로 구성 ORM(Object Relation Mapping) 기술이 주로 활용됨 Controller단에서 주로 호출되며 데이터베이스를 주로 관리 - View XML, HTML과 같은 프론트 UI 구성 요소를 나타냄 Controller로부터 받은 UI 데이터를 표시하는 역할 MVC 패턴에서 View는 옵저버 패턴을 이용하여 Model을 ..

Bootstrap의 Grid Sytem을 이용하여 왼쪽 회원 등록, 회원권 연장, 관리자 메뉴 버튼 그룹이 있는 컬럼과 비밀번호를 입력하는 부분의 컬럼을 분리(1:11), 버튼 그룹은 Bootstrap의 Button Group을 이용 비밀번호를 입력하는 버튼은 아래 링크를 참고하여 SCSS를 가져와 적용하고 내 페이지에 맞게 수정 https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C [CSS] 🎨 버튼(Button) 디자인 스타일 모음 Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 버튼 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS..

1. VS Code로 백엔드는 Spring boot, 프론트엔드는 Vue.js의 vue cli로 프로젝트 생성 2. package.json 수정: 백엔드 프론트엔드의 포트 번호 8080으로가 겹치므로 vue.js는 3000번 포트 사용 코드 변경 시 자동 재빌드를 위해 빌드 옵션에 --watch 추가 3. vue.config.js 설정 참고: https://velog.io/@blessole/Vue.js-Spring-Boot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%B0%EB%8F%99-%EB%B6%84%EB%A6%AC%EB%90%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0 [..

- CascadeType.REMOVE 부모 엔티티가 삭제되면 자식 엔티티도 삭제됨 부모가 자식의 삭제 생명 주기를 관리 CascadeType.PERSIST를 함께 사용하면 부모가 자식의 전체 생명 주기를 관리 부모 엔티티가 자식 엔티티와의 관계를 제거해도 자식 엔티티는 삭제되지 않고 그대로 남아있음 부모가 삭제될 때 자식도 영속성 전이 옵션으로 인해 함께 삭제 부모 엔티티에서 자식 엔티티를 제거할 경우, DELETE 쿼리가 실행되지 않음. 영속성 전이 삭제 옵션은 부모와 자식 관계가 끊어졌다고 해서 자식을 삭제하지 않기 때문 CascadeType.ALL은 {CascadeType.PERSIST, CascadeType.REMOVE}를 합친 것 - CascadeType.REMOVE 예시 1. 그림과 같은 부모..