기업과제 협업 프로젝트

🔎 프로젝트 소개

• 참여기업 : 비트바이트, 바딧, 하이, 룰루랩
• 프로젝트 기간 : 2022/10/04 ~ 2022/10/20
• 사용된 기술 : vite, react, Typescript, axios, styled-components, firebase 및 UI 관련 라이브러리

🚀 주소

플레이키보드 웹스토어

• github 주소 : https://github.com/Poylib/Custom-keyboard-webstore
• 배포 주소 : https://pre-onboarding-3team-bitbyte.vercel.app/

오디오 재생 프로그램

• github 주소 : https://github.com/Poylib/Voice-recording-web
• 배포 주소 : https://pre-onboarding-4team-haii.vercel.app/

병원 예약 시스템

• github 주소 : https://github.com/Poylib/Hospital-appointment-system
• 배포 주소 : https://vercel.com/poylib/hospital-appointment-system

💡 회고

무한 스크롤

 처음으로 IntersectionObserver를 사용한 무한 스크롤을 적용시켜봤다. 

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0 && entry.isIntersecting) {
          observer.disconnect();
          setPage(page + 1);
        }
      });
    });
    lastLi && observer.observe(lastLi);
  }, [lastLi]);

 스크롤이 길어질 만큼 많은 데이터를 불러온 적이 드물었기 때문에 적용해볼 기회가 없었는데 이번에 메인 페이지로 불러오는 리스트가 많아서 배워보게 됐다. 생각보다 동작원리를 이해하기 어려워서 한참을 헤매었는데 , 주내용은 리스트의 마지막 요소를 Observer가 관찰하고 있다가 그 요소가 화면의 특정 위치에서 잡혔을 때 새로운 리스트를 불러오도록해서 스크롤이 동작하게 하는 것이다.

 

<ItemCategory key={index} ref={dataList.length - 1 === index ? setLastLi : null}>
// map을 돌면서 맨마지막 요소에 ref가 붙을 수 있도록 만들어두었다.

 

 스크롤 끝에서 불러오는 동안에는 스피너가 돌아가도록 해서 마무리했다. 여기서 아쉬웠던 부분은 스피너 대신 스켈레톤을 만들어 띄워주고 로딩시키는 방법이 사용자 입장에서 보기 편하고 기다리는 느낌이 덜 들어서 좋았을 것 같다. 무한 스크롤과 관련해서 포스팅을 따로 남겨서 정리하고 다음엔 이런 방식으로 적용해보고 싶다.

 

Firebase

기업과제 기간 중 가장 많이 고민해야 했던 게 firebase 적용이었다. 간간히 생기는 오류에 대해 구글링으로 정보 찾기가 힘들었던 게 컸는데 영어로 된 문서들을 한참 뒤져서 해결할 수 있었다. 프로젝트를 완성하고 다시 공식문서를 보다가 알게 됐는데 따로 오류 메시지에 관한 내용을 정리해 둔 곳이 있었다. 문제 해결 당시 분명 공식문서에 이런 문제를 안 알려줄 리가 없다 생각하며 찾아봤던 걸로 기억하는데.. 홀린 듯이 그 부분만 피해 갔나 보다. 이렇게 외부 API나 라이브러리를 쓸 때마다 공식문서의 중요성을 매번 느끼고 있어서 공식문서에서 필요한 정보를 찾아 사용하는 연습을 수시로 해야겠다. 적용하는데 꽤나 고생했지만 클라우드에 실시간으로 저장하고 꺼내 쓰거나 삭제가 가능한 웹을 만들었다는 게 재밌는 경험이었다.

import { ref, listAll, getDownloadURL, deleteObject } from 'firebase/storage';
import storage from '../../firebase';

// 클라우드에 저장되어 있는 목록을 전부 가져온다.
const audioRef = ref(storage, `audio`);
 useEffect(() => {
    recOn &&
      (async () => {
        try {
          const { items } = await listAll(audioRef);
          setAudioList(items.reverse());
        } catch (error) {
          console.log(error);
        }
      })();
  }, [isMessageOn, renderCheck]);

 

CSS

병원 예약 시스템의 경우 필수적인 기능들을 제시해주고 따로 UI를 제시해주지 않았다. UI의 a-z를 혼자 창작해서 해야 했기 때문에 평소에 해보고 싶었던 애니메이션을 많이 적용해 볼 수 있었다.

대부분 keyframe, animation, transform 속성을 사용해 만들었다. styled-components를 겸해서 만들었기 때문에 관련 자료들을 찾아가며 만들어야 했는데 styled-components에 대해 유용한 기능들을 찾게돼서 적용해보기도 했다.

import { keyframes } from 'styled-components';

export const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
export const fadeOut = keyframes`
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;

자주 쓰는 keyfram을 지정해두고 불러서 사용한다거나 

const StyledCheck = styled.div<{ openFade: boolean }>`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${maincolor};
  padding: 60px 30px;
  height: 100vh;
  transition: 1s ease;
  transform: translateX(${({ openFade }) => (openFade ? '0%' : '50%')});
`;

props를 통해 효과를 줄 수도 있다.

 

 효과가 어떻게 적용되는지 바꿔보면서 만드는 재미는 있었지만 동작원리를 잘 모르다 보니 딱 필요한 곳에 필요한 코드만 있도록 만들어진 것 같진 않았다. 적재적소에 필요한 css 속성만 남길 수 있도록 공부해서 리펙토링 해야겠다.

 

 

마치며

 이번 기업과제에서 요구사항에 맞춰 재량껏 개발해보거나 figma를 참조하면서 만드는 등 클론 프로젝트보다 실무에 가까운 경험을 해본 것 같아서 많은 도움이 되었다. 기업별로 각각 요구하는 목적이나 기능이 달랐던 것도 짧은 시간에 많은 것을 배울 수 있어서 재미있었다. 역으로 새로 배운건 많은데 바로바로 다음 기업 과제를 해야 해서 제대로 된 복습기간을 가지지 못한 게 내내 아쉬웠다. 한동안 다시 프로젝트 파일 훑어보면서 새로 배운 점들을 정리하고 리펙토링 하는데 시간을 보내려 한다.