2023.03.10(금) 기록용

 

 

 

요즘 ts로 고친 후 catbow-convert 페이지 고치는데 재미가 들려 이것저것 시도해보고 있다

 

(그냥 단순히 학습하는 것보다 적용한다고 생각하고 학습하니 좀 더 속도가 붙는 거 같기두하구)

 

 

 

 

1. contextAPI 이대로 괜찮은 것인가? 리렌더링 이슈

 

-> 상태 라이브러리 관련해서 계속 학습중인데 내가 왜 contextAPI 썼지? 후회중

-> reducer dispatch useMemo 사용해볼까? 하다가도 간단한 기능인데 너무 무겁게 가져가는 거 아닌가;; 하는 생각이 크게 들어 적용하기보단 라이브러리 상태 관련해서 더 학습 중이다

 

 

2. 왜 모달 왔다 갔다하지?

-> 변환 성공 후에 모달이 꺼지지 않고 다른 모달을 불러오는 오류가 있었는데 또 갑자기 멀쩡해졌다(?) 이유를 모르겠음... 분명 고장났었는데

 

 

3. 동영상 변환 후에 input에 동영상이 그대로 담겨있다

-> 상우님 만나서 서버 연결 후에 해결해봐야할 거 같지만 왠지 금방 고칠 수 있을 듯...

 

 

⭐️ 4. catbow 라이브러리를 보여주고자 라이브러리를 배경에 적용했는데 로컬 환경에선 팽팽 잘 돌아가더니 실 페이지에선 사진이 한번에 보여지지 않고 잠깐 시간이 필요하다 ^_ㅠ 

 

 

관련해서 pm 님이 피드백을 주셨는데

 

 

 

저희 catbow convert 이미지 스크롤 잘안되는 이유

 

6:37

1;. ghpage는 get 요청시 사용하는 파일들만 전송해주고
2. 브라우저 자바스크립트 엔진은 싱글스레드인데 ghpage 네트워크 속도가 못따라와서 다른 요청이 올떼 통신을 끊어 버리는거 같아요
3. webworker로 멀티스레드 구현 해서 해결할수 있을것 같아요
4. 아니면 img sorce를 get요청시 전부 가져와야하는데 해당 방법을 찾아야 될것같아요

6:39

동기와 함께 생각한 결론입니다.
뭔가 깨달으면 많은 도움이 될것같아서 남겨봤어요

6:39

ngnix쓰면 멀티스레드가 그냥 되는 node가  부럽더라고요 ㅋㅋ

 

위에 2번 오류가 있네요 get요청은 비동기 통신으로 처리가 되어있네요
정확히 알게되면 공유해드릴게요 

 

 

1. 사진도 띄엄띄엄 받아옴

2. get 요청 비동기

3. 로컬에선 잘 돌아감

4. 사진 용량 작음

 

 

 

의 이유 때문에 나도 git에서 무료로 제공해주는 서버가 느린 게 원인이라고 판단했다.

 

사진을 한번에 받아온 후에 적용하는 식으로 가지 않을까 싶다 🤔 

 

 

 

 

 

+

 

이 부분을 pm님과 다시 논의했다

 

 

 

1. 웹페이지 내부에서 로드 하지 않는 이상 데이터는 가져오지 않음

2. 깃이 느린 건 맞음

3. 그럼 그냥 미리 불러오자

4. 초당 60~120회 받아오는 Window.requestAnimationFrame() 사용해보자!

 

 

로 이야기를 나누었고

 

 

 

requestAnimationFrame() 먼저 제안을 하셨던 pm님이 로직을 바로 추가한 결과

 

//catbow.tsx


useEffect(() => {
    function fetchImages(index: number) {
      if (index > 703) {
        return;
      }
      axios(
        `https://catbow.github.io/catbow-photo-converter/image/IMG_${index}.jpg`
      );
      requestAnimationFrame(() => {
        fetchImages(index + 1);
      });
    }
    if (process.env.NODE_ENV !== 'development') {
      fetchImages(1);
    }
  }, []);

 

 

👇 네트워크 탭

 

 

사진을 미리 받아올 수 있었고

 

현재 스크롤하면 사진이 잘 변한다 

 

 

 

 

 

 

+

 

그리고 움짤을 만들면서 용량을 확인한 결과

 

 

100mb 이상 소요한다는 것을 알게 되었다

깃헙 계정 정지 당하기 전에 얼른 사진 30장으로 바꾸었다;;; 옴마야