아래와 같은 영문으로 된 현재날짜를 년도, 월, 일, 요일로 뽑아내는 방법은 다음과 같다. Fri Jul 08 2022 00:00:00 GMT+0900 1. 년도 추출하기 getFullYear() 메소드 사용 console.log(date) // Fri Jul 08 2022 00:00:00 GMT+0900 /***** 년도 추출 *****/ date.getFullYear() // 2022 참고링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear 2. 월 추출하기 1. getFullYear() 메소드 사용 2. Intl.DateTimeFormat() 메소드 사용 console.log..

vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며, 해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다. 이를 위해 특정 요소 외부클릭을 인식해야했다. dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다. 버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다. 1. 라이브러리 인스톨 나는 v-click-outside 라이브러리를 사용하였다. 우선 라이브러리 인스톨을 수행한다. npm install v-click-outside 2. import 및 directives 추가 import vClickOutside from 'v-click-outside' export default { ..

dom 요소의 클래스 목록을 확인하면서, 특정 클래스 존재 여부를 판단해야하는 필요성이 있었다. 객체에 특정 값이 있는지 확인은 다음과 같이 할 수 있다. 1. 객체 형태 let classList = event.target.classList console.log(classList) 출력 >> {"0":"apple","1":"banana"} classList라는 변수가 내가 확인하고자 하는 객체이다. 2. value값만 리스트로 뽑아내기 let classListValues = Object.values(classList) console.log(classListValues) 출력 >> ['apple', 'banana'] 3. 특정값 여부 찾기 (메소드 최종 결과) let result = Object.value..

기본 선언방식의 아쉬운점 사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다. 예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.) // 사용자 아이디 userInfoArr[0][1].userId[0]; // 사용자 이름 userInfoArr[0][1].userName[0]; // 사용자 주소 userInfoArr[0][1].userAddr[0]; 특정 값을 반복적으로 사용해야하는 경우가 있다고 할때 아래처럼 코드의 길이를 줄이고 가독성을 높이기 위해 명확한 뜻을 가진 변수명을 선언하곤 한다. const uInfo = userInfoArr[0][1]; uInfo.userId[0]; uInfo.userName[0]; uInfo.userA..

sort() 란? sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다. MDN에서는 기본 구문을 아래와 같이 정의한다. arr.sort([compareFunction]) * 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다. 정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다. 실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다. 10 이 2보다 먼저 정렬된다? 다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다. 2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다. 하지만 실제로는 10이 출력된다. 대체 왜일까? let sortArray = [7, 10, 2]..

에러내용 ag grid에서 headerName이 '컬럼명'인 컬럼에만 편집모드 옵션을 활성화했다. 그랬더니 필드값이 그리드상에 그려지지 않는 문제가 발생하였다. 셀을 클릭하여 편집모드를 활성화해보니 값을 가지고는 있으나 랜더링이 되지 않는 문제가 발생됐다. 해결방안 기본 그리드는 렌더러를 수행해야한다. 따라서 셀 렌더러(cellRenderer)로 파라미터값을 렌더링함으로써 해결할 수 있다. // 예시 let columnDefs = [ { headerName: 'No', field: 'id' }, { headerName: '컬럼명', field: 'columnName', cellRenderer: (params) => { return params.value } }, ] 참고링크 : https://stacko..

특정 조건을 만족하는 인덱스를 뽑아야 한다. 배열을 대상으로 할 경우 lastIndexOf() 를 사용하면 쉽게 찾아지지만, 배열안에 객체형태로 되어있는경우는 예외이다. 만약 다음과같은 데이터를 가진 arr 변수가 있다고 할때 나는 name이 jeongmin인 객체의 마지막 인덱스을 구하고싶다. let arr = [{ 'name': 'jeongmin', 'job': null }, { 'name': 'kim', 'job': 'dancer' }, { 'name': 'lee', 'job': 'actor' }, { 'name': 'jeongmin', 'job': 'developer' }] 해당 경우에 만약 아래 로직처럼 findIndex를 사용하게 된다면 조건을 만족하는 첫번째 값을 반환한다. let first..

부모 컴포넌트에서 데이터 바인딩을 통해 자식 컴포넌트로 데이터를 전달한다. (v-bind 디렉티브 사용!) 자식컴포넌트에서 데이터 변경이 발생시 v-on으로 선언된 함수로 데이터를 전송해 변경할 수 있다. 이때, 객체의 일부값만 변경하고싶다면 Object.assign 을 활용할 수 있다. 1. 부모에서 자식으로 데이터 전달하기 /* 부모컴포넌트 */ /* 자식컴포넌트 */ 위와같은 구조일때, 부모 컴포넌트에서 item 이라는 변수를 자식컴포넌트(child)에 바인딩 하였다. 자식컴포넌트에서 해당 데이터를 전달받아 아래의 방식으로 부모에게 전달할 수 있다. 2. 자식 컴포넌트에서 데이터 변경 후 부모로 전달하기 /* 스크립트부분 */ export default { props: ['item'], method..