전체 글

1. 요구사항 정리, 기초 구상

1. 개요 보이스봇, 챗봇 저작 운영 서비스의 사용자 매뉴얼, FAQ, 릴리즈 노트를 조회할 수 있는 사이트를 개발 2. 요구사항 정리 사용자 매뉴얼 1) 사용자 매뉴얼은 개발자들이 md파일로 작성해 관리한다. md파일의 주소, 이름을 서버에서 관리한다. 2) 매뉴얼의 큰 제목들을 화면 우측의 목차에 보여주고, 클릭 시 해당 제목이 있는 영역으로 이동하게 한다. 3) 각 매뉴얼을 인쇄, 복사할 수 있어야 한다. 4) 검색을 통해 검색어가 포함된 매뉴얼의 정보들(매뉴얼 제목, 큰 제목, 내용)을 검색결과 팝업에 나타내고, 클릭 시 해당 매뉴얼의 해당 영역으로 이동하게 한다. 포함된 단어 주변의 2~3단어를 포함해 결과창에 보여주고 검색어는 강조 처리한다. 5) 매뉴얼은 화면 좌측의 사이드바에서 클릭을 통해..

4. 정리 - 엑셀 공통 모듈

배운 점들 ㄱ. 공통 모듈 제작 경험 다른 개발자들을 위한 공통 모듈을 제작해 보면서 추상화 과정에서 고려할 것들이 많음을 배웠다. 각 분기에 대해 모두 if 문을 처리하면 간단하긴하지만 중복이 많고 유지 보수가 어렵다. 최대한 공통적으로 적용할 수 있도록 로직을 짜야 공통 모듈로서 의미가 있다고 생각한다. ㄴ. 재귀를 활용한 객체 핸들링 초기 모듈은 switch로 각 데이터 타입마다 처리하는 로직이 분리되어 있었다. 이를 필요 속성을 "a.b.c" 형태로 주고 이를 활용해 객체에서 가져오고자 하는 값을 가져오는 함수를 공통적으로 사용하게 해서 중복된 코드의 양을 많이 줄일 수 있었다. 아쉬운 점들 ㄱ. 많은 중복 최대한 공통적으로 처리하도록 했지만 유효성검사와 같은 로직들은 여전히 각 타입별로 중복되는..

3. 개발 - 엑셀 업로드

업로드 로직 흐름 1) 을 활용해 엑셀 파일을 받아 왔다. 2) 업로드 버튼을 누르면 xlsx의 메소드들을 활용해 엑셀 파일을 json으로 파싱한다. 3) 변환한 json을 전달하여 createList 메소드를 호출한다. 4) createList는 등록하고자 하는 데이터들을 순회하면서 먼저 유효성 검사 validate(type)(data) 를 한다. 5) 유효성 검사를 통과하면 업로더를 사용하는 곳에서 받아온 create 함수를 호출한다. 6) 결과들은 createResult 배열에 저장한다. 저장 실패 or 유효성 검사 실패시 오류 사유를 담아놓는다. 7) 순회가 끝나면, 엑셀 업로드 결과를 보여주는 모달을 만든다. 모달에 createResult를 전달해서 업로드 결과, 실패 사유를 보여준다. // 2..

2. 개발 - 레이아웃, 엑셀 다운로드

레이아웃 엑셀 업로드나 다운로드 기능만 따로 사용하고 싶을 수 있기 때문에 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. 요구사항 정리와 라이브러리 선정하기

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

?. - Optional chaining 연산자 / ?? - Null 병합 연산자

?. - 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..

Promise 일정 시간 초과시 대기 취소하고 에러 처리하기

배경 서버에 요청하고, 서버에 어떠한 문제가 생겨서 응답이 매우 늦게 오거나 오지 않으면 클라이언트에서 오래 기다려야 한다. 이러한 문제를 해결하기 위해서 특정 요청에 대한 응답이 일정 시간(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 콜백을 줘서 서버에 중복체크 요청을 ..