お笑いギャラリー(オープンギャラリークローンプロジェクト)後期

🖼 可笑しいギャラリー

開発期間:2021年7月19日~7月30日

開発者:フロントエンド2人、バックエンド3人

使用方法:
Front-End : React Hooks, Styled-Component
Back-End : Python, Django, MySQL, Bcrypt, pyJWT, Docker, s3
Common : AWS(EC2,RDS), RESTful API

羽状バニラ:https://github.com/93-0312/2nd-upoonGallery-frontend

ホームページ

  useEffect(() => {
    fetch(
      `${J_API.DISCOVER}?sort=created-descend&limit=4&offset=1&shape=가로형`
    )
      .then(res => res.json())
      .then(data => {
        let tempData = [data.results];
        tempData[0].push(tempData[0][0]);
        tempData[0].unshift(tempData[0][3]);
        setTopSlideData(tempData[0]);
      });
  }, []);

 const slideRef = React.useRef();
 const [slideIndex, setSlideIndex] = useState(1);
 const history = useHistory();

 const slideNext = () => {
   if (slideIndex < 5) {
     setSlideIndex(slideIndex + 1);
     slideRef.current.style.transition = 'transform 0.25s';
     slideRef.current.style.transform = `translateX(-${
       (slideRef.current.scrollWidth / 6) * (slideIndex + 1)
     }px)`;
   }

   if (slideIndex === 5) {
     setSlideIndex(2);
     slideRef.current.style.transition = 'transform 0.001s';
     slideRef.current.style.transform = `translateX(-${
       slideRef.current.scrollWidth / 6
     }px)`;

     setTimeout(() => {
       slideRef.current.style.transition = 'transform 0.25s';
       slideRef.current.style.transform = `translateX(-${
         (slideRef.current.scrollWidth / 6) * 2
       }px)`;
     }, 50);
   }
 };

の無限スライドを実現するためにsettimeoutを使用した.スライドで使用する画像シーケンスの前、後ろに1回目の画像と最後の画像を配置し、settimeout関数を使用して無限回転のスライドのように表示します.

リストページ(Discover)

  const imageHeightRef = useRef(null);
  const [spans, setSpans] = useState(0);
  const [load, setLoad] = useState(false);

  useEffect(() => {
    if (load) {
      const height = imageHeightRef.current.offsetHeight;
      const spans = Math.ceil(height / 10);
      setSpans(spans);
    }
    return setLoad(false);
  }, [load]);

const DiscoverCardItem = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 15px;
  grid-row-end: span ${props => props.spans};
  cursor: pointer;
`;

「表示:column」という単純なコードを使用して、同様のMassonyレイアウトを実装します(レンガを積み重ねたように).この場合、画面は単純にマルチレベル処理されます(左側からコンテンツが積み重ねられます).
その結果、データが十分でない場合、コンテンツは画面の左側にのみ表示され、右側は空になります.これは実装に時間がかかるが、より複雑なコンテンツが必要であり、Grid形式のコードは、より低い充填高さで順番にコンテンツを挿入する方法を実現する.

私が選んだGrid Masonryの働き方
各Divには機能を実現するためにHeightが必要であるため,userefを用いてRefを異なる高さを含むDivに掛け,DivのHeightを得る.その後、GridのSpan単位(row+gap)10 pxでHeightを除算した値をStyled-Componentsのpropsに渡すことで、カードの高低に応じてDivのサイズを柔軟に調整し、Massonyレイアウトを実現する方法を選択できます.
その後、GridのSpan単位(row+gap)10 pxでHeightを除算した値をStyled-Componentsのpropsに渡すことで、カードの高低に応じてDivのサイズを柔軟に調整し、Massonyレイアウトを実現する方法を選択できます.

プロジェクト後期

これは非常に重要なプロジェクトであり、新しいテクノロジーを迅速に把握することが開発者にとってどれほど重要かを知ることができます.
以前のプロジェクトとは異なり、このプロジェクトのFront-End人員は3人から2人に減少した.しかし、この時間はずっと努力しているので、2人でも3位、4位のプロジェクトを完成させる好奇心と同じ自信があるかもしれません.
ただし、「逆方向エンジニアリング」を学習し、常に「クラス構成部品」と「CSS」を使用するのとは異なり、おかしなライブラリプロジェクトでは「関数構成部品」と「スタイル-コンポーネント」が使用されます.2つのスキルを学ぶには余分な時間がかかり、最初は不便でした.
しかし、チームメンバーと一緒に技術を迅速に勉強した後、あまり気にする必要はありません.propsでCSSを選択的に適用することもできます.これらはプロジェクトに役立ちます.
当初の想定通りに3人、4人のプロジェクトを完成させることはできなかったが、これまで使ったことのない新技術を素早く学び、それをプロジェクトに応用する良い機会であり、絶えず発展してきたFront-End分野の開発者である.絶えず勉強し、新しい技術を絶えず身につけることは非常に重要な経験である.