Firebase의 기능 중 데이터베이스에 데이터를 밀어넣는 작업을 하려고 합니다몇개 되지 않으면 수작업으로 하면 되는데 데이터의 양이 많을 경우에는 하나씩 입력 한다는 건 불가능 하죠우리가 지금까지 사용해 오던 oracle이나 mysql 등 처럼 한번에 밀어 넣는 방법이 있으면 좋을 텐데 아직은 좀 귀찮은 작업들이 필요 합니다언젠가는 좋은 기능들이 추가되겠죠.


firebase firestore excel csv json




작업 순서

1. json 데이터 생성

2. node.js 준비

3. Firebase 설정

4. account key

5. import.js

6. 데이터 입력

 

엑셀자료와 csv 데이터도 실제로는 json 형태로 변경을 해야 입력이 가능 합니다결론적으론 json 형태로 파일을 만들어 입력 하는 방법을 알아 보려고 합니다.

 

1. json 데이터 생성

 

다음과 같은 엑셀 자료가 있고 firestore에 입력 하기위해 json 형태로 변형을 해야 합니다.


firebase firestore excel csv json


먼저 엑셀을 다음과 같이 csv로 저장 합니다.


firebase firestore excel csv json

 

메모장으로 열어보면 쉼표로 데이터들이 구분이 되어 있는데 이걸 복사해서 인터넷에서 온라인으로 csvjson으로 변환해주는 사이트를 이용해 변형을 합니다.

 

{

“member” : [

 {

   "id": "a",

   "name": "copy",

   "age": 11,

   "tel": "000-0000-0000"

 },

 {

   "id": "b",

   "name": "coding",

   "age": 22,

   "tel": "000-1111-1111"

 },

 {

   "id": "c",

   "name": "test",

   "age": 33,

   "tel": "000-2222-2222"

 },

 {

   "id": "d",

   "name": "hohoho",

   "age": 44,

   "tel": "000-3333-3333"

 }

]

}

 

변환된 데이터를 확장자가 json으로 해서 저장을 합니다저는 member.json으로 저장 했습니다.

붉은색 부분은 firestorecollectionmember로 생성을 해서 그곳에 입력을 하기 위해 추가를 했습니다.

 


2. node.js 준비

 

npm 명령을 사용해야 하기 때문에 먼저 node.js가 설치되어 있어야 합니다.  node.js가 설치되어 있다면 먼저 초기화를 위해

 

>npm init

명령을 사용 합니다그리고 추가 입력 부분은 그냥 엔터로 넘어가도 됩니다.


firebase firestore excel csv json


그리고 제일 중요한 firestore 관련 패키지를 설치 합니다.

 

>npm install firestore-export-import


firebase firestore excel csv json


명령이 실행되고 아무것도 없던 폴더에 생성된 파일을 보면


firebase firestore excel csv json


이런 식으로 폴더에 파일들이 생성 되었습니다.

 


3. Firebase 설정

 

이제 firestore에 접속하기 위한 환경 변수들을 생성해야 합니다.  firebase에 접속해서 프로젝트를 선택 합니다.


firebase firestore excel csv json


여기서 [+앱 추가]를 선택 하고


firebase firestore excel csv json


확장된 아이콘들에서 </>를 선택하여 웹 앱을 추가 합니다.


firebase firestore excel csv json


웹 앱을 만들기 위해 이름을 적당히 입력하고 [앱 등록] 버튼을 클릭 합니다.


firebase firestore excel csv json

 

웹 앱에 접속하기 위한 설정 값들이 보이는 군요복사를 해서 옮겨 놓습니다.

 

<!-- The core Firebase JS SDK is always required and must be listed first -->

<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

 

<!-- TODO: Add SDKs for Firebase products that you want to use

     https://firebase.google.com/docs/web/setup#available-libraries -->

<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

 

<script>

  // Your web app's Firebase configuration

  var firebaseConfig = {

    apiKey: "AIzaSyCkC3cqbmGfb4XGCX_BUaLKTePvE3em0sU",

    authDomain: "copycoding-bca04.firebaseapp.com",

    databaseURL: "https://copycoding-bca04.firebaseio.com",

    projectId: "copycoding-bca04",

    storageBucket: "copycoding-bca04.appspot.com",

    messagingSenderId: "413154097054",

    appId: "1:413154097054:web:046f67449283eca596488f",

    measurementId: "G-6JQFB5C1Z7"

  };

  // Initialize Firebase

  firebase.initializeApp(firebaseConfig);

  firebase.analytics();

