한 걸음/TS & JS
찾을 대상이 영어 대문자로 작성되어 있을 시(APPLE) "apple"이라고 검색했을 땐 찾지 못하는 이슈가 있었다. 정규식과 match 함수를 사용해 해결했다. // 변경 전 data.filter((site) => { return ( site.siteName.includes(mainKeyword) || site.siteAdminPhone.includes(mainKeyword) || site.siteBusinessNumber.includes(mainKeyword) ); } // 변경 후 data.filter((site) => { return ( site.siteName.match(new RegExp(mainKeyword, 'gi')) || site.siteAdminPhone.match(new RegExp..
axios put 요청을 보낼 때, Blob객체를 생성하여 JSON.stringify로 감싸 보내주었다. 이 Blob객체의 타입은 application/json으로 지정하고, axios config의 context-type은 multipart/form-data 로 지정했다. const payload = { name: '김네임', businessNumber: '041648', address: '서울특별시', country: 'Korea', }; ... export const putCompany = (payload: CompanyType) => { const formData = new FormData(); formData.append( 'request', new Blob([JSON.stringify(payl..
Object.entries(obj) 객체를 배열로 만듦 const a = {name:'kim', age:10, address:'Seoul'}; console.log(Object.entries(a)); // result [["name", "kim"], ["age", 10], ["address", "Seoul"]] Object.fromEntries(arr) 배열을 객체로 만듦 const a = [['name', 'kim'], ['age', '10'], ['address', 'Seoul']]; console.log(Object.fromEntries(a)); // result { "name": "kim", "age": "10", "address": "Seoul" } entries와 fromEntries 혼합해서..
Lodash - javascript 인기 라이브러리 - array, date, object 등 순수자바스크립트의 데이터 구조를 손쉽게 다룰 수 있도록 돕는다. - 특히 프론트엔드가 백엔드로부터 받은 데이터를 핸들링할 때 많이 쓰인다. - 바닐라 자바스크립트 함수에 비해 성능이 떨어질 수 있지만, 함수의 확장성 때문에 편리하게 사용이 가능하다. (ex. 자바스크립트의 map은 배열에서만 사용할 수 있지만, lodash의 map은 객체도 받을 수 있음) - 제이쿼리에서 변수를 $ 기호로 감싸는 것처럼, 로대쉬는 _를 사용한다. (_.map, _.uniq ...) - 공식홈페이지(링크) 또는 메소드 정리한 사이트(링크)에서 함수 종류 확인 가능 실제 프로젝트에서 유용하게 썼던 2가지 함수를 소개한다. _.is..
type과 interface는 객체의 타입의 이름을 지정하는 것이다. 둘의 쓰임새는 거의 비슷하지만, 몇 가지 차이점이 있다. 공식문서에서 안내하는 타입과 인터페이스 차이점 (링크) 타입 별칭과 인터페이스는 매우 유사하며, 대부분의 경우 둘 중 하나를 자유롭게 선택하여 사용할 수 있습니다. interface가 가지는 대부분의 기능은 type에서도 동일하게 사용 가능합니다. 이 둘의 가장 핵심적인 차이는, 타입은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점입니다. 기본 사용법 type MyType = { name: string; age: number; } interface IMyInterface { name: string; age: number; } 확장 t..
appId가 항상 있다고 보장되는 값이 아닌 상황이다. useState로 기본값 ' '(빈 문자열)을 넣어서 처리하면, '빈 문자열 아이디는 없다'며 아이디값이 들어올 때까지 에러를 띄웠다. 아래와 같이 처리하면 아이디 값이 있을 땐 api를 호출하고, 아니면 null을 리턴한다. export const getTestLogsKey = ({ appId, isTest = false, size = 10 }: Props) => appId ? `/apps/${appId}/logs?size=${size}&is_test=${isTest}` : null
const aaa = classroom?.students.map((student) => student.reviews .filter((review) => review.project.id === projectId && review.isDraft === true) .map((review) => review.student.id) ) const bbb = classroom?.students.flatMap((student) => student.reviews .filter((review) => review.project.id === projectId && review.isDraft === true) .map((review) => review.student.id) ) console.log(aaa) // [[1], [3..
물음표 2개 ?? 로 쓰이는 널 병합 연산자(Nullish coalescing operator)는 왼쪽이 null 또는 undefiend일 때 오른쪽 피연산자를 출력하고, 아니면 왼쪽 피연산자를 반환하는 논리 연산자이다. // 오른쪽이 null이기 때문에 콘솔창에 '널입니다'가 출력된다 const foo = null ?? '널입니다'; console.log(foo); // 오른쪽이 undefined이기 때문에 콘솔창에 '널값입니다'가 출력된다 const foo = undefined ?? '언디파인입니다'; console.log(foo); 널병합연산자는 'falsy 값을 어떻게 처리하는가'에 따라 논리연산자 OR(||)과 동작이 다르다. falsy 값이란? 거짓 같은 값(Falsy, falsey로 쓰이기도..
객체 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합 키(key) id, name, age, getGrade 값(value) 0, 'dada', 16, () => {...} 프로퍼티 객체를 구성하는 요소들의 집합 id: 0, name: 'dada', age: 16, getGrade: () => {...} 메소드 프로퍼티 중 값이 함수인 것 getGrade: () => {...} 일반적으로 프로퍼티라 하면 메소드를 제외한 데이터 프로퍼티를 지칭한다 의미적으로 구분한다면 프로퍼티는 속성, 메소드는 행동!
