📱프로그램 개요

🤔 뭘 만든 거죠?

지난 학기 말, 수행평가 시즌이 한창일 때, 이 시대의 여느 중학생이 그렇듯 우리 반의 친구들도 수많은 과제와 필기 시험 일정을 관리하는 데 많은 시간을 할애했습니다. 칠판에 적어놓은 과제 목록들을 보고 있으니, 이걸 아예 누구나 온라인으로 확인하고 준비할 수 있도록 하면 좋겠다는 아이디어를 내었습니다.

일단 다음 기능을 구현해야 했죠.

• 프로그램이 처음 실행되면 수행평가들의 목록과 날짜를 로드한다.
  (DB로 받든, 하드코딩을 하든...)
• 로드가 끝나면 각 수행평가의 남은 날짜를 시행 일정과 비교해서 계산한 다음,
  하나의 div 로 묶어 DOM에 올린다.
• 일정이 지난 수행평가는 취소선을 긋거나 목록에서 제외해야 한다.

문제는 기울임체 처리된 두 부분이었습니다. 저땐 DB나 백엔드 쪽의 개념이 제대로 잡혀있지 않은 상태였기에 혼자 서버를 사거나 빌리는 것은 꿈도 못 꿨죠. (사실 지금도 실사용은 못합니다. 응애🍼) 그래서 아예 하드코딩 해버렸습니다.

testList = [
    ["수학", "서술형 평가", 6, 9],
    ["역사", "발표 수행평가", 6, 13],
    ["기술·가정", "서술형 평가", 6, 15],
    ["사회", "수행 평가",],
    ["중국어", "구술 평가"]
]; // 각각 과목(index 0), 시험 유형(index 1), 일정(index 2:3)

📑 DB 서비스 선정

🎲 Notion?

즐겨 보던 Nomad Coder님의 Notion을 활용한 DB 구축 방법을 설명하는 동영상을 보았습니다.
🔗노션 사용자의 98%가 이 기능을 모르고 있다!? - by 노마드 코더 Nomad Coder
영상에 따르면, Notion의 페이지 데이터를 REST API를 통해 불러올 수 있다는 것이었습니다.

실제로 예전처럼 하드코딩 했다면
git clone || pull → testList 배열 수정 → git commit && push → 결과 확인...
여기서 다른 컴퓨터에서 수정하다 confliction이라도 나면... 😱
그러나 Notion DB면 페이지만 수정해주고 Refresh 하면 끝이죠.

문제는, Notion 얘네가 UI도, 기능도 너무 자주 바꾸는 거죠.

분명 여기 연결하는 칸이 있어야 하는데; 이거 때문에 이틀을 헤맸습니다.

그래서 일단은 다른 대안이 나올 때까지 보류하기로 했습니다.

🌥️ Google Cloud? 👄 AWS?

서버를 직접 호스팅 서비스에서 받아서 DB 구축 및 연결을 하는 게 가장 확실하긴 한데... 예, 저 백엔드는 아예 못 배웠습니다. 🐤 GG!

🔥 Firebase?

그러다 Firebase가 눈에 들어왔습니다. 별도의 명령어 없이도 간단히 DB, Auth, Storage 등의 서비스 제공이 가능하고, 심지어 별도 설치 없이 CDN만 넣어줘도 사용이 가능하다는 것이 가장 큰 장점이죠.

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

웹으로 연결하려면 저 2줄이면 됩니다.

🧑‍💻 개발 시작!

🗂️ Firebase 프로젝트 생성

일단 Firebase 프로젝트를 생성했습니다.

이렇게 event라는 이름의 문서 안에 컬렉션 하나를 넣고, 하나의 일정을 하나의 필드에 배정하여 작성했습니다. 각 컬렉션에 일정을 배당하는 방법도 있었지만, 일정 개수를 받아오는 등의 작업은 이쪽이 더 유리해 보였어요.

💻 데이터 가공

우선, 상기한 CDN을 이용해 firebase를 사용하기 위해서는 초기화 작업이 필요합니다.

