Front-end/Javascript (5) 썸네일형 리스트형 [TypeScript] API Fetch 하나로 합치는 작업 - 기록용 기존 Api호출 Fetch들이 나누어져있었다. 그거를 한개로 통합해야될 필요성이 있어서 한개로 합치게되었다. 먼저 예시로 어떻게 수정이되었는지 기록용으로 남긴다. 로그인부분으로 예를 들겠다. OTP로 로그인시 const resp = await api.call(`auth`, `mfa`, otp.value); 이렇게 요청을 하는데 ✅ /* Start: OTP입력 */ if (!dialogsStore.alertFlag) { if (isNil(otp.value.otp)) { pushNoti(`error`, `MGS.OTPINPUT`); /* OTP를 입력해 주세요 */ return; .. [TypeScript] 옵셔널 프로퍼티(optional property) ✅옵셔널 프로퍼티(optional property)객체의 속성 중 필수가 아닌, 있어도 되고 없어도 되는 속성값을 할당하지 않아도 문제가 없다.인터페이스나 타입 정의에서 물음표 ?를 사용하여 표시한다. interface Data { check?: boolean; // check는 있어도 되고 없어도 됨} const d1: Data = { check: true }; // 정상, ok가 true (boolean 타입)const d2: Data = { check: false }; // 정상, ok가 false (boolean 타입)const d3: Data = { check: undefined }; // 정상, ok가 undefined (옵셔널이기 때문에 허용)const d4: Dat.. [TypeScript] 핵심 고급 문법 - 제네릭 / keyof연산자 / Mapped Types (매핑된 타입) / Conditional Types (조건부 타입) 타입스크립트를 보다가 한줄의 문법을 보게되었는데 잘 모르는 부분이 있어서 정리를 하게되었다.해당 문법은 타입스크립트를 제대로 공부하지않은 나에게는 고급문법이었고 해석이 필요해서 하나씩 구체적으로 정리하게되었다. type FunctionKeys = { [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never; }[keyof T]; ✅ 제네릭위에서 T는 타입 매개변수(Generic Type)이다. 함수나 타입을 선언할 때 타입을 변수처럼 받아서 재사용 가능하게 하는 문법.T는 “아직 어떤 타입이 올지 모르는” 타입 매개변수. FunctionKeys 즉, FunctionKeys를 쓸 때 실제 타입을 넘겨주는거다.예시로 한번 보면 type .. [Javascript] Object.assign() Object.assign() Object.assign() 메서드는 출처 객체들의 속성을 복사해 대상 객체에 붙여넣어 반환한다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(returnedTarget);// Object { a: 1, b: 4, c: 5 } returnedTarget 변수에 할당된 객체는 source 객체의 속성이 target 객체에 복사된 객체이다. console.log(target);// Object { a: 1, b: 4, c: 5 } 이때 Object.assign()의 첫번째 인자로 전달된 target.. [Javascript] 자바스크립트 비동기 처리와 콜백 함수 비동기 처리란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 비동기 처리의 첫 번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다. 그럼 ajax 코드를 잠깐 살펴보겠습니다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData =.. 이전 1 다음
