본문 바로가기

개발/JS

 (7)
[스크랩] Javascript: hasOwnProperty 쓰는 이유 const copy = {}; let sum = 0; for (let key in obj) { if (obj.hasOwnProperty(key)) { sum += copy[key] = obj[key] * 2; } } 위의 코드에서는 왜 hasOwnProperty를 사용할까? 왜냐하면 프로토타입 체인을 통해 새로운 값을 추가적인 property를 만드는 경우 원치 않는 결과가 발생할 수 있기 때문! 누군가가 다음 코드를 새로 추가했다고 하자 Object.prototype.toText = function() {...} 그러면 반복문에 hasOwnProperty를 사용하는 부분이 없다면 toText 값이 sum에 더해져 문제가 발생할 수 있다! for (let key in obj) { sum += copy[k..
[JS] 이메일 정규식 RFC 5322 기준 /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/수정된 버전 (유저네임 제한) /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/수정된 버전 2 (숫자 도메인 불가능) /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/ 참고: http..
[Cypress] Cypress 사용하여 Express로 만든 웹 서버 테스트 해보기 E2E Test 종단(Endpoint) 간 테스트로 사용자의 입장에서 테스트 하는 것 입니다. 보통 Web, App 등에서 GUI를 통해서 시나리오, 기능 테스트 등을 수행합니다. Cypress를 사용하여 E2E Test를 할 수 있습니다! NodeJS에서 Cypress를 사용하여 간단한 웹 페이지를 테스트를 해봅시다. 1. 프로젝트 초기화 $ npm init -y $ npm install -D cypress $ npm install --save express 2. Express를 사용한 웹 서버 코드 작성 (app.js) localhost:3000으로 접속시 태그안에 Hello 문자를 반환하도록 하였습니다. const express = require('express'); const app = expre..
[Jest] describe describe: 연관된 test 목록을 그룹핑 시켜주어 테스트 결과를 표시하도록 합니다. 클래스, 컴포넌트과 관련된 테스트를 그룹핑하여 테스트하는데 이용할 수 있습니다. 사용 예) const myBeverage = { delicious: true, sour: false, }; const sum = (a, b) => { return a + b; } test('sum a + b', () => { expect(sum(1, 2)).toBe(3); }); describe('my beverage', () => { test('is delicious', () => { expect(myBeverage.delicious).toBeTruthy(); }); test('is not sour', () => { expect(my..
[NodeJS] EventEmitter EventEmitter: 이벤트를 발생시키는 클래스. 특정 이벤트가 발생할 때마다 함수가 호출됨. 사용되는 곳 fs.ReadStream: 파일을 오픈했을 때 이벤트가 발생됨 net.Server: 피어가 연결될 때 마다 이벤트가 발생됨 예제 코드 const EventEmitter = require('events'); class MyEmitter extends EventEmitter {} // EventEmitter 상속 const myEmitter = new MyEmitter(); myEmitter.on('event', () => { // 'event' 이름의 event 등록. console.log('an event occurred!'); }); myEmitter.emit('event'); // 'even..
[JS] 웹 워커 (Web Worker) 웹 워커? 웹 브라우저에서 스레드를 사용하여 script를 백그라운드에서 수행할 수 있도록 해줌 Web Workers API postMessage : Worker 자신의 내부 영역으로 메시지를 전달. 해당 메소드는 Worker 자신에게 보낸 data를 받음 terminate : 즉시 Worker를 종료 onmessage : Worker 객체의 message 이벤트를 구독하면 워커로부터의 메시지를 전달받을 수 있다. onerror : Worker 객체가 예외를 발생시켰으나 내부적으로 처리되지는 않았다면, 해당 예외는 onerror에 전파된다. 활용 방법 1. 백그라운드에서 수행할 작업을 js에 작성(onmessage 함수) // js/worker.js onmessage = function (e) { con..
[JS 기초] Generator 함수 Generator 함수: 빠져나갔다가 나중에 다시 실행할 수 있는 함수 입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다. 문법: function* name([param[, param[, ... param]]]) { statements } Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 iterator 객체가 반환 Iterator의 next() 메서드를 호출하면 Generator 함수가 실행되어 yield 문을 만날 때까지 진행합니다. 이후 다시 next() 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. next() 가 반환하는 객체는 yield문이 반환할 값(yielded value)을 나타내는 value 속성과, Generator 함..

티스토리툴바