</script>

 

여기에서 var firebaseConfig = {...} 이 부분을 이용해서

 

var firebaseConfig = {

    apiKey: "AIzaSyCXXxxxXXXXxxxxXXXXxxXXxXXXxxXXxXXX0sU",

    authDomain: "copycoding-bca04.firebaseapp.com",

    databaseURL: "https://copycoding-bca04.firebaseio.com",

    projectId: "copycoding-bca04",

    storageBucket: "copycoding-bca04.appspot.com",

    messagingSenderId: "41323232323232324",

    appId: "1:41312323232323:web:02323232323232323232323238f",

    measurementId: "G-623reddfhgjkhfgsdZ7"

}

module.exports = firebaseConfig;

 

config.js 파일을 생성 합니다.

 

 

4. Service Account Key 생성

 

데이터베이스에 접근하기 위한 공개키를 생성하는 단계 입니다아무나 와서 디비를 헤집고 다니지 못하도록 하는 키를 생성하는 단계 입니다.  [서비스 계정] 탭을 선택하면 됩니다.


firebase firestore excel csv json


지금 node.js 를 사용하려는 거니 라디오 버튼을 확인 하고 [새 비공개 키 생성] 버튼을 클릭 합니다.


firebase firestore excel csv json


키를 잘 보관하라는 안내가 나옵니다.  [키 생성] 버튼을 클릭 합니다.


firebase firestore excel csv json


 

[확인] 버튼을 이용해서 키를 저장 합니다파일명은 대충 copycoding-bca04-firebase-adminsdk-vdj8s-4728099cc6.json 이렇게 저장 됩니다.

 

{

  "type": "service_account",

  "project_id": "copycoding-bca04",

  "private_key_id": "4728098675uygf65yfdertu7fgy9upjoi87tgyi5rytt36",

  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQ=\n-----END PRIVATE KEY-----\n",

  "client_email": "firebase-adminsdk-vdj8s@copycoding-bca04.iam.gserviceaccount.com",

  "client_id": "118876654423786789765453",

  "auth_uri": "https://accounts.google.com/o/oauth2/auth",

  "token_uri": "https://oauth2.googleapis.com/token",

  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/certs",

  "client_x509_cert_url": "https://www.googleapis.com/serviceaccount.com"

}

 

생각보다 키의 내용이 긴데 대충 잘랐습니다그리고 serviceAccount.json 이름으로 저장을 했습니다.

 

 

 

5. import.js 작성

 

firestore에 입력할 데이터와 설정 파일, 키 파일이 준비가 되었으니 실제 데이터를 추가하는 프로그램을 생성 합니다. 물론 파일명은 자유롭게 해서 생성하면 됩니다.

 

// Imports

const firestoreService = require('firestore-export-import');

const firebaseConfig = require('./config.js');

const serviceAccount = require('./serviceAccount.json');

 

// JSON To Firestore

const jsonToFirestore = async () => {

  try {

    console.log('Initialzing Firebase');

    await firestoreService.initializeApp(serviceAccount, firebaseConfig.databaseURL);

    console.log('Firebase Initialized');

 

    await firestoreService.restore('./member.json');

    console.log('Upload Success');

  }

  catch (error) {

    console.log(error);

  }

};

 

jsonToFirestore();

 

위에서 생성한 3개의 파일이 사용됩니다최종적인 폴더 내 파일들의 모습입니다.

 


firebase firestore excel csv json


이렇게 파일 작업이 완료 되었습니다.

 

 

5. 데이터 입력

 

마지막으로 작성한 import.js 를 실행해 줍니다.

 

>node import.js


firebase firestore excel csv json


upload가 성공했다고 하는데 진짜인지 함 확인해 봅니다.


firebase firestore excel csv json


데이터들이 잘 입력 되었습니다.


- copy coding -

작업환경

 eGovFramework Version : 3.8

Eclipse Version : Oxygen.3a Release (4.7.3a)

JDK Version : 1.8

1. 파일 업로드

 

1.1 화면 구성

 

egovframework에서 파일 업로드 기능을 찾아보면 화면 구현 방법은 2가지로 만들 수 있습니다업로드 파일의 최대 개수를 정하고 필요한 만큼만 선택 계속 선택해서 한번에 묶어 보내는 방법과 각각의 파일을 하나씩만 선택 할 수 있도록 file tag를 사용하여 보내는 방법이 있습니다.  첫 번째 방법은 파일의 개수를 정하고 하단이 파일명으로 늘어나는 것을 감안하여 디자인이 되어야 하고, 두 번째 방법은 사용하지도 않을 수 있는 전송할 파일의 수만큼 미리 입력 화면을 고정해야 하는 단점이 있습니다간단한 화면 구성을 살펴 보면 아래와 같습니다.



