Who I really am
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 혼합해서..
Lodash - javascript 인기 라이브러리 - array, date, object 등 순수자바스크립트의 데이터 구조를 손쉽게 다룰 수 있도록 돕는다. - 특히 프론트엔드가 백엔드로부터 받은 데이터를 핸들링할 때 많이 쓰인다. - 바닐라 자바스크립트 함수에 비해 성능이 떨어질 수 있지만, 함수의 확장성 때문에 편리하게 사용이 가능하다. (ex. 자바스크립트의 map은 배열에서만 사용할 수 있지만, lodash의 map은 객체도 받을 수 있음) - 제이쿼리에서 변수를 $ 기호로 감싸는 것처럼, 로대쉬는 _를 사용한다. (_.map, _.uniq ...) - 공식홈페이지(링크) 또는 메소드 정리한 사이트(링크)에서 함수 종류 확인 가능 실제 프로젝트에서 유용하게 썼던 2가지 함수를 소개한다. _.is..
크리에이티브 코딩에서 알게 된 인스타에서 아티스트를 위한 딥러닝 강좌가 열린다고 하여 참여해봤다. (인스타그램 @okdalto) 김성현 연사 뭐하는 사람인가? (사실 내가 이 강좌에 참여한 가장 큰 이유는 '이런 류의 일을 하는 사람은 뭐라고 명료하게 정의할 수 있을까, 직업으로써 얼만큼의 확장성이 있을까, 어떤 방향성을 가지고 있는가' 같은 것들이어서 주의깊게 들었다.) - 자신을 컴퓨터 그래픽스 리서처라고 소개한다. - 현재는 anigma ai라는 회사 창업한 상태 - 어릴적 장래희망은 그래픽디자이너, 학사는 국민대 영상디자인, 석박사는 카이스트 비쥬얼 미디어 랩(=원래부터 공대 베이스는 아니었다) - 취미는 코드를 사용한 렌더링 - 디자이너는 디자이너가 잘할 수 있는 일을 해! 네가 컴공 전공자만큼..
조건 - 위 이미지에서 흰색박스(ADT Total untamount...) 영역의 width는 가변적으로 늘어나고 줄어들 수 있다. - 흰색박스의 길이에 따라 아래 텍스트(description...) 영역의 max-width가 맞춰지고 줄바꿈 되어야 한다. - 고정 width는 부모, 자식 어디에도 쓸 수 없다. 해결책 1. 부모요소에 max-width: min-content 속성을 준다. 2. 줄바꿈되면 안되는 요소에 white-space: nowrap 속성을 준다 (=하늘색 박스) HTML 삽입 미리보기할 수 없는 소스 뭐 자바스크립트로 흰색박스 영역 width를 구해서 그걸 max-width로 줘야하나... 이런 복잡한 생각을 했었는데 너무나도 간단하게 해결 완!
아르코에서 인공지능 퍼포먼스라는 하루짜리 강의가 열린다고하여 등록해서 들어보았다. 예술과 인공지능...? 창제작과정? 커리큘럼을 읽어봐도 어떤 내용일지 잘 상상이 가지 않아 일단 가서 들어보기로... 강의 내용은 서울예대 김제민 교수님이 개발자와 함께 프로그램을 만들면서 어떤 시행착오를 겪었는지, 또 앞으로 우리들이 인공지능을 어떤 식으로 창작물에 활용할 수 있을지 가볍게 훑어보는 자리였다. (약 20여 명이 모였는데, 개발자는 나 혼자였다. 다른 사람들은 전부 예술이나 기획쪽 직군..) [백조편의 시 - 레이몽 크노 무한의 텍스트 조립] 이라는 영상을 보여주었는데, 여기서 뭔가 영감을 얻을 수 있을 것 같아 적어두었다. 근데 집에 와서 유튜브 찾아보니 검색에 안나오네... 강의 들으면서 소개받은 사이트..