분류 전체보기 233

[Vue3] TypeError: Cannot read property 'insertBefore' of null

https://sumni.tistory.com/105 [Vue] 컴포넌트 동적 생성 (agGrid.vue) 그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. sumni.tistory.com 위의 코드를 실행하던 중 TypeError: Cannot read property 'insertBefore' of null 이런 에러가 발생하였다. 검색 결과 1. 캐시문제 캐시를 비우거나 시크릿 창 열기. 저는 이렇게 했을 때 해결되지 않았습니다. 2. html 템플릿에 초기화 되지 않은 데이터 v-if="!!data"를 이용 v-if="!!data"는 Vue.js의 조건..

Frontend/vue3 2023.03.31

[Vue] 컴포넌트 동적 생성 (agGrid.vue)

그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. 라이브러리 파일 //AgGrid.vue Rows in this example do not move, only events are fired 2. agGrid를 여러군데서 커스텀해서 사용하기 위해 따로 sample파일을 만든 것 같습니다. //AgGridSample.vue 3. 컴포넌트를 사용하는 화면 v-for문을 사용하여 data()함수 안의 agGrids만큼 컴포넌트를 생성합니다. //Editor.vue 위 코드에서는 defineAsyncComponent 함수를 사용하여 AgGridSample.vue 파일을..

Frontend/vue3 2023.03.31

[JAVA] 27918 탁구 경기

https://www.acmicpc.net/problem/27918 27918번: 탁구 경기 달구와 포닉스는 탁구 치는 것을 좋아한다. 윤이는 오늘도 탁구를 치는 달구와 포닉스를 보고, 누가 경기에서 승리할지 예측해 보기로 했다. 달구와 포닉스가 탁구 경기를 진행하는 규칙은 다음 www.acmicpc.net import java.util.Scanner; import java.util.ArrayList; import java.lang.Math; class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int numOfGame = sc.nextInt(); ArrayList winnerList = new ..

ORA-01722: 수치가 부적합합니다

해당 에러를 검색했을 때 대부분 글에서 데이터 타입이 일치하지 않는 데이터를 넣을 때 발생하는 에러라고 나옵니다. 예를 들어, NUMBER타입의 컬럼에 문자를 집어 넣었을 경우 입니다. 하지만 저의 경우에는 다른 문제가 있었습니다. 테이블의 제약 조건을 조회 해보니 데이터타입이 FLOAT인 칼럼의 제약조건이 아래와 같이 설정되어 있었습니다. COL1 IN ('1~9') NUMBER형태의 데이터 타입의 범위를 설정할 때에는 아래와 같이 설정해야합니다. COL1 BETWEEN 1 AND 9

SQL/RDBMS 2023.03.17

[mariaDB] 제약 조건(조회, 추가, 수정, 삭제)

조회 SELECT * from information_schema.table_constraints FROM TABLE_NAME = '{테이블명}' *위 쿼리를 실행했을 때 결과 그런데 이렇게 실행하면 모든 TYPE의 제약조건이 나오지만 CONSTRAINT_TYPE이 CHECK인 제약조건의 내용을 볼 수 없습니다. 내용을 확인하기 위해서는 아래의 쿼리문을 실행해야 합니다. SELECT * from INFORMATION_SCHEMA.CHECK_CONSTRAINTS WHERE TABLE_NAME = '{테이블명}' *위 쿼리를 실행했을 때 결과 여기서 CHECK_CLAUSE가 CHECK 제약조건의 내용입니다. 추가 ALTER TABLE {테이블명} ADD CONSTRAINT {제약조건명} {제약조건} --예시 ..

SQL/RDBMS 2023.03.17

[Oracle] 제약 조건 (조회, 추가, 수정, 삭제)

