SOMETHING BETTER THAN SILENCE

// useLocalStorage.tsimport { useState, useEffect, useCallback } from 'react';function useLocalStorage(key: string, initialValue?: T) { const [storedValue, setStoredValue] = useState(() => { if (typeof window === 'undefined') { return initialValue; } try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { ..

openapi-generator란RESTful API를 보다 쉽고 편리하게, 일관되게 설계하고 개발할 수 있도록 자동화 도구를 제공하는 오픈소스간단히 설명하면 배포된 swagger 문서를 기반으로 클라이언트에서 바로 사용가능한 type을 자동으로 생성해줌    필요성[POST] token/issue라는 API가 있다고 하자.// request{ "tokenType": "string", "network": "string", "tokenName": "string", "tokenDecimals": "number", "initialSupply": "string", "maxSupply": "string", "symbolImage": "string", "walletAddr": "string", "o..

찾을 대상이 영어 대문자로 작성되어 있을 시(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..