const firebaseConfig = {
    apiKey: "API 인증키",
    authDomain: "프로젝트 이름.firebaseapp.com",
    projectId: "프로젝트 이름",
    storageBucket: "프로젝트 이름.appspot.com",
    messagingSenderId: "이건 뭐지",
    appId: "제공받는 웹/앱의 고유 ID",
    measurementId: "이건 또 뭐지"
  };
  firebase.initializeApp(firebaseConfig);

이렇게 firebase 초기화를 끝내고 나면, firebase가 제공하는 여러 함수들을 사용할 수 있습니다. 그 중 firebase.firestore()를 사용하여 firebase firestore에 저장한 DB를 받아오겠습니다.

1.	var dataBox = [];
2.	function DBget() {
3.	  const db = firebase.firestore();
4.	  db.collection('data').get().then(
5.	    e => { e.forEach( (doc) => { dataBox.push(doc.data()) } ) }
6.	  )
7.	}

• 1행: dataBox라는 이름의 데이터를 담을 배열을 생성합니다. let이 아닌 var로 생성한 이유는 전역에서 DOM 생성에도 사용하는 변수이기 때문입니다.
• 3행: 인스턴스 db를 생성합니다.
• 4행: 컬렉션 'data'( collection('data') )에 든 필드를 모두 받아옵니다. ( get() )
• 5행: 각 필드( e.forEach(callback) )를 순회하며 데이터가 든 Object를 모두 dataBox에 추가합니다. 필드가 하나밖에 없기 때문에 forEach를 대체할 방법을 찾을 계획입니다.

🖥️ DOM 출력

우선 1학기 때 하드코딩으로 만들었던 레이아웃을 그대로 적용했습니다.

기존에 만들어 놓은 js 파일의 testList 변수를 dataBox로 교체만 하면 된다고 생각했었는데, 타입 차이로 인한 문제가 발생했습니다.
일단 dataBox를 바로 콘솔에 찍어본 사진부터 보시죠.

testList(기존 하드코딩한 양식)	dataBox(firebase에서 받아온 양식)
[ [], [], []... ]	[{ {}, {}, {}, ... }]

1.  for (let a of dataBox) {
2.    document.querySelector(".left").innerHTML =
  	  	`예정된 수행평가가 ${Object.keys(a).length}개 남았습니다.`
3.    for (let event in a) {
4.      addScheduledTest(a[event].subject, a[event].type, a[event].date);
5.    }   
6.  }

😇 소감 & TODO

수행평가 일정이 바뀌거나 할 때마다 애를 먹었는데, 확실히 github 통해서 하드코딩하던 때보다 유지보수가 편해진 느낌이었습니다. 또 DB 하면 SQL만을 떠올렸었는데, key-value 기반의 NoSQL에도 한층 더 친숙함을 느낀 프로젝트였습니다.
이제 배포까지 남은 것들은 몇 단계 남지 않았습니다.

• 전반적인 UI 개선 - PC, 모바일에 모두 맞춘 반응형 웹으로 개편
• netlify로 호스팅 서비스 이전 - 더 빠른 deploy 적용
• 💤

firebase를 사용한 재개발 작업을 시작한 때가 이미 수행평가가 대부분 끝나가고 중간고사 공부를 시작하던 9월 말이었기에, 최종적으로 10월 중순까지의 완성을 목표로 하고 있습니다.

별 거 없는 초보 개발자의 글 여기까지 읽어주신 분들께 감사 인사 올리고 글을 맺습니다. Thanks for reading! 🌱

P. S.

작성 중 특이한 점 몇 가지를 발견해서 추가합니다.

• 제목에 코드 블럭을 추가하면 회색 테두리가 나타나지 않습니다.

이렇게요! 대신 망할 굴림체는 그대로 나옵니다.

• 체크박스 문법을 사용해도 [ ]와 [x]의 구분이 없습니다. velog 개발자님... 이거 보고 계시면 수정 부탁드립니다.