레이아웃 엑셀 업로드나 다운로드 기능만 따로 사용하고 싶을 수 있기 때문에 enable{Uploader or Downlaoder}를 통해 한 가지 기능만 사용할 수 있게 했다. 업로드를 위해 전체 다운로드 요청을 보내는 함수, 데이터 type, 생성을 위한 함수 등을 prop으로 받아와서 사용했다. export default function ExcelHandler({type, createParams, createParamsOrder, updateList, getFullListParams, restrictionMsg="", uploaderTitle=null, enableUploader = true, enableDownloader = true }) { return ( {enableUploader && } {..

1. 개요 보이스봇, 챗봇 저작 운영 서비스의 각종 데이터를 엑셀 파일을 활용해서 다운로드, 업로드 할 수 있는 공통 컴포넌트를 개발 2. 요구사항 정리 다운로드 1) 다운로드 버튼을 눌러 해당 데이터 전체를 다운로드할 수 있다. 2) 다운로드하고 싶은 속성을 개발자가 지정할 수 있다. ex) ["이름", "key", "최소값", "최대값"] 업로드 1) 엑셀 파일을 활용해 새 데이터들을 등록할 수 있다. 2) 엑셀 업로드 버튼 클릭시 모달이 보여지고 해당 모달은 업로드에 활용할 파일을 선택할 수 있고, 샘플 다운로드 버튼을 통해 엑셀 업로드 파일 양식을 다운로드 할 수 있다. 3) 업로드 후 결과를 사용자에게 보여준다. 이전 버전 2.0 서비스의 경우 엑셀 업로드, 다운로드 기능이 공통으로 존재하지 않..

?. - Optional chaining 연산자 객체의 프로퍼티 접근을 편하게 해준다. const obj = { a = { b: 1 } } console.log(obj.b.c) // 에러 발생 console.log(obj.b?.c) // undefined JS는 선언되지 않은 객체의 프로퍼티를 참조하려고 하면 에러를 발생시킨다. 이를 ?.을 쓰지 않고 처리하면, if(obj === null) return undefined if(obj.b === null) return undefined return obj.b.c 이렇게 복잡하게 처리를 해야 한다. 이 때 ?.을 사용하면 obj.b?.c로 간결하게 참조할 수 있어 매우 유용하다. ?? - null 병합 연산자 왼쪽 피연산자가 null 또는 undefined..

배경 서버에 요청하고, 서버에 어떠한 문제가 생겨서 응답이 매우 늦게 오거나 오지 않으면 클라이언트에서 오래 기다려야 한다. 이러한 문제를 해결하기 위해서 특정 요청에 대한 응답이 일정 시간(ex: 1초) 내에 오지 않으면 서버에 문제가 있다고 간주하여 해당 작업을 종료하고 사용자가 다른 일을 할 수 있게 해야한다. 구현 Promsie.race(iterable) 를 활용하여 해당 작업을 구현할 수 있다. Promise.race(iterable) 는 인자로 받은 Promise들 중 제일 먼저 성공적으로 resolve 혹은 reject 된 Promsie를 반환한다. 즉 여기에 인자로 [request, handleTimeout] 이렇게 2개의 프로미스를 전달해서 request가 대기시간보다 늦게 resolve..

단시간에 많은 양의 이벤트가 발생하면 해당 이벤트핸들러가 너무 많이 실행되서 성능상의 문제가 발생할 수 있다. 디바운스와 쓰로틀을 활용해 이러한 문제를 해결할 수 있다. 디바운스 단기간에 많은 양의 이벤트가 발생할 때 마지막 이벤트에서만 (사용자 조작이 끝났을 때) 콜백 함수를 실행시킨다. let timer document.addEventListener('scroll', () => { if(timer) clearTimeout(timer) timer = setTimeout(() => { console.log('마지막에만 실행!) },400) }) 활용 사용자가 회원가입 할 때 아이디 중복체크를 자동적으로 해주는 경우가 있다. 사용자가 입력할 때 input에 change 콜백을 줘서 서버에 중복체크 요청을 ..

1) 얻은 점들 ㄱ. 리액트에 좀 더 능숙해졌다. HOC, useReducer, context, useMemo, useCallback, 커스텀 훅, 컴포넌트 합성, 상태 관리 등등 ㄴ. Konva 라이브러리의 사용법을 익혔다. 추후 canvas 태그를 다뤄야할 때 유용하게 사용할 수 있을 것이다. ㄷ. 편집기, 저작도구 제작 경험을 쌓았다. 보편적인 웹사이트 개발과는 다른 경험이었다. 사용자의 행동들을 먼저 정의하고 그에 따라 개발하면서 많이 어려웠지만 추후 다른 편집기, 저작도구를 개발할 때 큰 도움이 될 것 같다. ㄹ. 프로젝트 회고를 처음으로 작성해보면서 내가 개발한 핵심 로직들을 리뷰하고 아쉬운 점들, 보완해야할 점들을 알 수 있었다. 앞으로도 프로젝트 회고는 꼭 작성해야겠다. ㅁ. 가독성 좋고 ..

1) 뒤로 가기(작업 취소), 앞으로 가기(복구) 뒤로 가기, 앞으로 가기 기능을 구현하기 위해서 back, front 2개의 스택을 만들었다. back 스택은 작업 실행 전 상태들을 담아놓고, front 스택은 앞으로 가기를 실행했을 때 현재 상태, 즉 복구되기전 상태들을 담아 놓았다. 각 스택에는 편집기의 배경, 이미지, 텍스트 정보가 들어간다. (nodes, background) 매 작업(ex: 배경색 변경, 노드 속성 변경 등)을 실행할 때마다 현재 상태와 이전 상태를 저장했다. (saveHistory, saveNow 메소드 실행) 즉 작업전 상태가 back 스택에 쌓이고 현재 상태는 nowState라는 변수에 담았다. 또, front 스택을 비워서 뒤로 가기 후 다른 작업을 실행할 시 앞으로 가..

1) 기존 상태 관리 - useState 기존에는 노드들(텍스트, 이미지)의 상태를 useState를 활용해서 상태 관리했다. const [nodes, setNodes] = useState([]) 이미지 편집기에서 특정 노드의 속성을 변경하는 경우가 많은데, 이런 경우에 특정 노드를 id를 통해서 찾고 걔의 속성을 변경하는 식의 코드가 들어가야 한다. immer을 사용해서 객체, 배열의 상태 변경을 쉽게 해도 중복되는 코드의 양이 너무 많았다. setNodes(state, draft => { const target = draft.find(node => node.id === targetId) target[property] = newProperty }) 이런 코드들이 많은 곳에 중복으로 들어갔다. 2) 변경..