인생은 효율성

TypeScript를 알기 전에 JavaScript는 어떤 특징을 가진 언어인지 먼저 살펴보겠다. 자바스크립트는 90년대 후반에는 전성기를 누렸지만 오래가지 못하고 안 좋은 이미지를 가진 언어로 취급되었다. 그러다가 05년 Ajax와 HTML5의 등장으로 자바스크립트가 재평가되었다. 자바스크립트는 크게 네 가지 특징을 가지고 있다. 스크립트 언어: 간편한 코딩을 목적으로 만든 언어. 객체지향적인 구조도 가지고 있어 재이용성과 유지보수성 인터프리터 언어: 일괄 해석을 하는 컴파일 과정이 필요 없음 여러 환경에서 이용 가능: Node.js, Windows Script Host, Android/IOS 등 에서 실행 가능 여러 요소로 구성됨 무엇보다 JavaScript는 동적 타입 언어이다. 동적 타입의 언어는..

자바스크립트하면 떠오르는 이미지 중 대표적인 것 중 하나가 '비동기'일 것이다. 하지만 자바스크립트는 싱글 스레드로 동작하는 언어라고 말하던데 어떻게 싱글 스레드이면서 비동기적일 수가 있는 걸까? 먼저 노드의 특징인 이벤트 기반에 대한 내용을 알아야 한다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 미리 지정해둔 콜백 함수가 실행된다. 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고 이벤트가 없거나 이미 다 처리했다면 노드는 대기 상태에 들어간다. 여기서 이벤트 루프라는 개념이 등장한다. 이벤트 루프는 여러 이벤트가 동시에 발생할 때 어떤 순서로 콜백 함수를 호출할지 결정해준다. *이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리, 순서를 결정한다. 노드가 종료될 때까지 작..

console.log(0.1 + 0.2); console.log(0.2 * 6); 위의 두 출력 결과는 어떻게 나올까? 실행해보면 결과는 각각 0.30000000000000004 이랑 1.2000000000000002 으로 예상과는 다른 숫자를 도출해낸다. 이건 자바스크립트의 오류인걸까? 결론부터 말하자면 자바스크립트 언어의 오류는 아니다. 전에 타입을 써야하는 이유에 대해 쓴 글을 읽어보면 그 이유를 알 수 있다. 2021.11.24 - [프로그래밍] - 타입을 사용하는 이유 타입을 사용하는 이유 컴퓨터의 숫자 표현 방법 인류는 10진수를 사용하고 컴퓨터는 2진수를 사용한다. 컴퓨터도 같이 10진수를 사용하면 기계어를 다룰 때 더 편할 텐데 왜 그렇게 되었을까? 숫자를 디지털로 변환할 bomoto.ti..

다른 언어와 다르게 자바스크립트에는 비교 연산자로 == 과 === 두 가지가 있는데 둘은 수행하는 역할이 다르다. == 동등 연산자(Equal Operator) 비교하려는 값이 타입이 다르다면 같은 타입으로 변경하여 비교를 한다. 쉽게 말하자면 자바스크립트가 어떻게든 둘을 같은 값으로 보기 위해 노력한다고 할 수 있다. (귀여운 js...) console.log('1' == 1); //true console.log(true == '1'); //true console.log(true == 1); //true console.log(false == 0); //true console.log('' == 0); //true console.log([] == 0); //true 위의 경우 전부 true를 반환한다. =..

기존의 방식으로 사용하던 함수에는 필요 없는 부분이 많다. 이런 부분을 전부 걷어내고 사용하자는 의도로 만들어진 것이 화살표 함수다. 화살표 함수 화살표 함수에는 =>만 있을 뿐 function키워드나 return키워드, 인수의 괄호, 중괄호가 모두 생략되었다. function getFirstLetter(str) { return str[0]; } 이와 같은 함수를 이름이 함수의 일부분으로 선언되었다는 뜻으로 기명 함수라고 한다. 혹은 아래와 같이 이름이 지정되지 않은 익명 함수를 선언하고 변수에 할당하는 방식도 있다. const getFirstLetter = function () { return str[0]; }; 여기서 화살표 함수를 만들기 위해 function키워드와 인수를 감싸던 괄호를 제거해보자...

