[TIL] 오늘의 개발일지

오늘은 오전에 다같이 프로젝트 빌드 작업을 하고 본격적으로 각자 맡은 업무에 들어갔다.

오후에는 react quill을 만지면서 내내 머리에서 열을 냈던것같다

next + ts 조합에 한번도 안써본 react-quill을 쓰려니 안그래도 머리아픈데 어디서 에러가 나는지도 명확하게 몰랐다

 

<제일 애먹었던 부분>

1. 타입 지정 (ref에 계속 타입에러가 떠서 진짜 애먹었다)

2. 사진을 데이터url로 변환해서 react quill 편집기 안에다가 그 이미지 주소로 넣어줘야 하는 과정

3. 비동기함수 실행 순서로 "이전 사진"이 "현재 사진" 처럼 뜨는 에러 발생

 

<해결 방법>

1. 천리길도 한걸음부터 ㅎㅅㅎ

=> 우선 튜터님의 조언대로 익숙한 react로 react-quill 자체가 정상적으로 작동하는지를 해결하였다

일단 react quill에 적응이 되고나서, 진행했어야 됐는데 처음부터 욕심이 과했던 듯 하다

 

2. 2번 문제 역시 1번과 비슷한 맥락이었는데, 기술 자체가 어려웠다기보다 리액트 퀼의 원리와 내가 원하는 로직이 무엇인지를 정리하는 것이 해결 방법이었다.

 

문제점부터 말하면,

리액트 퀼에서 기본제공하는 img는 우리가 event.target.files였나 [0] 인덱스 찍어보면 보이는 날것의(ㅋㅋㅋㅋㅋㅋ) base64 로 인코딩되어 찍히는 것을 볼 수 있다. 

이런식으로 나오는거 ㅎㅅㅎ

내가 원하는 건 어디서든 접속해도 똑같은 "사진"을 볼 수 있는 형태로 가공을 하는것!

그럼 어떻게 해야되나? 

dataURL로 img태그에 src로 꽂아주면 되는 것

 

그럼 무슨 작업을 해야하나?

base64로 찍힌 저 데이터를 이용해서 백엔드에서 구현되어야 하는 dataURL 변환 작업을 firebase를 이용하여 변환시켜주기!

    input.onchange = async () => {
      const inputImage = input.files;
      const uploadImage = inputImage[0];
      if (inputImage !== null) {
        const reader = new FileReader();
        reader.readAsDataURL(uploadImage);
        reader.onloadend = (finishedEvent) => {
          const imgDataUrl = finishedEvent.currentTarget.result;
          localStorage.setItem("imgDataUrl", imgDataUrl);
          addImgTag();
        };
      }
    };

자바스크립트 함수 FileReader를 사용해서, onChange 이벤트가 발생했을때 해당 files에 들어있는 base64 문자열을 뽑아내서 그걸 readAsDataURL에 넣는 작업을 거치고 그걸 localStorage에 임시로 저장해놓았다.

(localStorage에 저장한 이유? addImgTag에서 쓸거니까!)

 

3. 몇시간동안 텍스트랑 사진 같이 들어가게 하고 내가 원하는 기능들을 구현시키는데 성공했는데, 다시 차분하게 찬찬히 들여다보니 

'엥, 자꾸 사진이 순서가 하나씩 밀리는 너낌?' 은... 기분탓이 아니었다 ㅎㅅㅎ

외면하고 싶었지만 찬찬히 뜯어보니 (콘솔에 하나씩 찍어보면서 뭐가 먼저 실행되는지 체크했음)

 

원인 : 원래 함수 1개에다가 코드를 다 짜넣었었는데, 중간에 비동기함수들이 껴있는데 실행순서가 2번째로 실행되어야 하는 함수가 첫번째로 실행되고, 첫번째로 실행되어야하는 함수가 두번째로 실행이 되버리고 있었뜨아!!!!!!!

 

해결 : 함수를 나눠버렸지롱 -> 이렇게 addImgTag를 따로 빼서, imageHandler 안에 마지막 부분에 실행을 시키는 식으로 수정했더니 문제 해결!!

  const addImgTag = async () => {
    let randomID = Date.now();
    const imgRef = ref(storageService, `photoTitle${randomID}`);
    const imgDataUrl = localStorage.getItem("imgDataUrl");
    let downloadUrl;
    if (imgDataUrl) {
      const response = await uploadString(imgRef, imgDataUrl, "data_url");
      downloadUrl = await getDownloadURL(response.ref);
      const range = quillRef.current.getEditorSelection();
      quillRef.current
        .getEditor()
        .insertEmbed(range.index, "image", downloadUrl);
      quillRef.current.getEditor().setSelection(range.index + 1);
      document.body.querySelector(":scope > input").remove();
    }
  };

 

내일은 두렵지만 ts로 바꿔서 하나하나 빨간줄을 해결해나가고 ^_^ (내일아 천천히 와죠도 됑..)

한가지 더 남은 난코스!!! 서버 api에 있는 데이터로만 사용자가 데이터를 집어넣을 수 있게 하는 작업을 해봐야겠다

 

시작하는 주라 그런지 아직 이런저런 생각이 많은데 할건 더많아서 생각할 시간도 없는(ㅎ) 날들

요즘 하는 고민의 해결책들의 끝은 결국, 내가 잘해내야 한다는 것

나 스스로가 더 노력해야 도와줄 수 있는것도 늘어나고 나 자체에게도 좋은 것을 선물해줄 수 있다는 생각이 든다

 

오늘의 개발일지 끄읕-