egovframework upload download


다중 파일 업로드는 파일선택 버튼이 한 개만 존재 하고 이 버튼을 이용하여 파일을 선택하면 하단에 계속해서 파일 리스트가 추가 됩니다잘못 선택된 파일이 있다면 delete 버튼으로 삭제 합니다그리고 파일 선택이 완료 되었으면 저장 버튼을 이용하여 선택된 파일들을 서버로 전달하면 됩니다.

 

단일 파일 업로드 방식은 필요한 개수만큼 파일선택 버튼을 추가하고 저장버튼을 클릭하여 선택된 파일들을 서버로 전달 합니다.

파일을 선택한 경우의 화면은 아래 이미지 처럼 보입니다.


egovframework upload download


다중파일은 이미지 4개를 선택하고 단일파일은 각각 파일을 선택해 보았습니다.

 

1.2  JSP 파일

 

1.2.1 다중 파일 업로드

 

다중 파일 업로드를 구현 하려면 상단에 js 파일을 하나 추가해야 합니다.


<script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/fms/EgovMultiFile.js'/>" ></script>


파일을 선택하는 부분은 일반 file tag를 사용하는데 <input type="hidden" name="atchPosblFileNumber" id="atchPosblFileNumber" value="5" /> 이런 식으로 최대 파일 개수를 입력 합니다여기서는 5개로 설정 하였습니다.


egovframework upload download


<input type="hidden" name="savePath" value="Globals.fileTest1Path" /> 이건 파일을 저장하기 위한 위치를 설정하는 부분으로 Server 부분 소스 설명에 나와 있습니다.

 

선택한 파일을 리스트로 보여주는 부분은 javascript로 구현이 되어 있습니다.


egovframework upload download


form 에서 최대 파일 개수를 정하지 않았다면 기본값을 설정할 수도 있고 여기서는 3으로 했습니다.

 

 

1.2.2 단일 파일 업로드

 

단일 파일 업로드는 기존에 사용하는 file tag와 동일 하게 테그 하나에 파일 하나를 추가하는 방식으로 JSP 파일을 작성 합니다.


egovframework upload download


1.3 Server 작업

 

1.3.1 설정


파일을 저장할 위치를 설정 합니다.

Globals.properties

 # 파일 업로드 경로(경로 설정은 반드시 절대경로를 사용해야함, 경로 뒤에 / 붙여 주어야함.)

Globals.fileStorePath =C:/egovframework/upload/

Globals.fileTest1Path =C:/egovframework/upload/filepath1/

Globals.fileTest2Path =C:/egovframework/upload/filepath2/


1.3.2 Controller 생성


임의의 controller를 생성하고 화면에서 호출하는 주소를 입력 합니다.


egovframework upload download


다중 또는 단일 파일 업로드로 화면에서 파일을 보내주면 Server에서는 동일한 로직으로 처리하기 때문에 하나의 함수만 작성하면 됩니다


egovframework upload download


파일을 폴더에 저장한 후에는 결과를 2개의 Table에 반영 합니다.


업로드 정보를 저장하고

select * from COMTNFILE;


egovframework upload download


실제 저장된 파일 정보가 저장 됩니다.

select * from COMTNFILEDETAIL;


egovframework upload download


단일 업로드도 동일한 방법으로 저장이 됩니다. 

 

2. 파일 다운로드

 

2.1 jsp 파일

 

파일 업로드 정보를 담고 있는 테이블에서 ATCH_FILE_IDFILE_SNparam으로 넣어주면 다운로드를 할 수 있습니다.


egovframework upload download


/cmm/fms/FileDown.do에서 넘겨준 param을 이용하여 FileVO에 담아 상세 정보를 이용하여 원래 파일 명을 찾아 다운로드를 진행 합니다.



3. 전체 파일 

3.1 jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 

 

<script type="text/javascript" src="<c:url value='/js/egovframework/com/cmm/fms/EgovMultiFile.js'/>" ></script>

 

 

<title>Insert title here</title>

<link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/com/com.css' />">

</head>

<body>

 

<br>

<br>

<br>

 

