단기간에 빅앱을 했을 때 어떤 문제를 해결했는지

우리는 더 이상 일주일 만에 할로윈 앱 작업을 수행했으며 해냈습니다!

앱에 대한 쇼크: 할로윈을 위한 인스타그램.

앱에서 해결된 Frontend 문제에 대해 이야기하고 싶습니다.

저는 이에 대한 좋은 경험이 있기 때문에 React 및 Redux와 함께 Typescript를 선택합니다.

앱은 #root(앱용), #navbar(하단 탐색 모음) 및 #modal(모달 및 팝업용)의 세 가지 레이아웃 노드로 구성됩니다.

문제 1. 파일 구조

각 구성 요소에는 루트 앱의 구성 요소 디렉터리에 자체 스타일이 있는 디렉터리가 있습니다.

구성 요소의 구성 요소에 대해 구성 요소에 디렉토리를 만들었습니다.

Component에서 가져오기용 index.ts 파일과 코드 편집기 탭에서 쉽게 찾을 수 있는 Component Code용 [ComponentName].tsx 파일을 생성했습니다.

예를 들어:



보기와 HOC의 경우 별도의 디렉토리도 만들었습니다.

루트 디렉토리Button.module.css의 Field.mobule.css 또는 _styles와 같은 일반적인 스타일은 프로젝트 전체에서 사용됩니다. 정말 편리합니다!

문제 2. 콘텐츠 자리 표시자

나는 이 문제에 대한 react-content-loader 패키지를 가지고 있으며 훌륭해 보입니다! 나는 그것을 좋아한다!



콘텐츠 자리 표시자는 유연합니다. 아바타와 사용자 이름이 로드된 후 이미지에 대한 자리 표시자가 손실되었습니다. 이미지에 오류가 로드되면 다시 로드 시도 이미지에 대한 rect-button이 표시됩니다.

Probler 3. 스크롤로 콘텐츠 로드

여기서 나는 문제를 멋지게 해결하지 못했다고 생각합니다 :(하지만 작동합니다

어떻게 해결합니까?

제한, 오프셋 및 잠금 변수와 함께 useEffect를 사용했습니다.

useEffect(() => {
    let limit = 5;
    let offset = 0;
    let lock = true;

    const promise = props.getPublications({limit, offset});

    promise.then(() => {
      offset++;

      lock = false;
    });

    document.addEventListener('scroll', () => {
      if (!lock) {
        if (document.documentElement.offsetHeight < document.documentElement.scrollTop + Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) + 500) {
          lock = true;

          const promise = props.pushPublications({limit, offset});

          promise.then(() => {
            offset++;

            lock = false;
          });
        }
      }
    });
}, []);

페이지 높이가 페이지 상단으로 스크롤되는 것보다 작은 경우 페이지 뷰포트 높이와 500px를 더하면 서버에 요청하고 새 콘텐츠를 푸시합니다.

고맙습니다! 대단한 경험이었고 우리가 한 일이 마음에 듭니다.

https://halloween.global/에서 앱을 보고 할로윈 간행물을 게시할 수 있습니다.