항해99-week7

이번주는 실전 프로젝트를 시작했다. 저번에 팀원이였던 분이 같이하자고 제안이 와서 들어오게 된 팀이였다.
한명을 제외하고는 처음보는 사이였지만 다들 성격이 좋아서 금방 융화될 수 있었다.
첫날 아이디어 회의를 시작했는데 다들 너무 좋은 아이디어를 가져와서 아이디어 후보가 10개가 금방 찻고 투표를 진행해서 최종으로 데스크테리어를 주제로 프로젝트를 시작했다.

첫 기획 결과는 오늘의집, study with me 유튜브채널, 공스타그램 등을 벤치마킹 하여 자신이 자랑하고 싶은 데스크테리어를 게시하고, 게시물에 있는 아이템들에 구매링크를 걸어 바로 구매하러 갈 수 있고, 유튜브 동영상 or 실시간 유튜브 채널의 링크를 넣어 study with me 채널과 같이 공부분위기를 공유하는 사이트를 만들려 했다.

첫번째 피드백에서 주요 타겟층이 학생들이라서 어차피 많이 사지도 않기 때문에 아이템을 구매링크로 이어주는 기능을 빼는게 좋을거같다는 말을 듣고 아이템을 빼고, 데스크테리어를 자랑하고, 인기있는 게시물을 추천해주고, 같은 공부를 하는 유저들끼리 데스크테리어, 영상 등을 게시물을 통해 공유할 수 있는 사이트로 바꿨다.

회의가 많이 길어 피로했지만, 덕분에 팀원들과 친해질 수 있었고, 내가 전혀 생각지도 못한 아이디어들을 공유하기도 해서 정말 유익한 시간이였고 즐거운 시간이였다.

주간활동

이번주는 ckEditor에 시간을 쏟아 부었다. 작성페이지를 만드는데 있어 컨텐츠 중간중간에 이미지도 넣고 youtube 영상도 embed 할 수 있어서 더욱 게시물의 퀄리티를 높일 수 있을거같다고 생각해서 ckEditor를 선택했다. 다른 editor도 있지만 검색을 통해 가장 많이 사용하는거같은 ckEditor로 정했다.

ckEditor를 적용할때 어려웠던점

• 이미지 업로드
• 작성도중 이미지를 업로드했다가 다시 지웠을때 파일처리

해결

• 이미지 업로드는 일단 adapter를 직접 만들어줘야 한다. ckeditor에서 제공하는 플러그인도 있지만 유료이기도 하고 비용도 비싸서 사용할 수 없었다. 물론 adapter를 만드는 방법은 검색을 해서 참고하면된다.

adapter

class MyUploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    // Starts the upload process.
    upload() {
        return this.loader.file.then(
            // file은 파일객체이다.
            file =>
                new Promise((resolve, reject) => {
                    //----사용할 데이터를 정리하고, 서버에 데이터(이미지 객체)를 전달하고 url을 얻어서 post에 저장한다.
                    const req = { temp: file };

                    //multer를 사용하려면 formData 안에 request들을 넣어주어야 한다
                    let formData = new FormData();
                    for (let entry of Object.entries(req)) {
                        formData.append(entry[0], entry[1]);
                    }
                    
                    //통신헤더설정
                    const config = {
                        header: { "content-type": "multipart/form-data" },
                    };

                    async function sendImg() {
                        //서버에 파일 객체를 보내서 imgUrl을 얻어온다.
                        try {
                            const response = await axios.post(
                                "api url",
                                formData,
                                config,
                            )
                            if (response.statusText==="OK") {
                                const downloadURL = `파일경로/파일명`;
                                console.log(downloadURL);
                                resolve({
                                    default: downloadURL,
                                });
                            }
                        } catch (err) {
                            console.log(err);
                    //         Swal.fire(
                    //             "에러",
                    //             "이미지를 등록할 수 없습니다. 다시 시도해주세요!",
                    //             "error",
                            // );
                        }
                    }
                    sendImg();
                }),
        );
    }
}

const Editor = ({ getContent }) => {
  const [data, setData] = useState("");
  const handleChange = (event, editor) => {
    setData(editor.getData());
  };
  return (
    <>
      <StyledEditor height="500px">
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          config={editorConfiguration}
          onChange={(event, editor) => {
            handleChange(event, editor);
            const data = editor.getData();
            getContent(data);
          }}
          onReady={editor => {
            if (editor?.plugins) {
              editor.plugins.get(
                "FileRepository",
              ).createUploadAdapter = loader => {
                return new MyUploadAdapter(loader);
              }
            }
          }}
        />
      </StyledEditor>
    </>
  );
};

1. 이미지를 올릴때마다 이미지를 업로드 하는 api를 요청한다.
   • 작성할때 업로드하지 않고 게시물에 이미지를 넣을때마다 업로드 하는 이유는 파일을 서버측에서 관리하기 때문에 이미지의 경로를 새로받아와서 게시물에 이미지경로를 넣어주어야 하기 때문이다.
2. 에디터 작성 완료시 서버측으로 보내주는 데이터는 html코드가된다.
3. 아직 구현은 안됐지만 에디터 작성중 이미지를 업로드 했다가 뺀 경우 서버측 폴더에 이미지가 쌓이지만 node schedule이라는 library를 사용해 유저들이 없는 시간 즉, 새벽시간마다 폴더를 비워주는 이벤트를 발생시킨다.
4. 아마 제일 어려운 문제는 나중에 수정기능을 구현할때일것같다.

ckEditor를 구현하면서 많은 어려움들이 있었지만 팀원들과 협력해서 한걸음씩 나아가니까 뿌듯했다.
다음주는 와이어프레임이 완성됐기때문에 뷰를 작성할것같다. 반응형 웹을 구현해야해서 또 새로운 공부를 하게될것이다.