[1nass] 클래스101-alike 사이트 만들기 팀프로젝트 후기

프로젝트 소개

• 준비물까지 함께 보내주는 온라인 취미 수업 제공 서비스인 '클래스101'과 비슷한 서비스를 만드는 프로젝트
• 프로젝트 기간 : 10. 5 ~ 10. 16 (2주)
• 개발인원 (총 6명) : 프론트엔드 (권영빈, 김우석, 문상호, 배규덕) / 백엔드 2명 (김성진, 이수현) 

주요 기능 (+영상)

1. 메인 페이지 (모달창, MD추천 클래스, 모든 클래스, *새로 생성한 클래스)

 

2. 크리에이터 센터 (새로운 수업 생성)

사용 기술

  Front-End  

• JavaScript (ES6)
• React.js (CRA, functional component 사용)
• Styled-components
• Git / Github
• AWS S3

  라이브러리  

• React-router-dom
• React-slick (슬라이더)
• class 101 UI library
• Redux

내가 맡은 역할

나는 메인 페이지와 새로운 수업 생성 기능 중 한 페이지를 맡았다.

  메인 페이지  

• 총 3개의 백엔드 endpoint 데이터를 불러와서 출력
• react slick을 이용한 메인 슬라이드창 구현 (데이터 통신)
• 수업 신규 생성시 데이터 불러와서 표기해주기

  수업 생성 기능 (크리에이터 정보 부분)  

• 프로필 사진 등록시 AWS S3에 바로 등록되어 url 추출
• 기타 input (SNS 정보, 소개, 해시태그)등의 입력
• 해당 데이터의 백엔드 전송

잘한 점, 아쉬운 점

잘한 점

 

1. 계획적

1주차는 메인 페이지와 기타 기능을 빠르게 마무리하고, 2주차에 크리에이터 센터 부분을 개발하기로 했다. 계획에 맞춰서 생각하며 개발했기 때문에 체계적으로 기능을 완성할 수 있었다.

 

2. 새로운 기술 사용

1차 때와는 달리, 더욱 많은 기능을 구현하기 보다는 새로운 기술과 문법을 시도해보는 것에 조금 더 중점을 두었다. AWS S3에 바로 이미지를 업로드하여 url을 백엔드로 보냈고, 처음으로 react 함수형 컴포넌트를 사용했다. redux를 사용하여 수업 정보를 가져와 출력하는 함수를 구현했다. styled-components를 사용해서 더 이상 scss 파일을 생성하지 않았다.

 

아쉬운 점

 

1. 체력

2차 프로젝트여서 그런지 점점 체력이 고갈되는 느낌이 들었고, 1차 때만큼의 에너지로는 개발하지 못해서 아쉬웠다.

 

2. 백엔드와 더, 더, 더 소통

백엔드와의 소통을 더 했어야 했는데, 조금 부족하여 비효율적인 업무처리가 발생하였다. 데이터 통신의 키값이라던지 주고받는 파일의 형식 등이 정해지지 않으면 추후 더 많은 비효율이 있기 때문에, 미리 협의하고 가는 연습을 더욱 해야 한다.

 

3. styled components

스타일드 컴포넌트를 조금 더 효율적으로 사용하지는 못했다고 생각하여 아쉬웠다.

 

기록하고 싶은 코드

1. AWS 이미지 업로드 코드

  // 크리에이터 프로필사진 관련
  // 아마존 s3 설정
  const config = {
    bucketName: "1nass",
    region: "ap-northeast-2",
  };

  // 프로필 업로드 함수
  const [profile, setProfile] = useState("");
  const handleProfile = (e) => {
    const file = e.target.files[0];
    S3FileUpload.uploadFile(file, config)
      .then((data) => {
        setProfile(data.location);
      })
      .catch((err) => {
        alert("이미지 업로드에 실패하였습니다.");
      });
  };

 

2. 메인 슬라이더

const Slider = ({ length, id, thumbnail, name, currentSlide }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(0);
  }, [currentSlide]);

  useEffect(() => {
    setValue(100);
  }, [value]);

함수형 컴포넌트로 코드를 작성하면서, setState의 콜백을 더 이상 사용할 수 없었다. useEffect Hooks를 사용하여 특정 부분이 페이지에서 변경될 경우 함수를 수행하는 연습을 충분히 많이 할 수 있었다고 생각한다.

 

마치며

두 번째 프로젝트는 조금 더 여유롭지만, 체계적으로 개발할 수 있었다. 다만, 개발 그 자체보다 더욱 중요한 것은 팀원들과의 소통이라는 것을 뼈저리게 느낄 수 있었다.