15호의 개발자

[JQuery] datepicker dateFormat 작동 안 될 때 (날짜 형식 '연-월-일'순서로 변경) 제이쿼리 datepicker 작업 도중 12/25/2022처럼 '월/일/년' 순서로 표시되는 날짜 형식을 한국형 날짜 형식인 2022/12/25 '년/월/일' 순서로 변경하려고 했다. $(function () { $("#datepicker").datepicker({ dateFormat: 'YYYY-MM-DD' }); }); 위의 방식대로 진행해봤지만 날짜 포맷은 적용되지 않고 그대로 '연도/월/일' 순서로 보여졌다. $(function () { $("#datepicker").datepicker({ format: 'YYYY-MM-DD' }); }); datepicker의 속성 값을 dateForm..

윈도우 Node.js 설치 방법 (완전 삭제 및 재설치) Node.js를 설치하기 전에, 기존에 설치해놨던 적이 있다면 완전히 제거한 위데 설치해야한다. Node.js 설치가 잘못 되었거나, 예전에 설치해놓은 노드를 다 밀어버리고 새로 설치하고 싶을 때 기존에 설치해놓은 Node.js를 깔끔히 삭제하고 재설치하는 방법에 대해 알아보자. 삭제 및 설치는 윈도우즈를 기본으로 설명하겠다. Node.js 및 npm 삭제 1. 제어판 > 프로그램 추가/제거 > Node.js 삭제 2. 아래 경로에 해당하는 디렉터리 삭제 C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs C:\Users\User\AppData\Roaming\npm C:\Users\User\AppData..

[JavaScript] 정규식으로 validation check하기 (숫자 or 한글 or 영어 or 특수문자 입력 검증) validation check를 할 때 정규식(Regular Expressions)을 이용하면 코드의 양을 훨씬 간결하게 만들 수 있다는 장점이 있다. 물론 단점도 있는데, 정규식에 익숙한 사용자가 아닌 이상 직관적으로 이해하기는 힘들다는 단점이 있다. input box에서 vaildation check(유효성 체크)를 할 때, 아래 JavaScript 함수를 이용해 검증을 할 수 있다. input box에 입력시 숫자만 입력 가능한 경우, 한글만 입력 가능한 경우, 영어만 입력 가능한 경우, 숫자/한글/영어 모두 입력 가능한 경우 (특수문자는 입력 제외) 사용할 수 있는 함수이다...

[JS] keyup, keydown, keypress 차이 (키보드 이벤트 발생 시점 종류) 키보드 이벤트를 구분하는 기준에는, 이벤트 발생 시점이 중요하다. jQuery에서 지원하는 키보드 이벤트 종류에 대해 알아보자. 1. keyup - 키보드를 눌렀다가 손을 떼는 시점에 이벤트 발생 2. keydown - 키보드를 누르는 시점에 이벤트 발생 - 키보드를 계속 누르고 있는 경우에는 처음 한 번만 이벤트 발생 3. keypress - 키보드를 누르는 시점에 이벤트 발생 - 키보드를 계속 누르고 있는 경우에는 이벤트가 계속 발생 흔히 keydown과 keypress를 헷갈려하는 경우가 많으니 둘의 차이점을 명확하게 알고 있어야 한다.

[JavaScript] 날짜 형식 변경 (20220101 => 2022-01-01), (Y=>미동의) 아래는 자바스크립트를 이용한 날짜 포맷팅 방법이다. /* 날짜 포맷팅 (20220101 => 2022-01-01) */ function dateFormatting(data) { if (data == null || data == "") { return "-" } else { let y = data.substring(0, 4); let m = data.substring(4, 6); let d = data.substring(6, 8); return y + "-" + m + "-" + d; } } 아래는 자바스크립트를 이용하여 "Y"는 "동의"로, "N"는 "미동의"로 변경하는 방법이다. /* Y/N => 동의..

[JavaScript] JSON와 AJAX에 대해 JSON이란? JSON은 JavaScript Object Notation의 약자로, 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성-값의 쌍(Attribute-Value Pairs) 형태로 표현하는 개방형 표준 포맷이다. 비동기 처리에 사용되는 AJAX에서 XML을 대체하여 사용되고 있다. AJAX이란? AJAX는 Asynchronous JavaScript and XML의 약자로, 자바 스크립트를 사용하여 클라이언트와 서버 간에 XML 데이터를 주고 받는 비동기 통신 기술이다. 전체 페이지를 새로 고치지 않고도 웹 페이지 일부 영역만을 업데이트 할 수 있게끔 구현할 수 있다. 인터페이스 구현 인터페이스 구현이란 송·수신 시..

[JavaScript] 자바스크립트 기본 문법 몇 가지_1탄 1. 객체 안에 함수 넣기 자바스크립트에서는 객체 안에 함수를 넣을 수 있다. 함수가 객체 안에 들어가게 되면, this는 자신이 속한 객체를 가르킨다. const fruit = { name: "apple", say: function say() { console.log(this.name); } }; fruit.say(); // "apple" 추가적으로, 이 경우 함수는 이름이 없어도 된다. const fruit = { name: "apple", say: function() { console.log(this.name); } }; fruit.say(); // "apple"

[JavaScript] 객체 비구조화 할당 (객체 구조 분해) 객체 비구조화 할당 (=객체 구조 분해)을 이용하면 객체 안에 있는 값을 변수나 상수로 바로 선언해 주므로, 코드가 좀 더 간결해질 수 있다. 아래의 코드를 바로 봐보자. const fruit = ["apple", "grape", "banana"]; const [a, b] = fruit; console.log(a); // "apple" console.log(b); // "grape" const [a, b] = fruit; 부분이 비구조화 할당 문법이다. fruit 배열의 인덱스 0, 1번째의 값이 각각 a, b에 할당된다. 키-값 형식에서도 비구조화 할당이 가능하다. const fruit = { num: 4, name: "apple", pri..

[JavaScript] 템플릿 리터럴 사용법 (ES6부터) 자바스크립트는 2015년 이후 매년 새 버전이 나온다. 2015년에 업그레이드 된 자바스크립트는 ES6이라고 불리며 ES2015라고도 한다. 2016년에 나온 자바스크립트는 ES7(ES2016), 2017년에 나온 자바스크립트는 ES8(ES2017), 2018년은 ES9(ES2018), 2019년은 ES10(ES2019).. 템플릿 리터럴은 이중 ES6에 새롭게 도입된 문법이다. 문자열을 조합할 때 기존에는 + 연산자를 이용해 조합했던 것을 템플릿 리터럴 도입 이후에는 ` ${} ` 을 이용해서 사용할 수 있다. 사용 방법은 간단하다. const name = 'world'; console.log('Hello ' + name ); 기존에는 + 연산..

[JavaScript] filter() 함수 간단한 사용 방법 filter() 함수 사용 방법에 대해 간단히 알아보자. 우선, filter()은 true와 false에 반응한다. true를 받으면 filter처리를 하고, false를 받으면 filter처리를 하지 않는다. 먼저 예시부터 봐보자. 1. function alwaysTrue() {return true}; [1, 2, 3, 4].filter(alwaysTrue); //결과값: [1, 2, 3, 4] 항상 true가 반환되는 함수를 만들고, 이를 filter에 집어 넣으면 filter처리한 array는 모든 내용을 가지고 있다. 이번엔 false로 해보자. function alwaysFalse() {return false}; [1, 2, 3, 4..