본문 바로가기

전체 글

 (16)
[MyBatis] XML 세미콜론 포함 시 SQLSyntaxErrorException Datagrip에서 동일 쿼리문 수행했을 때 정상 작동하나, Server에서 MyBatis를 통해 반환하는 값은 아래와 같았다.### Error querying database. Cause: java.sql.SQLSyntaxErrorException: ORA-00933: SQL command not properly ended### The error may exist in URL [jar:file:/{.xml_파일_절대경로}]### The error may involve {mapper_패키지_경로.mapper_쿼리_id명}-Inline### The error occurred while setting parameters### SQL: {오류 대상 쿼리문, (parameter 위치의 경우 ? 로 기재됨)};..
[JavaScript] Object key 동적으로 추가하기 Object 변수에 'foo'라는 이름의 key를 동적으로 추가해보자.정적인 추가const obj = {};const key = 'foo';obj.key = 'bar';console.log(obj);>>> { key: 'bar' } // 'key'라는 이름의 key가 저장된다. (의도한 동작 X)obj.foo = 'bar'; // 따라서 정적인 방식에서는 key 이름을 직접 명시해야 한다.console.log(obj);>>> { foo: 'bar' }동적인 추가const obj = {};const key = 'foo';obj[key] = 'bar';console.log(obj);>>> { foo: 'bar' }; // 'foo'라는 이름의 key가 저장된다.
[ES6] ... 연산자 (Spread Operator) 기본 사용법var a = [1, 2, 3];var b = [4, 5];...a>>> 1, 2, 3...b>>> 4, 5대괄호를 벗겨준다고 생각하면 쉽다. Deep Copy (깊은 복사)var a = [1, 2, 3];var b = a; // b에다 a랑 똑같은 값 넣고 싶음a>>> 1, 2, 3b>>> 1, 2, 3그런데 여기서 a[3] = 4를 하면 b에는 무슨 일이 벌어질까?a>>> 1, 2, 3, 4b>>> 1, 2, 3, 4 (b에는 왜 추가됨 ???)이러한 동작이 일어나는 이유는 Array, Object와 같은 reference data type 에서는 등호(=)로 복사 시, 서로가 값을 공유하게 되어있기 때문이다.따라서 각각 완전히 독립적인 값을 가지도록 Array, Object를 복사하려는 ..
[Swiper.js] 복제 DOM 이벤트 부착 시점의 문제 Swiper를 사용할 때, autoplay 속성을 활성화하면 슬라이드 간의 자연스러운 움직임을 나타내기 위해서 원본 DOM이 앞 뒤로 복제된다. 그래서 실제로 내가 타겟으로 삼은 DOM 요소들은 중앙에서 나타나고, Swiper 옵션이 적용됨과 동시에 앞 뒤로 duplicate 라는 이름의 클래스를 가진 복제 DOM들이 자동으로 생성된 것을 확인할 수 있다. (그래서 슬라이드가 전환될 때마다 activeIndex, realIndex를 찍어보면 본래 의도한 순서와 다르게 실제 의도한 수 + 총 원본 갯수 의 수로 나타난다.) 이 때 중요한 것은 원본 객체의 이벤트 리스너 부착 시점이다. 예를 들어 제품 정보를 나타내는 영역이었다고 가정해보자. 하나의 제품 정보에는 장바구니 담기, 좋아요 버튼, 제품 상세 페..
[Firebase] Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". 웹 앱에서 Firebase 적용 시, 모듈 방식의 JavaScript로 작성하였으나 모듈 번들러는 사용하지 않았을 때 발생하는 오류입니다. Firebase config 정보를 담은 JS 코드가 type="module"로 적용되어 있을 때, Firebase 모듈을 CDN을 통해 Google 서버에서 가져오는 것이 아니라면 (즉, npm으로 관리하고 있다면) Webpack, Parcel, Rollup, Snowpack 과 같은 모듈 번들러가 반드시 필요합니다. Firebase 공식 문서에서는 Firebase SDK 적용 방법을 네임스페이스 방식과 모듈 방식 두 가지 중 1 택의 형태로 안내해주고 있는데, 이 중 모듈식이 최신 방법론이며, 이것을 선택했을 때 모듈 번들러를 함께 사용해주어야 합니다. Fireb..
[JavaScript] <head>에 넣은 <script>가 적용이 안된다? DOM 렌더링 시점에 따른 JS 호출 제어 Hello World 태그 안에 넣은  실행시킬 JavaScript 코드를 DOMContentLoaded로 감싼다.DOMContentLoaded는 모든 DOM 요소가 렌더링된 다음에 호출되도록 정의하는 이벤트 코드이다.따라서, 이는 태그 하단에서 태그를 호출하는 것과 거의 동일한 동작을 한다.document.addEventListener('DOMContentLoaded', () => { // DOM 렌더링 완료 후에 호출할 코드 document.querySelector('h1').style.color = 'red';})위 코드를 jQuery로 적용할 시에는 아래와 같이 작성한다.$(document).ready(() => { $('h1').css('color', 'red');})
[JavaScript] numberFormat() 숫자를 담은 String 값을 정규식을 통해 콤마(,)가 포함된 숫자로 포맷한다. 이런 기능은 일반적으로 자주 사용되기 때문에, common.js 같은 파일에 String Object와 Number Object에 대한 prototype 함수로 따로 빼두는 편이 좋다. /*--------------------------------------------------------------------------------*\ * String Object Prototype \*--------------------------------------------------------------------------------*/String.prototype.numberFormat = function() { return ..
[Git] could not delete references: cannot lock ref ... Update failed could not delete references: cannot lock ref 'your_remote_path': Unable to create 'your_local_path': File exists.실제 에러 내용could not delete references: cannot lock ref 'refs/remotes/origin/feature/-20231016': Unable to create 'C:/Users/eugenecha/Documents//.git/refs/remotes/origin/feature/-20231016.lock': File exists. 과거일 기준 local master에서 작업한 나의 변경 상태와, 미래일 기준 새로운 커밋이 추가된 remote mas..

티스토리툴바