5. Code Review

3) Creator Page 주요코드

(3) Lacture.js

: 여기서는 강의의 커리큘럼을 먼저 구성할 수 있다.
이렇게 만들어진 커리큘럼 내부에 다음 페이지에서 세부 강의를 등록하는 방식이다.
플러스 버튼을 눌러서 챕터의 갯수를 늘릴 수 있고 강의도 추가로 늘릴 수 있다.

  const [curriculum, setCurriculum] = useState([{}]);

• 일단 한개의 input Form 박스는 존재해야 하니 미리 {} 객체를 한개 넣어두었다.
  이것이 렌더되며 해당 페이지에 들어가면 미리 Form이 한개 생겨있다.

  const addChapterBox = () => {
    const getCurriculum = [...curriculum];
    setCurriculum(getCurriculum.concat({}));
  };

• 챕터나 강의 추가 버튼을 누르면 다음과 같이 객체가 한개씩 concat되는 방식이다.

(4) LactureOption.js

: Lacture.js 의 자식 컴포넌트로 input을 위한 Form의 구조가 짜여져 있다.

  const onChangeImage = (e) => {
    e.preventDefault();
    let file = e.target.files[0];
    setUploadImage([...uploadImage, file]);
  };

• 여기서도 파일의 형태로 담아서 올려주고 있다.

  const onChangeViewerImage = (e) => {
    let reader = new FileReader();
    if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
      reader.onloadend = () => {
        const imageUrl = reader.result;
        setImageViewer(imageUrl.toString());
      };
    }
  };

• 이전화에 설명했던 미리보기 코드이다.

  const [LectureList, setLectureTitleList] = useState([{ name: '' }]);

  const onChangeLectureIitleList = (e, lectureIndex) => {
    const getLectureList = [...LectureList];
    getLectureList[lectureIndex].name = e.target.value;
    setLectureTitleList(getLectureList);
  };

• 이렇게 만들어진 강의는 배열 형태의 LectureList에 담겨진다.
  이 LectureList는 부모 컴포넌트에서 ChapterList에 담겨질 것이고 최상위 부모로 끌어 올라가며 배열 안에 배열이 네스팅 된 모양을 갖추게 될 것이다.
• 이제 이렇게 만들어진 Chapter 박스는 MakeLacture 에서 강의를 만드는것에 사용할 것이다.

(5) MakeLacture.js

• 여기서는 Lacture에서 만들어온 커리큘럼을 끌어와서 각각의 강의 내용을 만드는 역할을 한다.
• 또한 강의에 영상을 업로드하고, 추가 사진과 글을 작성하여 부가 설명을 넣을 수 있게 해준다.
• 여기서도 특별한 코드는 없다. 중요한 것은 배열의 네스팅이다.
• MakeLacture > ChapterBox > LacrtureBox > ExplanationBox 로 이어지는 부모 자식 관계에서 배열의 네스팅 구조를 짜는 코드가 관건이다.

  const upLoadLectureVideo = (e) => {
    e.preventDefault();
    let reader = new FileReader();
    if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
    }
    reader.onloadend = () => {
      const rawImagePath = reader.result;
      const imagePath = rawImagePath.toString();
      setVideoViewer(imagePath);
    };
  };

• 영상을 담는 코드도 크게 다르지 않다. 동일한 방법으로 multipart 타입을 전송하면 된다.

---

6. 후기

• 크리에이터 페이지를 확인할 방법이 없으므로 클론이 아닌 기획을 해야했다. 덕분에 직접 백엔드, 백엔드로부터 데이터를 받아야할 프론트 등 여러 부분을 생각하며 페이지를 구성해야했고 결과적으로 기획력에 큰 도움이 되었다.