판교너굴맨의 개발노트

프로젝트 중에 mock 데이터를 여러 형태로 정렬 해보면서 다양한 방법을 사용하게 되었다. 오늘 사용한 방법들을 한 번 정리해 보려고 한다. sort 함수란 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 포인트를 따른다. 기본 정렬 const test = ['b','a','c','g','d'] test.sort() console.log(test) // ['a','b','c','d','g'] compareFunction 파라미터 정렬의 순서를 정의하는 함수 const test = [10, 3, 8, 4, 1]; test.sort((a, b) => { console.log(a,b); return a - b; }); /* a : 3 b : 10 a : 8 b ..

interface A { key: number; value: number; test1: number; } interface AA { key: number; value: number; test2: number; } const a: AA = { key: 1, value: 2, test2: 3 }; interface B extends AA { test1: number; } interface C{ test3: number; } console.log((a as unknown as A).test1); // undifind (AA와 A는 연관된 관계가 아니다.) console.log((a as B).test1); // undifind (AA와 B는 연관된 관계이다.) console.log((a as B).test2)..

문제발생 react typescript로 Plotly.js 차트 라이브러리를 사용하는데 문제가 발생. 히스토그램 차트의 속성 중에 xbins 와 ybins가 있다. 수직 히스토그램에서 xbins 속성은 잘 사용 되지만, 수평 히스토그램에서 ybins 속성은 에러가 나며 사용이 되지 않았다. 해결 과정 공식 홈페이지 차트 에디터에서는 ybins속성이 적용되는 걸 확인했다, 타입스크립트 문제라 생각하고 data 속성의 Data[] 타입을 타고 들어가서 xbins와 ybins를 검색해봤다. 그 결과 xbins 속성은 있었지만 ybins속성은 없었다.. 해결 타입스크립트의 타입 단언으로 해결할 수 있었다. //타입 단언 예제 type TestType = { a: string }; const test = { a:..

'TypeError: window.URL.createObjectURL is not a function' URL.createObjectURL() 이 메소드를 알기 전에 먼저 Blob 객체부터 알아야 한다. Blob Blob은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. Blob 객체를 통해 데이터의 크기 및 MIME 타입을 알아내는 등의 작업을 할 수 있다. Blob 객체를 url로 만들 때 URL. createObjectURL 메소드를 사용한다. URL. createObjectURL()메소드는 Blob 객체를 나타내는 URL을 포한한 다음과 같은 DOMString을 생성한다. (blob: URL) 문제 발생 jest로 react testing 중 Plotly.js 차트를 사용한..

문제 발생 React Testing 중 아래의 코드에서 계속 문제가 생겼다. test('test', () => { //given render(); const menuButton = screen.getByText('사내문서'); //when fireEvent.mouseOver(menuButton); const dropdownMenu = screen.getByText('도서대장'); //then expect(dropdownMenu).toBeDefined(); }); 먼저 ant Design 의 드롭다운을 사용했다. 드롭다운 시 도서대장 메뉴가 DOM에 출력 되는지 확인하기 위한 테스팅 코드이다. 문제가 없어 보이는 코드이지만 screen.debug() 실행시 '도서대장' Text가 출력이 되지 않는다. 즉,..

문제 발생 페이지가 이동하면 window.location.pathname의 값이 페이지 별로 받아와야 하는데 로딩 시에만 받아와서 헤더 컴포넌트가 원하는 화면에 출력되지 않음 해결 과정 contents 컴포넌트는 router가 적용된 컴포넌트가 아니기 때문에 window.location.pathname의 값이 로딩 될 때 한 번 받아오고 컴포넌트 끼리 라우터 될 때는 값을 받아오지 못했다고 생각함. 해결 withRouter함수로 라우터 컴포넌트가 아닌 contents컴포넌트를 감싸면 해당 컴포넌트에 라우터 기능이 적용 되어 history, match 등의 함수를 사용할 수 있으며, 페이지 이동 시(라우터 페이지) 주소 값을 받아올 수 있음 function Contents({ history }: Route..

처음 이 연산자를 접하고 ‘왜 이 좋을걸 이제 알았지?’ 라는 생각을 하게 되었다. 병합 연산자는 ??로 사용한다. 병합 연산자를 예를 들어 설명해보자면 let x = foo ?? bar(); 라는 식이 있을 때 foo 가 null or undefined 가 아닐 경우 x = foo 그 외의 경우는 x = bar(); 위의 코드를 풀어서 작성하게 되면 아래와 같은 식이 된다. let x = foo !== null && foo !== undefined ? foo : bar(); 자세한 내용은 공식문서에서 확인할 수 있다. 프로젝트에 적용 사례 회사에서 프로젝트를 진행하는데 find 함수를 사용할 때 undefined를 if문에 체크해야할 일이 있었다. (find 함수는 조건과 해당하는 값이 없을 경우 un..