웃픈갤러리 (오픈갤러리 클론 프로젝트) 후기

🖼 웃픈갤러리

• 개발 기간 : 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를 채용했습니다. 슬라이드에 사용되는 이미지배열의 앞, 뒤에 첫번째이미지와 마지막이미지를 한번더 넣어 준 뒤, 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;
`;

• 마치 벽돌을 쌓아 올린듯이 보이는 Masonry 레이아웃을 구현하는데 있어, Display : column 이라는 단순한 코드로도 비슷한 형태가 구현되지만, 이 경우에는 화면에 단순히 다단처리를 해준 것으로, 컨텐츠들이 좌측부터 쌓이는 형태로 구현이 됩니다.

  그 결과 데이터가 충분히 많지 않을때, 화면의 좌측에만 컨텐츠들이 표시되고, 우측부분은 비어있게되는 결과가 발생하게 됩니다. 따라서 조금은 더 복잡하고, 구현하는데 시간이 필요했지만, Grid형식의 코드를 통해 채워진 높이가 낮은 순서대로 컨텐츠들이 삽입되는 방식을 구현했습니다.

• 제가 선택한 Grid 방식의 Masonry의 동작방식
  기능구현을 위해 각 Div의 Height가 필요했기 때문에 useRef를 이용해, 각 카드(높이가 서로 다른)들을 포함하는 Div에 Ref를 걸어주어 해당 Div의 Height를 구했습니다.이후 Height를 Grid의 Span 단위(row+gap)인 10px로 나눈 값을 Styled-Components의 props로 넘겨주어 카드의 높낮이마다 유동적으로 Div의 크기를 조절해주어 Masonry 레이아웃을 구현하는 방식을 선택했습니다.

  이후 Height를 Grid의 Span 단위(row+gap)인 10px로 나눈 값을 Styled-Components의 props로 넘겨주어 카드의 높낮이마다 유동적으로 Div의 크기를 조절해주어 Masonry 레이아웃을 구현하는 방식을 선택했습니다.

프로젝트 후기

Front-End 개발자로서 새로운 기술을 빠르게 익히는 것이 얼마나 중요한지 배울 수 있었던 소중한 프로젝트 였습니다.

이번 프로젝트에서는 앞선 프로젝트때와는 달리 Front-End의 인원이 3명에서 2명으로 줄어들었습니다. 하지만, 그동안 열심히 해왔던만큼 2명이서도 3명, 4명분의 프로젝트를 완성할 수도 있겠다는 호기심과도 비슷한 자신감이 있었습니다.

하지만 React를 배우며, 항상 Class형 컴포넌트와 CSS를 사용했었던 것과 달리, 웃픈갤러리 프로젝트에서는 함수형 컴포넌트와, Styled-Component를 사용하게 되었습니다. 두가지 기술을 배우고 사용하는것에 추가적인 시간이 필요했고, 처음엔 불편하기도 했습니다.

하지만 팀원분과 함께 빠르게 기술을 습득한 뒤에는 오히려, this를 크게 신경쓰지 않아도 되는 부분, props를 통해서 CSS를 선별적으로 적용할 수 있기도 하는 부분이 오히려 프로젝트를 진행하는데 많은 도움이 된다고 느끼게 되었습니다.

초기에 생각했던만큼 3명, 4명분의 프로젝트를 완성하지는 못했지만, 기존에 사용하지 않았던 새로운기술들을 빠르게 배우며, 프로젝트에 적용해 볼 수 있는 좋은 기회였고, 계속해서 발전해나가는 Front-End 분야의 개발자로서, 끊임없이 공부하며 계속해서 새로운 기술을 익혀나가는 것이 중요하겠다라는 것을 느껴볼 수 있었던 소중한 경험이라고 생각합니다.