조회 SELECT * FROM USER_CONSTRAINTS WHERE TABLE_NAME = '{테이블명}' * 위 쿼리를 실행했을 때 결과 여기서 CONSTRAINT_NAME이 제약조건이름이고 SEARCH_CONDITION이 제약조건이다. 추가 ALTER TABLE {테이블명} ADD CONSTRAINT {제약조건명} {제약조건} * 제약조건 예시 CHECK(COL1 IN ('A','B','C')) "COL1" IS NOT NULL 컬럼 데이터타입이 number(float, decimal...)인 경우에는 IN (1~9)가 아니라 BETWEEN을 써야함. CHECK(COL1 BETWEEN 1.0 AND 9.0) *ORA-02293: ()을 검증할 수 없습니다 - 잘못된 제약을 확인합니다 참고로 추가,..

SQL/RDBMS 2023.03.16

java.sql.SQLSyntaxErrorException: ORA-00911: 문자가 부적합합니다

ORA-00911: 문자가 부적합합니다 다른 글을 검색해 봤을 때 쿼리문에 ;가 들어가서 에러가 나는 경우가 많다고 하는데 String sql = "" PreparedStatement pstmt = con.prepareStatement(sql); retVals = pstmt.executeUpdate(); pstmt.close(); INSERT INTO TABLENAME(`COL1`, `COL2`, `COL3`) VALUES ('col1data1', 'col2data1', 'col3data1'), ('col1data2' ,'col2data2', 'col3data2'), ('col1data3' ,'col2data3', 'col3data3') ON DUPLICATE KEY UPDATE `COL2`= VALUE..

SQL/RDBMS 2023.03.14

[MySQL/MARIADB, MSSQL, ORACLE] DB별 예약어나 특수문자가 포함된 컬럼명 표현, 네이밍 규칙

각 데이터베이스 관리 시스템에서는 예약어(reserved keyword)나 특수문자가 포함된 컬럼명을 사용할 수 있지만 , 해당 이름을 직접 참조하거나 쿼리하는 경우 문제가 발생할 수 있습니다. 따라서 DB마다 이러한 컬럼명을 특정기호로 감싸서 사용합니다. DB별 예약어나 특수문자가 포함된 컬럼 표현 방법 1.MySQL, MARIADB MySQL에서는 백틱(backtick) 기호(`)를 사용하여 컬럼명을 감싸줍니다. SELECT `version`, `left`, `right` FROM mytable; 따라서, "version" 컬럼명을 백틱으로 감싸는 것을 "백틱으로 묶는다" 혹은 "백틱으로 감싼다" 라고 표현합니다. 2. ORACLE Oracle에서는 큰따옴표(")를 사용하여 컬럼을 감쌀 수 있습니다...

SQL/RDBMS 2023.03.14

AngularJS -> VueJS 변환 ($scope에 대하여)

AngularJS의 $scope는 Vue.js에서의 데이터와 관련된 영역과 유사한 개념입니다. Vue.js에서는 $scope 대신 데이터 객체를 사용합니다. AngularJS의 $scope를 Vue.js로 변환하려면 다음과 같은 단계를 따를 수 있습니다. $scope에 정의된 데이터를 Vue.js 데이터 객체로 변환합니다. Vue.js에서 데이터 객체는 일반 JavaScript 객체입니다. Vue.js의 데이터 바인딩 구문(v-bind, v-model, {{}})을 사용하여 Vue.js 데이터 객체와 HTML 요소를 연결합니다. Vue.js의 v-on 디렉티브를 사용하여 HTML 이벤트와 Vue.js 메소드를 연결합니다. AngularJS의 $watch를 Vue.js의 watch 속성으로 변환합니다. A..

Frontend/vue3 2023.03.08

[Vue.js] 모듈화

아래 코드에서 common.js와 common2.js를 모듈화 import common from '@/assets/js/common.js'; import common2 from '@/assets/js/common2.js'; export default { name: 'HelloWorld', props: { msg: String }, methods: { method1() { common.method1(); }, method2() { common2.method2(); } } } 1. Webpack 사용하기 Webpack은 대표적인 모듈 번들러로서, 모듈의 종속성을 분석하고 묶어서 하나의 파일로 만들어 줍니다. 이를 사용하면 여러 개의 모듈을 하나의 파일로 번들링할 수 있습니다. 예를 들어, common.js와..

Frontend/vue3 2023.03.08