프린세스 다이어리

Mocha.js와 RxJS 테스트 도구를 통해 비동기 코드를 어떻게 테스트하는지 알아본다. 책 내용 재정리 1. 동기 함수 테스트 순수함수 특징 범위가 작고, 명확하게 정의된 매개변수 세 개정도를 가짐. 예측 가능하고 일관된 출력을 냄 전달된 인수로부터 결과가 바로 결정되는 결정론적인 특성이 있어, 테스트 결과는 인수에 달려 있음. export const isNotEmpty = (input) => { return !!input && input.trim().length > 0; }; import { expect } from "chai"; import { isNotEmpty } from "../9_1.js"; describe("기본적인 동기 테스트 코드", () => { it("간단한 빈문자열 밸리데잇 함수..

1. DOM이란 무엇인가? 내가 IDE에서 작성한 HTML 코드는 DOM이 아니다. 단순한 문자열일 뿐이다. DOM은 내가 작성한 HTML 코드를 실제 문서로 보여주기 위해 브라우저가 파싱해서 만든 노드 트리다. 이 DOM은 자바스크립트 API를 제공한다. 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체로 변환되었고 자바스크립트로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등이 가능하다. 그래서 자바스크립트를 DOM API 라고도 부르는 것이다. // 노드 추가 const newTextDiv = document.createElement('div') const helloWorld = document.createTextNode('Hello world!') newTextDiv.ap..

이전까지는 여러 스트림의 출력을 동시에 하나로 결합하는 방법 살펴봄. 이번 내용에서는 옵저버블 자체에서 다른 옵저버블을 방출하는 “중첩 옵저버블" 처리하는 방법 살펴볼 예정. 1. Intro (1) 중첩 옵저버블이란? const search = Rx.Observable.fromEvent(inputText, 'keyup') //... .map(query => sendRequest(testData, query)) // sendRequest는 비동기작업하는 옵저버블 // ... .subscribe(console.log) 사용자가 입력한 키워드를 포함하는 스트림을, 키워드에 대한 검색결과의 배열로 변환함. 근데 그 sendRequest 옵저버블 자체가 옵저버블 객체를 반환하는 상황. // sendRequest(..

회사 FE 스터디때 내 차례에서 발표한 내용 정리 옵저버블을 하나로 합치지 않는다면? 예: 마우스와 터치 동작에 대한 각각의 옵저버블 const mouseUp$ = Rx.Observable.fromEvent(document, 'mouseup'); const touchEnd$ = Rx.Observable.fromEvent(document, 'touchend'); 이 2개의 옵저버블을 개별적으로 구독할 수는 있겠지만 한계점이 있다. 동일한 코드일 가능성이 큰 구독 영역이 두 개 존재 둘 사이에 공유되어야 하는 모든 코드는 외부 공유 상태가 필요. 두 개의 구독을 추적해야 해서 잠재적인 메모리 누수 영역 하나 더 생김 → 둘은 유사한 이벤트를 방출하기 때문에, 단일 코드 블록으로 두 구독을 관리하는 게 낫다...

RxJS 공부를 시작하다가, 기존 자바스크립트에서 어떤 방식으로 프로미스를 처리했는지 다시 공부하고 싶어 예전에 공부한 내용을 정비하여 끌올해보았다. 내용 출처: 모던자바스크립트 Deep Dive 45장 1. Promise.resolve / Promise.reject 📌 Promise.resolve / Promise.reject 는 이미 존재하는 값을 래핑하여 프로미스를 생성함 인수로 전달한 배열을 resolve하는 프로미스를 생성 const resolvedPromise = Promise.resolve([1,2,3]) resolvedPromise.then(console.log) // [1,2,3] const resolvedPromise = new Promise(resolve => resolve([1,2,..

스토리북 공식문서에 정말 상세하게 잘 나오기는 했으나 필요한 기능을 찾아 조합하는 것은 좀 다른 문젠 것 같다. 가장 단순한 샘플 Button 컴포넌트를 예시로 기록해보겠다. 1. 버튼의 props 옵션 선택하는 기능 추가하기 import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs'; import BaseButton from 'common/components/input/BaseButton.vue'; Meta > argTypes에 옵션이름 > control > options 에 배열로 기존 컴포넌트에서 props로 넘겨받는 값들을 나열해서 넣어준다. control > type에 select로 지정하면 드롭다운이, radio로 지정하면 라디오..

1. 문제상황 컴포넌트를 개발하기 이전에 스토리북을 짜는 게 아니라, 이미 개발한 공통 컴포넌트를 기반으로 스토리북 독스를 작성하는 상황이다. 우리 스토리북 프로젝트는 모노레포로 구성돼 있어, 스토리북 자체 stories 레포와 vue 공통 컴포넌트만을 가지고 있는 component 레포가 함께 있다. component 레포의 vue 파일을 끌어다가 stories 레포에서 문서를 작성하는 특이한 상황이라, svg 파일이 쉽사리 import 되지 않아 세팅에 시간을 좀 들이게 됐다. storybook - node_modules - stories - node_modules - package.json - components - node_modules - package.json - package.json - y..

어떤 컴포넌트 내에서 서버에 데이터를 요청해서 응답을 받아오는 경우가 있다고 가정하자. 그리고 이 컴포넌트에서 에러가 발생하면 센트리에 에러로그를 보내는 상황이다. 여기에서 센트리에 api 에러인 것과 클라이언트 에러인 것을 구분해서 클라이언트 에러인 것만 로깅하기 위해서는 api 요청 함수 내에 ServerException을 하나 정의해서 에러를 throw 해주면 된다. // exception.ts export class ServerException extends Error { constructor(msg: string) { super(msg); Object.setPrototypeOf(this, ServerException.prototype); } } 먼저 이렇게 에러를 extend하는 ServerEx..