초보 개발자의 일기

문제 input 태그에 type='radio'를 사용하면 체크박스가 나오면 선택을 할 수 있다. 이 체크박스를 제거하고 버튼을 사용할 때와 비슷하게 radio를 구현하고자 하였다. CSS 스타일링은 emotion을 사용하여 스타일하였다. 예제 코드 남자 여자 css export const Label2 = styled.label` display: flex; align-items: center; justify-content: center; color: #969696; background-color: #ffffff; position: relative; box-sizing: border-box; box-shadow: 0 4px 4px 0 #00000040; border: 1px solid #969696; bor..

React-query 시작 React Query는 비동기 서버 상태 관리 라이브러리이다. React Query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. 사용이유 react-query를 사용함으로 서버, 클라이언트 데이터를 분리합니다. 이 개념에 대해 동의 하지 않아도 아래의 장점을 보신다면 사용하고 싶은 생각이 드실 것입니다. 장점 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행 ) 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 동일 데이터 여러..

Re-fetch Re-fetch 어떤 조건 하에서 자동적으로 다시 가져오기 된다. stale 쿼리를 사용 조건 새로운 쿼리 인스턴스 많아지거나 쿼리 키 처음 호출 창을 재포커스 만료된 데이터의 업데이터 여부를 확인할 수 있는 네트워크 다시 연결된 경우 리페칭 자주 변하지 않은 정보는 리페칭을 제한해도 된다. but 실시간 정보는 중요하기 때문에 사용해야 한다. 리페칭을 제한하면 얻는 장점 불필요한 랜더링이 줄어든다 코드 작성하기 전 반드시 알아야 할 개념 staletitme -staleTime 만큼 시간이 지나면 데이터는 stale 상태로 변경된다. staleTime의 default값은 0이다. 따라서 따로 설정해주지 않는다면 useQuery로 받아온 데이터는 받아오자마자 곧바로 stale 한 상태로 변..

split split() 메서드는 string 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다. split으로 하면 잘라진 값들이 숫자가 아니라 문자열로 들어가게 된다. 그래서 원하는 값이 숫자로 이루어진 배열이면 이것을 문자열을 숫자로 바꿔야 한다. 이럴 때 해야 하는 것이 split 메서드 뒤에. map(Number)를 써주어야 한다. //list에 optlist객체 값 넣기 let list: any[] = Object.values(optList); //푸시할 배열 생성 let optionIdList: any[] = []; //,을 기준으로 나누어서 삽입 split하면 문자열로 들어가기 때문에 number로 변환 let change = list[0].replace(/\s/g, "").spl..

보낼 링크 헤더에 JWT 넣기 Key 값에 Authorization을 기입하고 Value값에 Bearer 입력 후 한칸 띄우고 사이트에서 발급한 jwt를 입력해준다. 보낼 값 입력 바디에 백에서 준 api대로 양식을 맞춰서 보내준다. 결과 값 정상적으로 서버에 보내지고 응답이 돌아왔다.

시작하기 npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/react-fontawesome 추가 스타일 추가 스타일 아이콘을 사용하기 위해 새로 더 설치한다. npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-svg-icons npm i --save @fortawesome/pro-light-svg-icons npm i --save @fortawesome/pro-duotone-svg-icons 적용할 아이콘 선택 fontawesome 사이트에 들어가서 이 아이콘을 적용하고 싶다. 불..

공변성 반공 변성 타입 예시 function a(x: string): number { return 0; } //매개변수로 문자를 받아 숫자를 리턴 type B = (x: string) => number | string; let b: B = a; 함수 a는 문자를 받아서 숫자로 리턴하는 함수 근데 B는 문자를 받아 숫자나 문자로 리턴한다. b에 a를 대입하면 잘 대입이 된다. (서로 타입이 다른데 대입이 된다. ) 왜??? 리턴 값은 더 넓은 타입으로 대입할 수 있다. 반대 예시 function a(x: string): number | string { return 0; } type B = (x: string) => number; let b: B = a; 이건 안된다. 넓은 타입에서 작은 타입으로 대입은 안..

타입 추론하기 interface Arr { forEach(callback: (item: T) => void): void; } const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); item.toFixed(1); }); a.forEach((item) => { console.log(item); return "3"; }); const b: Arr = ["1", "2", "3"]; b.forEach((item) => { console.log(item); item.charAt(3); }); b.forEach((item) => { console.log(item); return "3"; }); 타입 직접 하나씩 만들어보기 interface Arr { f..