Who I really am
문제상황 - 드롭다운과 콘텐츠 영역이 있음 (드롭다운 안의 option들은 api reponse로 받아온 data) - 드롭다운을 바꿀 때, 진짜 바꿀 거냐고 한 번 물어봐주는 confirm창이 뜸 - confirm에서 확인을 누르면 콘텐츠 영역이 해당 내용으로 교체 / 취소누르면 기존 콘텐츠 영역에 그대로 남아있어야 함 - 하지만 드롭다운에서 '세번째 것'을 선택하면 컨펌창이 뜨고, 콘텐츠영역에는 기존 데이터인 '두번째 것'이 남아있지만... select 영역의 텍스트가 새로 선택한 '세번째 것'으로 곧바로 바뀌어버렸다. 드롭다운의 options를 구성하는 부분 const { data: siteData } = useGetSiteList(); const siteOption = useMemo(() => {..
찾을 대상이 영어 대문자로 작성되어 있을 시(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..
// 테이블 { field: 'staffName', headerName: t('담당자명'), minWidth: 100, valueGetter: (params: ValueGetterParams): string => { const value = getValueFromGetterParams(params); return value; }, }, // custom function const getValueFromGetterParams = (params: ValueGetterParams) => { const columnField = (params.colDef.field as ColDef['field']) ?? ''; if (columnField.includes('.')) { const columnFieldArray ..
사이드 프로젝트 진행 중, 위와같이 드래그해서 value를 설정할 수 있는 슬라이더가 필요했다. npm에 마땅한 게 없어서 직접 만들어 구현하기로 했다. RangeSlider.tsx import { useState } from 'react' import styled from 'styled-components' const Slider = styled.input` position: absolute; top: 50%; width: 100%; height: 12px; -webkit-appearance: none; background: transparent; margin: 0; border: 0; &:active { cursor: grabbing; } &:focus { outline: none; } ` const..
useEffect(() => { const imgData = siteImg?.data.data; if (sealData) { const reader = new FileReader(); reader.onload = ({ target }) => { const result = target?.result; if (result) { setImageData(result.toString()); } }; reader.readAsDataURL(imgData); } }, [siteImg]);
// id값이 들어올 수도, 아닐 수도 있다 const useGetData = (id?: number) => { return useQuery( [KEY], () => { if (id) { return getData(id); } return null; }, { enabled: !!id && !!(id > 0) }, ); }; '예약시간'처럼 선택적으로 보내는 변수같은 경우, 값이 존재할 때만 payload에 담아 보낼 수도 있다. const payload = { content: replaceTemplateContent(content, undefined, 'send'), ...(reservationDateTime && { reservationDateTime }), // 이렇게~ };
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..
put 메소드로 이미지파일 자체를 넣어 요청을 보내야 했다. 프론트에서 파일첨부 후 저장버튼을 눌렀을 때 put 결과는 200으로 성공했다고 뜨는데, get으로 데이터를 받아오면 엑박이 뜨는 버그가 있었다. 처음에는 get메소드의 문제인줄 알았으나 1. DB에도 엑박이 들어가있고 2. postman으로 우겨넣은(?) 이미지는 잘 띄워지는 걸 보고 put의 문제인 것을 확인했다. 결론부터 말하면, 수정 전 코드(동작X) const onSave = () => { if (isClickDelete) { deleteCompanyLogo((() => {}) as unknown as void, { onSuccess: () => { setToastMessage('로고 이미지가 삭제되었습니다.'); onCloseModa..
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 혼합해서..
