정리공간

Vue3 에서 부모-자식 컴포넌트로 emit을 쓰고 있는데 콘솔창에 아래와 같은 warning 이 떴다. [Vue warn]: Extraneous non-emits event listeners (함수명) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 함수는 작동이 잘 되지만 워닝은 최대한 안뜨는게 좋기에 원인을 찾아봤다. 1) 부모 컴포넌트에..

자식 컴포넌트에서 부모 컴포넌트에게 데이터를 넘기고자 한다. 부모 컴포넌트의 함수를실행시키는 방법과, 파라미터 여러 개는 어떻게 넘기는지 알아보자. 구조 /* 부모 컴포넌트 */ export default { ...(생략)... ,methods: { testFunc(파라미터1, 파라미터2) { console.log("자식에서 실행명령받음!") } } } // 자식 컴포넌트 export default { ...(생략)... ,methods: { changeNum() { this.$emit('setDate', 파라미터1, 파라미터2); } } } 파라미터 넘기기 부모 컴포넌트에서 자식컴포넌트 태그에 @함수명A = "함수명B" 를 입력한다. ex) 여기서 '함수명A' 는 자식의 호출을 알아차리기 위한 이름이고..

부모 컴포넌트에서 자식에게 props를 전달했는데 콘솔창에 아래와 같은 오류가 뜨면서 파라미터에 undefinded 가 떴다. Property " " was accessed during render but is not defined on instance 원인은 넘길때 파라미터 타입을 지정해주지 않아서였다. S라는 문자열을 넘기고 싶었는데 변수도 아니면서 그냥 쌩으로 적어버린거... 알고보니 멍청한 내 실수였다..ㅋㅋ S를 문자열로 인식하게끔 ' ' 따옴표를 넣어주었다. ㅎ... // 오류 코드 // 수정 코드 변수를 넣었는데도 해당오류가 뜬다면 부모 컴포넌트에서 해당 변수에 값이 잘 들어있는지 확인하고, 자식 컴포넌트에서도 잘 받아왔는지 확인해보자. // 자식 컴포넌트 export default { pr..

CREATE PROCEDURE 스키마이름.프로시저이름 ( -- 파라미터 선언 ex) @paramint ) AS BEGIN 쿼리문 작성 END GO

비트(bit) 컴퓨터에서 표현할 수 있는 제일 작은 단위. 전기 스위치에서 on과 off만 존재하듯이 비트는 0(off)와 1(on)만 존재한다. ​ 비트의 개수에 따라 표현할 수 있는 가짓 수가 늘어난다. 3비트라면, 23 = 8가지를 표현할 수 있다. 000, 001, 010, 100, 011, 101, 110, 111 ​ ​ 바이트(Byte) 비트8개를 합쳐서 바이트로 표현한다. 문자를 표현하는 기본단위이다. 비트8개로는 28 = 256개의 경우의 수가 나온다. ASCII라는 알파벳 문자 코드가 있는데, 한 문자의 크기를 8비트로 했기에 8비트(1바이트)가 데이터 기본단위가 되었다. **ASCII코드는 뒤에 자세히 설명하겠습니다. ​ ​ 킬로바이트(KB) 1024바이트 = 1킬로바이트 1024바이트..

데이터를 가공하다보면 아래와 같이 키 이름이 정렬이 안되어있을때가 있다. 이 Object를 키 이름 순으로 정렬하려고 한다. ex) TOTALTM -> price01 -> price02 -> price03 -> 결제상태 그 전에, Object가 아닌 배열 하나의 정렬 부터 해보자면 아래와 같이 할 수 있다. let test = {"TOTALTM":1, "price02":20, "price03":1000, "price01":200, "결제상태":"주문완료"} Object.keys(test).sort().reduce((n,key) => { n[key] = test[key]; return n; }, {} ); 1) Object.keys() : 배열의 키 만 모아서 배열로 반환한다. ex) Object.keys..

예제 let testObject = [ { num : 1, name : '선물상자', price : 1000, count : 10 }, { num : 2, name : '선물포장', price : 700, count : 5 }, { num : 3, name : '볼펜', price : 1500, count : 7 }, { num : 4, name : '모니터', price : 2000, count : 15 }, { num : 5, name : '과자', price : 2000, count : 20 }, { num : 6, name : '선물리본', price : 300, count : 21 } ] 위 예제에서 name => "이름", price => "가격" 등 특정 출력을 위해 키 이름을 변경하고자 한..

상황 검색해서 나온 데이터들을 chart로 보여주는데, 같은 페이지 내 검색 조건을 다르게 해서 데이터가 달라질 경우 chart를 다시 띄우는데 새로 그려지지가 않는다. 처음에는 canvas is already in use 오류를 만났고 다음에는 차트가 변경되지 않는 오류를 만났다. 오류 설명 canvas is already in use 는 차트가 이미 있는데 또 New Chart()로 생성을 하려고 해서 생긴 오류다. New Chart()는 처음만들때 한번만 가능하고, 이미 같은 차트가 있는데 또 생성을 할 수는 없다. 재 생성하려면 기존 차트를 없애야 한다. 차트가 변경되지 않는 이유는 분병 리스트의 데이터 값는 달라졌는데 차트가 그대로 유지가된다. 해결방법 1) 차트를 아예 없애고 다시 생성하기 -..

chart.js 는 기본적으로 데이터에 맞게 조정되기때문에 무작정 사이즈를 조절하다보면 아래처럼 될 수도 있다.. 크기를 변경해주려면 option 에서 responsive : false 로 적고 canvas에 width랑 height를 지정해주면 된다. , options: { responsive : false , plugins: { title: { display: true, text: '합계' } } }

switch~case문이란? switch의 뜻은 스위치, "전환"이라는 뜻이고 case는 어떠한 "경우"를 의미한다. 해당 경우에 맞을경우, 그쪽으로 전환시키는 명령어. ​ 쉽게말하면, 자판기에서 1번을 누르면 커피가 나오고 2번을 누르면 우유가 나오는 것처럼 만드는 원리! ​ 앞서 배운 if문과 같은 원리이지만, if문이 엄청 많을경우 또는 조건이 딱 떨어지는경우 swith~case를 통해 간편하게 처리할 수 있다. ​ ​ 언제 Switch~case문을 실행할까? ① if문이 너무 많을 때 사용하면 효과적이다. ②많은 메뉴 구성 중, 딱 하나의 경우만 선택할 때 ​ ​ switch~case문의 구성 :(콜론) ->case뒤에 쓰며, case가 2개 이상일 경우 콜론으로 잇는다. break; ->swit..