36일차

매일매일 바쁘게 지나가고 있다. DB설계와 강의장을 맡아 진행하고 있는데 DB는 일주일간의 회의 끝에 설계가 끝났다. 아무래도 전문적으로 공부한 사람이 많지는 않아서 나중에도 계속 수정을 해야 된다. 그리고 강의실 부분에서 나는 강의장을 담당하게 되어서 주말간에 걸쳐 깡통(layout)은 만들었다.

이번에는 그간의 과정을 정리하려 한다.

DB 1차 설계

DB는 크게 4개의 컬렉션이 나왔다.

1. 유저(users)
2. 게시물(posts)
3. 강의(lectures)
4. 과제(assignments)

유저는 게시물을 등록할 수 있고, 강의를 수강할 수 있으며, 과제도 등록해야 한다. 이런 흐름으로 진행이 되었고, 이외에도 댓글이나 강의 관련한 컬렉션들이 존재한다.

설계도도 있지만 정보가 유출될 염려도 있기 때문에, 저번에도 말한

https://eraser.io/

이 플렛폼을 통해 모든 것들이 이뤄졌다. 이후에는 설계를 토대로 firebase에 firestore에 컬렉션을 설정했다.

이렇게 해서 1차 DB 설계는 마무리 되었다. 굉장히 머리가 복잡했고, NoSQL이라는 DB로 제대로 설계를 해보는 건 처음이고, Firebase로 설계를 해봤기 때문에 더욱 복잡했다. 그래도 좋은 경험을 쌓았고, 앞으로의 수정이 기대가 된다.

강의장

강의실에서 강의를 선택할 시, 강의를 수강하는 강의장을 담당했다. 그래서 디자인을 토대로 강의장을 만들었다.

이런 느낌이다. 아직 제대로 된 기능은 없지만, 그래도 나름 괜찮게 달려온 거 같다. 댓글은 저번처럼 잘 작동이 된다.

import React, { FC } from 'react';

interface LinkLectureProps {
  content: string;
}

const LinkLecture: FC<LinkLectureProps> = ({ content }) => {
  const linkKey = content.split("v=")[1];
  const src = `https://www.youtube.com/embed/${linkKey}`;

  return (
    <div className="linkContainer h-full w-full">
      <iframe
        src={src}
        title="video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        className="w-full h-full"
      />
    </div>
  );
};

export default LinkLecture;

코드는 컴포지션을 사용했다. 이 컴포넌트 이전에는 강의의 타입을 확인해 연결하는 컴포넌트가 있다.

이 컴포넌트는 강의가 Link 타입일 경우에 보여지는 코드인데, 강의를 임베디드 해서 넣었다. 아직 에러 같은게 나오기는 하지만 잘 수정하면 될 것 같다.

1차적으로 만들면서, 아직까지 큰 기능들은 다루지 않았기 때문에 어렵지는 않았다. 이제 다음에는 Firebase도 연결하고 DB도 연결해서 값을 불러오는 작업을 해보면 좋을 거 같다.

정리하기

빠르게 한 주가 마무리되고 다시 한 주가 시작됐다. 이번 주 금요일에는 스프린트 데이(중간점검)가 있는 날이기 때문에 그 때까지 팀으로 좋은 결과를 냈으면 좋겠다. 그렇기 때문에 폐를 끼치지 않도록 개발자로써 성장해 있고, 부트캠프가 마무리 되었을 때는 확실하게 사용 이유를 갖고 설명을 잘하는 개발자가 되기를 바란다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프