본문 바로가기

Programming/Javascript91

[Javascript] 자바스크립트 테스트 도구 Jasmine Jasmine은 자바스크립트 테스트 프레임워크입니다. 애플리케이션 규모가 갈수록 커지고 있는 상황에서 소프트웨어 공학 분야에서 테스트의 중요성을 날로 커지고 있습니다. 테스트를 직접 만들어 수행할 수도 있지만 프레임워크의 힘을 빌린다면 보다 간편하게 테스트를 작성하고 실시할 수 있게됩니다. 그래서 이번에는 자스민을 소개해드리려고 합니다. (작성 시점 기준 jasmine 4.0.0을 사용했습니다.) 1. 자스민 설치 서론에서 자스민이 무엇인지 설명했으니 바로 설치를 시작하겠습니다. 링크에서 자스민 .zip파일을 다운받아주세요. 그 다음 압축풀기해서 나온 파일들을 프로젝트 작업공간으로 복사 붙여넣기 하면 됩니다. spec과 src 폴더 내부에 자스민에서 제공하는 예시 테스트 코드가 있는데 이 코드들은 삭제해.. 2022. 1. 12.
[Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es2015에 추가된 문법입니다. 1. 반복자 Iterator Iterator는 반복된 처리가 가능한 객체를 의미합니다. 다른 말로는 객체 내부의 내용을 열거가 가능해서 각 요소들에 대해서 반복처리가 가능한 것들을 의미합니다. 대표적으로 Array, String, Set, Map 등이 반복자를 가지고있는 객체입니다.반복자를 가지고있는 객체들은 보통 다음과 같이 for~of문을 통해서 요소를 열거할 수 있습니다. ES2015부터 추가된 이터레이터 객체는 next()라는 메소드를 갖습니다. 이 메소드의 반환값으로는 done과 value를 가진 객체를 반환합니다. done은 반복이 끝났는지(끝났다면 true, 끝나지 않았다면 false).. 2022. 1. 11.
[Javascript] Symbol 심볼은 ES2015에서 추가된 새로운 데이터 형입니다. 1. Symbol 심볼(Symbol)은 상징의 뜻을 가지고 있습니다. 흔히 이메일에 사용되는 @(a.k.a 골뱅이라고 하는 at Sign, 의미는 ~에서, 에게)가 대표적인 상징입니다. 이처럼 Symbol 형이란 어떤 값에 식별되는 유일한 이름을 붙이기 위해서 사용합니다. 우리가 문자열에 @가 존재한다면 아 이게 메일 주소일 확률이 높구나 하고 추정하거나, 길을 가다가 어떤 건물에 편지봉투가 있다면 아 여기는 우체국이겠구나 하고 알아 볼 수 있는 것 처럼, 어떤 값에 식별이 가능한 값을 주어 알아볼 수 있도록 하는 데이터 형입니다. 심볼형은 다음과 같이 Symbol()을 통해 만들어집니다. 생성자가 아니므로 앞에 new가 오지 않는 점이 여태까지의 .. 2022. 1. 10.
[Javascript] numeric separators 오랜만에 돌아온 자바스크립트 문법 소개시간입니다. 이번에 소개할 문법은 es2021에 추가된 numeric separators입니다. 1. numeric separators 기존에 포스트에 합쳐버릴까 했지만, 신규 사양이니 일부러 따로 빼었습니다. numeric separators는 숫자 단위를 구분할 수 있게 해주는 문법입니다. 사용법은 간단하게 기존 숫자에서 구분하고 싶은 자리에 언더바를 넣어주기만 하면 됩니다. 예전에 제가 심심풀이로 만든 학교 과제에서 다음과 같은 상수가 있습니다. 무려 43억 5천만 단위를 가지고 있습니다. 이전까지는 우리가 이 숫자를 읽을려면 커서를 대가며 일일히 읽어야 했지만 이제는 다릅니다. const TO_THE_NEPTUNE = 4350000000; const TO_TH.. 2022. 1. 6.
[Javascript] optional chainning ?. 1. optional channing 옵셔널 체이닝은 프로토타입 체인으로 묶인 객체들의 프로퍼티에 안전하게 접근할 수 있게 됩니다. 안전하게 접근한다는 말은 접근하려던 프로퍼티가 존재하지 않는다면 기존에는 그냥 오류를 뱉어버렸지만, 옵셔널 체이닝을 이용하면 존재하지 않아도 오류를 뱉지 않고 스크립트를 계속 실행하게 됩니다. 다음과 같은 코드에서는 당연하게도 결과로 TypeError를 뱉어냅니다. obj 객체 아래 name.address가 존재하지 않기 때문이죠. const obj = {}; console.log(obj.name.address); 이렇게 에러를 뱉는 순간 스크립트를 정지하게 됩니다. 하지만 실제 상황에서는 이런경우에도 에러는 따로 처리하고 스크립트 읽기를 계속해야합니다. 사용자가 사용하다 .. 2021. 11. 24.
[Javascript] shorthand property names 객체를 정의하다보면 꽤 자주 key와 value를 같은 이름으로 사용하게 되는 경우가 발생하는데, 같은 단어를 두 번 사용하는게 은근히 귀찮죠. 이런 문제를 해결하는 새로운 표기법이 shorthand property names입니다. 1. shorthand property names shorthand property names은 객체에서 key와 value명이 같은 경우 축약해서 사용할 수 있게 만들어주는 문법입니다. //기존 객체 코드 const obj = { name: name, color: color, x: x, y: , }; //shorthand property names를 이용한 코드 const obj = { name, color, x, y, }; 2. shorthand method names .. 2021. 11. 24.
300x250