<h2>다중 파일 업로드</h2>

<form name="frm" method="post" action="<c:url value='/file/fileUpload.do'/>" enctype="multipart/form-data" >

   <input type="hidden" name="atchPosblFileNumber" id="atchPosblFileNumber" value="5" />

   <input type="hidden" name="savePath" value="Globals.fileTest1Path" />

  

   <table width="400px" cellspacing="0" cellpadding="0" border="1" >

           <tr>

            <td ><input name="file_1" id="egovComFileUploader" type="file" />

                <div id="egovComFileList"></div>

            </td>

           </tr>

           <tr>

            <td align="center">

                <input type="submit" value="저장">

            </td>

           </tr>

        </table>      

</form>

 

<!-- 첨부파일 업로드 가능화일 리스트설 Start..--> 

<script type="text/javascript">

var maxFileNum = document.getElementById('atchPosblFileNumber').value;

if(maxFileNum==null || maxFileNum==""){

        maxFileNum = 3;

}

var multi_selector = new MultiSelector( document.getElementById( 'egovComFileList' ), maxFileNum );

multi_selector.addElement( document.getElementById( 'egovComFileUploader' ) );

</script>

<!-- 첨부파일 업로드 가능화일 리스트 End.--> 

<p>

<h2>단일파일 업로드</h2>

<form id="frm2" action="<c:url value='/file/fileUpload.do'/>" method="post" enctype="multipart/form-data">

        <input type="hidden" name="savePath" value="Globals.fileTest2Path" />

        <table width="400px" cellspacing="0" cellpadding="0" border="1" >

               <tr>

                   <td >

                              <input type="file" name="file1" /><br>

                              <input type="file" name="file2" /><br>

                       </td>

               </tr>

               <tr>

                       <td align="center">

                              <input type="submit" value="저장">

                       </td>

           </tr>

        </table>

 </form>

 

<p>

<p>

<p>

 

 

<a href="javascript:fn_egov_downFile('FILE_000000000000201','0')">

 파일 다운로드

</a>

 

<script type="text/javascript">

 

        function fn_egov_downFile(atchFileId, fileSn){

               window.open("<c:url value='/cmm/fms/FileDown.do?atchFileId="+atchFileId+"&fileSn="+fileSn+"'/>");

        }

</script>

  

 

</body>

</html> 


3.2 Controller


package copycoding.com.util.file.web;

 

import java.util.List;

import java.util.Map;

 

import javax.annotation.Resource;

import javax.servlet.http.HttpServletRequest;

 

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.support.SessionStatus;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

 

import egovframework.com.cmm.SessionVO;

import egovframework.com.cmm.service.EgovFileMngService;

import egovframework.com.cmm.service.EgovFileMngUtil;

import egovframework.com.cmm.service.FileVO;

 

@Controller

public class FileUploadDownloadController {

           @Resource(name="EgovFileMngService")

           private EgovFileMngService fileMngService;

          

           @Resource(name="EgovFileMngUtil")

           private EgovFileMngUtil fileUtil;

          

           @RequestMapping(value = "/file/fileUpDownloadTest.do")

           public String daumEditor(ModelMap model) throws Exception {

                     return "copycoding/util/FileUpDownload";

           }

          

           @RequestMapping(value = "/file/fileUpload.do")

           public String uploadSingleFile(

                                final MultipartHttpServletRequest multiRequest,

                                HttpServletRequest request,

                                SessionVO sessionVO,

                                ModelMap model,

                                SessionStatus status) throws Exception{

                      

                                String storePath = request.getParameter("savePath");

                                List<FileVO> result = null;

                                String atchFileId = "";

                                final Map<String, MultipartFile> files = multiRequest.getFileMap();

                               

                                if(!files.isEmpty()){

                                          // 파일 객체, 구분 값, 파일 순번, 파일ID, 저장경로

                                          result = fileUtil.parseFileInf(files, "upfile_", 0, "", storePath);

                                          //파일이 생성되고나면 생성된 첨부파일 ID를 리턴한다.

                                          atchFileId = fileMngService.insertFileInfs(result); 

                                }

                      

                                return null;

           }

}


- copy coding -

 

git을 사용하면 commit이라는 용어가 SVN을 사용하던 사람들에게는 좀 혼동이 있을 수 있습니다.

commit이 서버 저장소에 저장을 하는게 아니기 때문인데요.

git는 로컬에서 add, commit을 사용하고 서버에는 push를 사용합니다.

