[React 프로젝트] JSON 작성을 돕는 UI / JSON Builder

프로젝트 개요 

• React 프로젝트
• 2021.06.14-2021.06.18
• 프론트엔드
• UI/UX 디자인 및 코딩

JSON 작성을 직접 텍스트로 입력하지 않고 간편한 입력과 클릭만으로 JSON을 생성해주는 React 기반의 JSON Builder 입니다.

---

React JSON Builder 

GitHub - Seungyoonkim66/json-builder

How to use

• clone the project file.

$ git clone https://github.com/Seungyoonkim66/json-builder.git 
$ cd json-builder

• install packages.

npm install

• run

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.

• http://localhost:3000/json/builder 

---

view

 

JSON Builder 시작 화면

생성한 테스크셋 JOB 생성하기

• 생성된 Taskset의 JOB을 생성할 수 있습니다.

테스트 데이터 넣은 예시

• Task 목록에서 상하 화살표 아이콘을 클릭하면 순서를 변경할 수 있고, 순서 변경 결과가 옆 Job 목록 에디터에서 시각적으로 확인할 수 있습니다. 
• 생성된 Job 목록 박스에서 - 아이콘으로 삭제가 가능하고, 편집 아이콘으로 키 밸류 명칭을 수정하거나 각 키 밸류 컬럼의 셀을 추가할 수 있습니다. 
• 또는 기존의 JSON 텍스트 파일을 불러오면 Json을 파싱하여 위 예시와 같이 시각적으로 정리하여 보여줍니다.

완료 버튼 클릭 후 결과가 나오는 모달 (클립보드 버튼 클릭으로 JSON 전체 복사) 

 

---

프로젝트 리뷰

머신러닝 엔지니어 분들의 요청으로 Json builder를 만들었습니다. 단순히 텍스트만으로 json을 만들고 정리하다보면 오류가 생기기 쉬워 이와 같이 UI 로 생성하고 관리할 수 있는 툴을 만들었습니다. React에 많이 익숙해진 상태에서 이런 프로젝트를 진행하게 되어 재활용성이 높은 컴포넌트들을 만들고, 가독성이 높은 코드를 짜려고 노력했습니다.