변수를 선언할 때 깔끔하고 읽기 쉬운 코드를 작성하고 싶다면 const를 즐겨 써야 한다. 설명에 앞서 const, let, var의 특징에 대해 알아보자. 유효 범위 lexical scope: var / block scope: let, const 재할당 가능 여부 가능: let, var / 불가능: const 1 먼저 유효 범위에 대해 알아보면 블록 스코프인 let과 const는 변수를 선언한 중괄호를 벗어나면 변수에 접근할 수 없는 반면 var는 한 번 선언하면 어디서든 접근할 수 있다. * 여기서 헷갈리면 안 되는 게 자바스크립트는 함수 레벨 스코프를 사용하기 때문에 여기서 말하는 중괄호는 if문이나 for문 같은 제어문을 말하는 것이다. 자세한 사항은 스코프에 대해 더 알아보기 아래의 예시처럼 v..

지금까지 펼침 연산자를 일부 데이터를 수정하는 데에만 사용하고 있었다. const emp = { name: 'kim', age: 20, nick: 'bom' }; const setPerson(emp) { return [{ ...emp, age: 30 }]; } const newEmp = setPerson(emp); console.log(newEmp); // {name: 'kim', age: 30, nick: 'bom'} 하지만 펼침 연산자는 더 많은 용도로 쓸 수 있다. 1 첫 번째로 코드를 알아보기 쉽게 만들어준다는 것이 있다. const fruits = ['apple', 'banana', 'cherry']; const removeFruite = (fruits, willRemove) => { const..

공백을 엔터로 바꾸어서 한 줄로 되어있던 데이터를 여러 줄로 나타낼 것이다. const value = '123 456 789' const removeSpace = value.replace(/\s/g, '\n'); //공백을 엔터로 바꿈 console.log(removeSpace); //123 //456 //789 123 456 789 같이 공백으로 구분된 데이터를 정규식을 이용해 엔터로 바꿔주면 아래처럼 여러 줄로 나오게 된다. 123 456 789 이걸 응용해서 공백이 아니라 콤마로 구분되어 있는 데이터를 여러 줄로, 혹은 공백으로 구분되어 있는 데이터를 콤마로 바꿔줄 수도 있다. const comma = '123,456,789' const removeComma = comma.replace(',', '..

인풋 창에 여러 가지 값을 동시에 검색하는 기능을 구현하려고 한다. 각 값의 구분을 해줘야 하기 때문에 구분자를 먼저 정한다. 만약 구분자를 콤마(,)로 정했다면 엔터에 해당하는 정규식을 콤마로 대체해주면 된다. 위와 같이 입력해서 123의 검색 결과, 456의 검색 결과, 789의 검색 결과를 모두 한 번에 조회하려면 아래와 같이 사용한다. const toComma = value.replace(/(?:\r\n|\r|\n)/g, ','); //엔터를 콤마(,)로 바꿈 console.log(toComma); // 123,456,789 이렇게 하면 123,456,789의 형태로 바꿀 수 있다. 이 값을 콤마로 잘라서 하나씩 DB로 보내 조회하면 된다.

static CheckEmail(email: string) { const regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[a-zA-Z]([-_.]?[a-zA-Z])*.[a-zA-Z]{2,3}$/i; if (regExp.test(email)) { return true; //형식에 맞음 } else { return false; } } 이메일 유효성 검사하는 정규식 유효성 규칙 : [알파벳(특수문자 불가, 언더바나 슬래쉬는 마지막에 쓸 수 없음)] + [@] + [알파벳] + [.] + [알파벳 2자리 이상] ex) bomoto@gmail.com true bo*oto@gmail.com false bomo_to@gmail.com true bomoto_@gmail.com false ..