git는 로컬에 staging area라는 중간 단계를 두고 있어서 여기에 저장하는걸 commit이라고 합니다.

내가 작업하고 있는 위치는 working directory (여기서 add, commit으로 staging에 등록)

내 컴퓨터의 git가 관리하는 위치는 staging area (여기서 pushrepository에 저장)

원격 servergithub가 관리하는 위치는 repository.


android github upload

 

이 글을 읽는다면 처음 사용하시는 분들일것 같아 잠시 설명좀 했습니다.

 

순서는 다음과 같습니다.

1. Git 환경 설정

2. Staging Area 작업

2.1 repository 생성

2.2 Add

2.3 GitHub Repository 생성

3. Commit and Push

 

 

1. Git 환경 설정

 

github에 프로젝트를 올리는 작업을 하려면 선행 조건이 있습니다.

로컬 컴퓨터에 git이 설치 되고 path가 설정되어 있어야 합니다.

github에 회원가입이 되어 있어야 합니다.

android studiogit가 설정되어 있어야 합니다.

 

설정되어 있지 않다면 미리 다음 페이지를 검토 하세요.

[GitHub] GitHub 회원 가입하기

 

[Git] Git 설치 하기 (Windows 용 - Git-2.20.1-64-bit)

 

[Git] Git 무설치 버전 windows 설치 하기

 

[안드로이드] Android studio에 github 환경 설정 하기

 


2. Staging Area 작업

 

2.1 repository 생성


로컬 gitrepository를 생성하는 작업을 진행 합니다.

 

프로젝트를 하나 생성하거나 기존 프로젝트를 오픈 합니다.

메뉴에서

VCS > Import into Version Control > Create Git Repository...

를 선택 합니다.



GItRepository를 생성할 프로젝트를 선택 합니다.



현재 작업중인 프로젝트를 선택 하고 [OK] 버튼을 클릭 합니다.

 

자세히 안보면 모르고 지나갈 수 있는데

프로젝트 선택 전 파일 모습입니다.

 


선택 후 파일 색이 변경 되었습니다.




Repository만 생성 했지 파일을 올리지 않아서 알려주는 것입니다.

 

2.2 Add


staging area에 목록을 올리는 작업입니다.

안드로이드 스튜디오 좌측 상단을 보면 기본값이 [Android]로 선택되어 있습니다.

이걸 클릭 해서 Project 를 선택 합니다.



그러면 현재 열려 있는 프로젝트명이 나오는데 여기에 마우스를 대고

마우스의 오른쪽 버튼을 눌러줍니다.



Project > Git > Add

이런 순서로 선택하면 붉은색 파일명이 녹색으로 변경 됩니다.



2.3 GitHub Repository 생성

 

이제 GitHub 서버에 연동해서 Repository를 생성 시켜보겠습니다.

 

상단 메뉴에서

VCS > import into Version Control > Share Project on Github

를 선택해 줍니다.



원격 GitHub 서버와 공유할 프로젝트를 설정하는 창입니다.



연동할 파일 목록과 간략한 내용을 입력해 줍니다.

SharedPrefGitHubRepository에 생성될 이름 입니다.



[OK]버튼을 클릭 합니다.

이제 연동이 되었습니다.


그러나 파일까지 업로드 된건 아닙니다. 프로젝트 명칭만 생성되것 입니다.

github 페이지에 들어가 보면 repository가 생성된걸 확인 할 수 있습니다.


최초에 android만 존재 했는데



새로운 Repository가 추가 되었습니다.



 

3. Commit and Push

 

stagingcommit 하고 github에 실제 파일을 push 해보겠습니다.

메뉴에서

VCS > Commit

을 선택 합니다.



또는 상단 툴바에서



이걸 클릭 해도 됩니다.

 

커밋할 파일들이 보입니다.



[Commit and Push] 버튼을 클릭 합니다.



왜 커밋하는지 이유를 써달라는 군요.

소스 변경 부분이 있을 경우 적어두면 나중에 디버깅 또는 원복이 쉽게 됩니다.



idemail을 기입하고 commit 합니다.




2개의 경고가 있다고 합니다.

대충 만든걸 아는군요.



경고쯤은 그냥 무시하고 [commit and push]를 누릅니다.



이제 실제 github에 올립니다.

[Push] 버튼을 클릭합니다.

 

github에 들어가서 확인을 해봅니다.



이제 파일들까지 잘 올라갔습니다.

- copy coding -


1

+ Recent posts