15호의 개발자

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

[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] 자바스크립트 기본 문법 몇 가지_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..

[JavaScript] forEach() 함수사용방법 자바스크립트에서 forEach() 함수는 배열 요소 만큼 함수를 실행시키는 함수이다. 예시를 바로 봐보자. 1. const array = [1, 2, 3]; function sayHello() { console.log("Hello"); } array.forEach(sayHello); 1단계. array의 요소는 3개이다. 2단계. forEach에서 실행할 함수는 sayHello이다. (sayHello뒤의 괄호()는 적지 않는다.) 3단계. sayHello를 3번 실행한다. (=sayHello를 array의 요소 개수만큼 실행한다.) 위 예시의 결과 Hello가 3번 출력된다. 2. forEach() 함수는 각 element에 접근하는 방식이다. ele..

[JavaScript] setInterval(), setTimeout() 자바스크립트에는 일정 시간 간격으로 함수를 실행하는 기능이 있다. setInterval(), setTimeout() 메서드를 이용하면 된다. setInterval()은 일정 시간 간격(interval)을 두고 함수를 실행하게 만드는 기능이고, setTimeout()은 일정 시간이 지난 후에 함수를 실행하게 한다. 두 메서드의 문법은 아래와 같다. setInterval(함수명, interval간격) setTimeout(함수명, delay시간) 시간 간격의 기본 단위는 ms(밀리초)이다. (1000ms = 1s(초)) setTimeout 함수의 두 번째 파라미터에 다음과 같이 0을 넣으면 delay 시간이 0이 되므로 함수는 바로 실행..

[JavaScript] toggle 메서드 toggle은 h1의 classList에 clicked class가 있는지 확인 있으면 clicked를 제거 없다면 clicked를 classList에 추가 toggle은 on/off처럼 껐다 켰다(왔다 갔다)하는 기능이다. 토글 버튼은 on/off처럼 두 상태 중 하나를 선택할 때 사용하는 버튼이다. 보통 아래와 같이 classList를 이용하여 많이 쓰고, click 이벤트와 함께 많이 사용한다. function 함수명() { 태그명.classList.toggle("클래스명"); } 변수명.addEventListener("클래스명", 함수명);

[JavaScript] 자바스크립트 놓치기 쉬운 기본 개념들 1. const vs let const는 상수를 입력할 때 쓰인다. 상수란 변하지 않는 값으로, 한 번 정하면 나중에 바꿀 수 없다. const a = 5; console.log(a+a) // 10 const a = 10; console.log(a+a) // Assignment to constant variable. 에러 위의 예시처럼 a를 const로 정해놓고 5를 입력했으면 이후 이 값은 바뀔 수 없다. 이 a값을 10으로 바꾸려 했더니 Assignment to constant variable. 에러가 떴고, 이는 상수값에 값을 적용하려 했다는 의미의 에러이다. 값을 마음껏 변경하고 싶은 변수값을 입력하려면 const가 아닌 let을 이용해..