useRef const refContainer = useRef(initialValue); useRef는 .current 프로퍼티로 전달된 인자(initialValue) 로 초기화된 변경 가능한 ref 객체를 반환한다. 변환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다. 일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우: func...

Lodash [JavaScript, Library] 강력한 자바스크립트 유틸리티 라이브러리이다. 보통 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 해준다. 배열, 숫자, 객체, 문자열 등으로 작업하는 번거로움을 없애서 JavaScript를 더 쉽게 만든다. 배열, 객체 & 문자열을 i...

typestack 의 class-transformer 왜 class-transformer 를 공부하게 되었나? rtk query 를 사용하면서 였다. 기본적으로 api 를 쿼리로 제어할 때 , req arg 와 res arg 의 타입을 미리 지정해놓고 사용 했었다. 그런데 이번에 wms 를 개발하게 되면서, url path 에 넣을 프로퍼티를 re...

RTK query Error Handling 개요 fetchBaseQuery 를 사용할 때, 너의 쿼리나 뮤테이션이 error를 throw 할 때. error프로퍼티를 리턴할 것이다. 컴포넌트는 쿼리가 에러를 던질 때 마다 re-render 가 될것이며, 원한다면 에러에 적절한 UI를 보여줄 수 있을 것이다. Error Display Exampl...

try …catch try ...catch 문은 실행할 코드블럭을 표시하고 예외(exception) 가 발생(throw)할 경우의 응답을 지정한다. try { nonExistentFunction(); } catch (error) { console.error(error); // Note- 에러메시지는 브라우저에 따라 다양하다. } 문법...

상속과 변수(멤버, 메서드) 변수의 상속 자식클래스는 부모 클래스 변수를 물려받아 사용할 수 있음 private로 정의된 변수는 상속되긴 하지만 접근할 수 있는 권한이 없다. class Employee { public name: string; employeeNo: number; private salary: number; //...

FormData 객체 FormData 란 ajax 로 form data 전송을 가능하게 해주는 객체. 보통은 HTML5 의 <form> 태그를 이용해 input 값을 서버에 전송하지만, formdata 를 이용해 스크립트로도 전송할 수 있음. FormData 활용 보통은 Ajax 로 폼(form 태그) 전송을 할 일이 거의 없다. 주로...

TypeScript 에서 Class 와 Interface 의 차이!! 기본정의 인터페이스 ES6가 지원하지 않는 타입스크립트 만의 특징. interface 는 타입이고, 컴파일 후에 사라짐. 인터페이스는 선언만 존재 멤버 변수와 멤버 메서드를 선언할 수는 있으나 접근 제한자는 설정할 수 없다. 타입 체크목적으로만 인터페이스를 ...

현재 만들고 있는 프로젝트의 모든 서버와의 통신은 RTK Query를 통해 제어하고 있다. (한두개를 제외하고는) api 통신을 하면서 받아오는 데이터를 바로바로 Redux에 저장할 수 있었고, 따로 actions 라는 boilerplate 를 만들어 주지 않아도 되어서 매우 편했다. RTK Query 를 작성하면서 있었던 일을 좀 나열해 보고자 ...

Jekyll Chirpy 테마를 새로 등록하고, 3번째 글을 작성하는데 빌드가 안되는 경우가 생겼다. 다음과 같은 에러가 생겼는데 확인해보자. ERROR : did not find expected key while parsing a block mapping at line 2 column 1 ERROR : Input contains prohibit...