eunas blog

태그의 type이 file인 경우 v-model을 쓰면 eslint가 아래와 같은 오류 메시지를 뿌려준다. v-model directives don't support 'file' input type type이 file인 경우 특정 이벤트 실행 시 해당 정보를 가져오고 싶다면 v-model 대신 @chnage를 쓰면 된다. const onFileChange = (target) => { console.log('target', target.files); }; 그럼 이렇게 FileList 유형의 객체에 담기게 된다. 그러나, 해당 객체를 깊은 복사하여 vue의 state 변수에 담으려고 했으나 복사가 되지 않았다. 찾아보니 이벤트 객체 FileList는 기본 객체 또는 배열이 아닌 file 객체를 여러개 담고있..

한동안 거지같던 wijmo 그리드를 쓰더니 걷어내고 DevExtreme으로 바꾼단다. -_- 하여간, 당분간은 그리드 솔루션을 쓰지 말고 기본 태그를 사용하라길래 그렇게 했다. 요구사항은 이렇다. 아래와 같은 평범한 그리드를 COL1 COL2 COL3 COL4 COL5 COL6 COL7 COL8 A category 100 2023-01-09 상품1 30000 1 30000 완료 A category 100 2023-01-09 상품2 10000 3 30000 완료 B category 200 2023-01-09 상품3 15000 2 30000 완료 A category 300 2023-01-09 상품4 10000 1 10000 완료 B category 400 2023-01-09 상품5 2000 5 10000 미..

watch 속성은 데이터의 변경이 일어날 때, 즉각적으로 그것을 감지하는 역할을 한다. [1, 2, 3, 4] [1, 2, 3, 4, 5] 위와 같이 배열 요소가 추가되었을 때, 분명 우리는 해당 array의 값이 변경되었다고 인식하지만 watch는 그렇지 않다. 이렇듯 배열이나 객체같이 중첩된 요소의 변경 감지를 위해서는 deep 속성을 추가하여 사용해야한다. watch( () => state.array, () => { console.log('변경 감지'); }, { deep: true, } )

A 메뉴 화면에서 데이터 등록 시, 해당 데이터를 JSON 형태로 로컬스토리지에 담아 B 메뉴 화면에 뿌려주는 작업을 했다. 그런데 간헐적으로 해당 데이터를 받아오지 못하는 경우가 발생했다. 스토리지에는 제대로 담기는데, 참 이상했다. 2개의 브라우저를 띄워놓고 테스트를 반복했는데, B 메뉴를 띄워놓은 브라우저에서 A나 C등 타 메뉴로 이동을 한 뒤 다시 B로 돌아오면 해당 문제가 발생하는 듯 보였다. 데이터를 등록하는 A에서 storage를 set해주고, B에서 mount할 때, storage를 get해주었는데 get를 하면서 B메뉴의 그리드에 데이터를 넣어줄 때 setInterval()을 사용하여 주기적으로 데이터를 받아오도록 했다. vue가 SPA이어서 그런지, 타 페이지로 이동할때에도 이전 Int..

setup의 도입으로 setup 내에서 this를 액세스 할 수 없다. this.$router, this.$route를 직접 접근할 수 없으므로, useRouter 함수를 사용해야한다. 🚩 주의 1. methods에서 this로 router를 불러오고, HTML 태그 내에서 click event로 사용 할 수 있다. (setup에서만 X) 2. setup() 범위에서는 methods의 function들을 접근할 수 없다.

@DisplayName("String literal로 생성한 두 객체는 값이 같다면 동일하다.") @Test void stringLiteral() { String str1 = "abc"; String str2 = "abc"; assertThat(str1).isSameAs(str2); } @DisplayName("new 연산자로 생성한 두 객체는 값이 같아도 동일하지 않다.") @Test void stringNew() { String str1 = new String("abc"); String str2 = new String("abc"); assertThat(str1).isNotSameAs(str2); } String literal로 생성하면, JVM Heap 영역 내 String Constant Pool에..

백엔드와 프론트엔드의 출처가 다른 경우, CORS(Cross-Origin Resource Sharing) 설정을 해주어야 한다. 각기 다른 웹 애플리케이션에서 자원을 공유할 때, 브라우저는 보안상의 이유로 출처가 다르면 이를 제한한다. 이를 SOP(Same Origin Policy) 정책이라고 한다. 스프링부트는 아무 설정을 하지 않으면 SOP 정책을 따른다. 이를 방지하기 위해, 백엔드 쪽에 CORS 설정을 해서 내가 허용한 origin 출처만 접근을 허용할 수 있다. 📒 출처란? 프로토콜://도메인:포트 ex) http://localhost:8080 스프링에서 CORS를 설정하기 위해서는 두가지 방법이 존재한다. 1. WebMvcConfigurer 사용 (글로벌 설정) : WebMvcConfigure..

@Entity : 데이터베이스 테이블에 대응하는 하나의 클래스를 의미함 해당 어노테이션이 붙은 클래스는 JPA에서 관리 name 속성이 있다. (@Entity(name="UserInfo")) JPA는 JPQL이라는 객체지향 쿼리 언어를 사용하는데, 이때 테이블명이 아닌 엔티티의 이름이 사용된다. (select c from UserInfo c where c.id = 1; 이런 식) 주의🖍️ : 기본 생성자(파라미터X) 필수. 접근 제어자는 public, protected 저장 할 필드에 final을 붙이면 테이블에 매핑되지 않는다. @Table : 엔티티와 매핑할 테이블 지정 @Id : pk를 직접 셋팅 @GeneratedValue : DBMS 종류에 따라 맞춰 자동적으로 값을 JPA에서 생성해 입력해준다..

@Getter : 접근자 메서드를 작성해주는 어노테이션 @Setter : 설정자 메서드를 작성해주는 어노테이션 📒 그 밖의 생성자 생성 관련 어노테이션 @AllArgsConstructor : 모든 필드 값을 파라미터로 받는 생성자를 만듦 @NoArgsConstructor : 파라미터가 없는 기본 생성자 생성 @RequiredArgsConstructor : final이나 @NonNull인 필드 값만 파라미터로 받는 생성자 만듦 예시 코드 @NoArgsConstructor @RequiredArgsConstructor @AllArgsConstructor public class UserInfoVO { @NonNull private String id; @NonNull private String password; ..

1. 인사마스터와 1:1 mapping되는 사내대출원장 기초데이터를 삽입하는 프로시저를 생성해보자 USE OSS; #지정 월 상환액 추가 ALTER TABLE TB_LOAN ADD COLUMN MONTH_PAY NUMERIC(10) NOT NULL; #컬럼 위치 이동 ALTER TABLE TB_LOAN MODIFY MONTH_PAY NUMERIC(10) AFTER LOAN_AMOUNT; ALTER TABLE TB_LOAN MODIFY BALANCE NUMERIC(10) AFTER TOTAL_PAY; SELECT * FROM TB_LOAN; DELIMITER $$ CREATE OR REPLACE PROCEDURE INSERT_LOAN(OUT v_result INT) /* @DESCRIPTION LOAN 데..