Youbiiin's Blog

Study/Vue

mouseover 시 툴팁이 생기게 작업을 하였다. - 처음 내가 작업한 구조 {{ row[col.value] }} {{ row[col.tooltip] }} 에 mouseover 시 툴팁이 나타나는 구조이다. 근데 mouseover 할 때마다 툴팁이 번쩍번쩍 거리는 것이다. 왜 그런지 잘 생각해 봤더니.. 툴팁이 나타날 때 마우스가 툴팁영역에 있어서(?) 자꾸 번쩍번쩍 거리는 것이었다. 무슨 뜻이냐면... 마우스 이벤트를 에만 줘서 그런거였다..! - 해결 {{ row[col.value] }} {{ row[col.tooltip] }} 이렇게 이벤트를 감싸주는 요소에 줬더니 tooltip에 마우스가 가 있어도 toolTipOn이 유지가 된다! 생각해보면.. 너무 당연한 것인데, 자주 실수하는 것 같아서 기..

2023. 2. 13.

Study/Git

종종 협업하다 git에 올리면 안되는 것들을 커밋해서 충돌(?)이 나는 경우가 많았다. 아래는 git 에 commit하면 안되는 리스트이다. .node_modules .idea .git .env .vsc

2022. 6. 2.

Study/Vue

컴포넌트에서 props으로 넘긴 값을 배열로 받고 싶으면, prop을 배열로 받으면 된다. @Prop({default: () => []}) buttonType?: string[]; data가 buttonType: ['join' ,'change'], 이렇다고 치면, 이렇게 buttonType 배열 안에 join이 있으면 true로 반환하여 버튼이 보여지고, 없으면 -1로 false를 반환하여 버튼이 없게 된다.

2022. 6. 2.

Study/JavaScript

배열의 생성 var arr1 = [1, 2, 3]; // 배열 리터럴을 이용한 생성 var arr2 = Array(1, 2, 3); // Array 객체의 생성자를 이용한 생성 var arr3 = new Array(1, 2, 3); // new 연산자를 이용한 생성 세가지 방법은 모두 같은 배열을 만들어 준다. 배열의 참조 // 배열이름[인덱스]로 사용할 수 있다. arr1.[1] // 2 자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 한다. 이러한 배열의 길이는 length 프로퍼티에 자동으로 갱신된다. length 프로퍼티 배열의 length 프로퍼티에는 배열 요소의 최대 인덱스 값 +1이 담겨있다. length 프로퍼티 값을 가리켜 배열 길이라고 부른다. arr1.length // 3 len..

2022. 1. 12.

Study/JavaScript

자바스크립트 내장객체 자바스크립트에는 사용할 수 있는 생성자에는 사용자가 정의하는 생성자 외에도 자바스크립트에 처음부터 포함된 내장 생성자가 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects Date 생성자 날짜와와 시간을 저장할 수 있고 날짜와 관련 된 메서드도 제공해준다. Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜도 출력할 수 있다. var now = new Date(); console.log(now); // 현재 날짜 및 시간 출력 아래는 Date 객체가 제공하는 주요 메서드이다. getFullYear() : 연도를 반환한다. getMonth() : 월을..

2022. 1. 12.

Study/JavaScript

생성자 함수 함수의 이름의 첫글자는 대문자로 시작 반드시 new 연산자를 붙여 실행한다. function User(name, age) { this.name = name; this.age = age; } var user = new User('youbin', 32); console.log(user.name); // youbin console.log(user.age); // 32 new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다. 빈 객체를 만들어 this에 할당한다. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다. this를 반환한다. function User(name, age) { // this = {}; 빈 객체가 암시적으로 만들어진다. //..

2022. 1. 12.

Study/JavaScript

함수란? 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 입력을 받아서 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter), 입력을 인수=인자(argument), 출력을 **반환값(return value)**라고 한다. 함수 선언을 위해서는 Keyword, name, parameter, body 가 필요하다. // keyword -> function // name -> hello // parameter -> () // body -> {} function hello() { } 함수의 특징 함수는 function 키워드로 시작하고, 실제로는 객체이다. 함수는 정의/생성할 수 있으며, 출력도 할 수 있다. 객체의 특성 덕분에 함수..

2022. 1. 12.

Study/JavaScript

객체 객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다. var card = { card1: 10, // 프로퍼티 card2: 20 // 프로퍼티 } // card1, card2 : 프로퍼티 이름 // 10, 20 : 키 객체 리터럴 객체 리터럴은 객체를 생성하는 방법중에 하나이고, 가장 간단하다. 위 코드에서 {...}이 부분이 객체 리터럴이다. 프로퍼티 접근 프로퍼티의 값을 읽거나 쓸때는 마침표(.) 연산자 또는 대괄호[] 연산자를 사용한다. card.card1 //10 card['card2'] //20 // 대괄호를 써서 접근할 경우에는 ''안에 감싸주어야 한다. // 그렇지 않으면 card2란 변수의..

2022. 1. 12.