보이는

개인 개발도 몇 번이나 계속하고 있다고 잘 재료가 생기는 것 같습니다.

자신의 경우

입력 부분에 입력 된 데이터를 출력 부분으로 동적으로 토출합니다.

인풋과 아웃풋은 한 화면을 분할한 느낌(Qiita의 투고란과 같은)

라는 느낌의 사이트가 잘 느껴집니다.

이번에는 화면 상단의 버튼으로 테이블을 만들고 화면 하단의 텍스트 영역에 CSV, JSON, SQL로 내뿜는 웹 앱을 만들었습니다.

할 수있는 것

Dummy-Table-Generator



Increment 또는 Name은 데이터 유형입니다.

Increment이면 행마다 1 추가된 수치,

Name이면 무작위 이름을 표시하게 됩니다.

Change Row Count 함으로써 데이터 부분을 증감할 수 있습니다.

한계는 999행입니다.

지금 현재, 열을 늘릴 수는 있어도 줄일 수 없습니다…

개발 과정

프런트 엔드: Nuxt.js

익숙하기 때문에 Nuxt.js를 사용했습니다.

pages의 내용은 index.vue(와 Readme)뿐.

index에서는 상부에 MyTable 컴퍼넌트, 하부에 Csv, Json, Sql 컴퍼넌트를 배치했습니다.

Csv, Json, Sql은 변수로 전환합니다.

변수는 선택 상자에 따라 달라집니다.

더미 데이터는 후술하는 방법으로 만든 json 파일을 nuxt의 $http 모듈로 읽으러 갑니다.

이 처리는 index.vue 안에서 행해지므로, Csv 그 외의 컴퍼넌트에 데이터를 건네주는 형태가 됩니다.

이 경우 props를 사용합니다.

<csv v-if="currentMode == 'CSV'" :obj="inputObj" :keys="keysArr" />

이런 식으로 변수를 바인딩 해, 컴퍼넌트 측에서

props: ["obj", "keys"],

이렇게 지정하면 this.obj 와 같이 꺼낼 수 있습니다.

또, MyTable 컴퍼넌트로부터는 열 추가나 행 추가 등, index.vue 를 향해 부모 방향으로 값을 전달하고 싶을 때가 있었습니다.

이 경우 $emit 을 사용합니다.

구성 요소 측면에서

this.$emit('addRow', this.currentNumber)

이런 처리를 쓰고 index 측에서

<my-table @addRow="hoge" />

와 같이 이벤트를 받습니다.

hoge 메소드에 인수를 지정하면 값도 전달할 수 있습니다.

그런 이렇게 고리고리와 처리를 써 가고, 프런트 엔드는 할 수 있었습니다.

백엔드: 더미 데이터가 걸린 json 파일

백엔드는 서버가 아닌 json 파일입니다.

이것을 nuxt 프로젝트의 public 폴더에 넣었습니다.

json을 만드는 데 파이썬 패키지 Faker을 사용했습니다.

파이썬 스크립트가 조금 지금 수중에 없지만,

단순히 10000회 정도 루프하면서 더미의 전화 번호나 더미의 메일 주소를 배열에 두드려 가고,

마지막으로 모든 것을 결합한 객체를 JSON으로 내보냈습니다.

다만 JSON이 유니코드로 이스케이프 되고 있어, 딱 좋은 타이밍에 되돌리는데 어지럽혔습니다.

배포: Github-pages

배포 대상은 Githubpages이지만 여기에서도 약간 어색했습니다.

404가 표시되어 배포 설정이 다른지 착각했지만,

사실은 json 파일이 잘 읽을 수 없었습니다.

귀찮았기 때문에 URL을 하드 코딩 해 끝났습니다.

요약

익숙해질 생각의 Nuxt에서도 약간의 일로 에러가 되거나 막히기 때문에,

역시 손을 움직이지 않으면 모르는 것이 있다고 생각합니다.

Let's 개인개발!