WebSite(Class101) Clone Project - Part1.시작&나의 역할

안녕하세요. 이 포스트는 시리즈로 구성되어있습니다.

2주간의 1차 프로젝트 기간 동안 시행착오가 정말 많았습니다. 스스로 생각하기에 IT 전공인이 맞는가 하고 의심될 정도로 아쉬운 부분이 많았습니다. 그만큼 현업으로의 개발과 IT 운영과는 비슷하지만 또 다르다는 생각입니다. 아래는 1차 프로젝트의 회고 및 소개글입니다.

<1차 Clone Project 회고>
WebSite(wiselyshave) Clone Project - Part1. 시작&데이터 모델링
WebSite(wiselyshave) Clone Project - Part.2 Data Modeling & End Point Refactoring
WebSite(wiselyshave) Clone Project - Part.3 views.py Refactorin
WebSite(wiselyshave) Clone Project - Part.4 후기 

1. 클론 웹사이트: Class101(클래스 101)와 생각들

이번 클론 웹사이트는 Class101입니다. 최근에 광고도 많이 하고 코로나 19 바이러스로 각종 오프라인 모임이 비활성화되면서 상당히 높은 인지도를 가진 사이트라고 생각합니다. 실제로 제 주변인 중에서도 몇 분이 수강 경험이 있었습니다. 현대사회의 변화하는 Needs(수요)를 잘 캐치해 좋은 성과를 보여주고 있다고 생각합니다.

또한, 개발자 대우를 잘해준다고 평이 좋은 걸로 기억합니다. 개발 문화도 그렇고 서비스도 그렇고 가고 싶은 기업인 회사이기에 이 사이트를 클론 한다고 했을 때 매우 흡족했습니다.

사이트를 보았을 때, API 대신 graphql을 활용해 서비스를 운영하고 있었습니다. 프론트엔드 개발은 React FrameWork를 활용하였습니다.

2. Back-End 개발 요소

백엔드 개발자가 클론을 한다고 했을 때, 이 사이트는 클론 할 대상이 풍부하다 못해 넘치는 정도입니다.

2.1 클래스(강의) 목록

가장 기본적으로 어떤 클래스(강의)가 개설되었는가를 보는 것이 중요합니다. 메인 카테고리(크리에티브, 커리어, 시그니처..)와 서브 카테고리(크리에티브 - 미술, 공예,...)에 맞게 클래스 목록이 나와야 할 것입니다.

아래는 해당 카테고리를 눌렀을 때의 목록입니다. 구현 포인트는 인기순, 최신도순, 만족도순으로 정렬이 가능하다는 것, Lazy Loading(레이지 로딩)이 적용되어 있다는 것입니다. 

 

2.2 클래스 상세 페이지

다음으로 클래스의 상세 페이지입니다. 커뮤니티(리뷰)의 종류도 세 가지이고 각 클래스 별로 구성도 달라서 프론트 엔드 개발자에게는 너무나도 복잡하고 할 일이 굉장히 많습니다. 저희가 각 클래스 상세를 다 보여주는게 목표가 아니기 때문에 이 부분은 하나의 클래스만 잘 보여주기로 했습니다. (처음에는 통 div를 불러오는 방식으로 생각했는데, 깨져서 나오므로 실패했습니다..)

 

2.3 스트리밍(동영상) 불러오기

이 사이트의 화룡점정인 스트리밍 서비스입니다. 나의 클래스 보기에서 구현하면 더 좋겠지만, 현재 듣고 있는 강의권도 없고 강의 듣기 페이지까지 구현하기 어려운 부분이 있어 클래스 소개에서 볼 수 있는 영상으로 대체하였습니다.

붉은색 박스를 클릭하면 커리큘럼 아래의 강의 미리 보기(강의실) 링크가 뜹니다.

 

2.4 로그인/회원가입/소셜 로그인

기본이자 그리고 새로 배우는 것 중에 중요한 소셜 로그인이 있습니다.

2.5 검색 서비스

검색 서비스 또한 만들 수 있습니다. 클래스 101에서는 클래스의 이름뿐만 아니라 카테고리가 연관 있다면 함께 불러올 수 있습니다.

2.6 크리에이터 신청 기능

클래스 101은 이용자가 크리에이터가 될 수 있습니다. 크리에이터 등록 서비스가 있는데 이를 이용하면 크리에이터 등록이 됩니다. 과정은 Survey(서베이 서비스)랑 비슷했습니다.

위와 같이 정말 해볼 수 있는게 많은 사이트로 저희는 크리에이터 기능을 제외하고 도전하기로 했습니다. 물론 프로젝트 진행 중에 사정상 구현되지 못할 기능도 있지만요.

3. 내가 맡은 부분

저는 이 중에서
2.4 로그인, 회원가입, 소셜 로그인(카카오)에 마이페이지(프로필만)와
2.5 검색 서비스를 맡았습니다.
백엔드 팀원 분들이 클래스 목록과 클래스 상세를 맡고 싶다고 하셔서 그 부분을 부탁드렸습니다. 저는 리팩터링 하면서 select_related와 prefetch_related를 충분히 연습했다고 생각해서 기존과 다른 부분으로 검색 서비스를 QuerySet을 사용하는 것이 아닌 ElasticSearch를 적용하고자 했습니다.

특히 elasticsearch를 해볼 수 있는 부분이 매우 기대됐습니다. 클래스의 제목으로만 검색되는 것이 아니라 클래스 내부의 소개와 클래스의 커리큘럼으로도 검색이 되게 하는 기능입니다.

4. This Sprint(20/08/03 - 20/08/09)

한 주간을 돌아보며 아쉬운 부분이 분명 있었습니다. 저는 크롤링을 맡지 않아서 바로 user 앱의 기능을 구현하였습니다. 그럼에도 소셜 로그인이나 회원가입 시 regular expression으로 validation check를 하는 부분에서 생각보다 시간이 소요됐습니다.

이 글을 작성하는 일요일에는 elasticsearch의 초기 설정과 여기서 어떻게 구현해야 하는지를 검토 중이었습니다. 돌아오는 Sprint(한 주)에 제 생각보다 원활히 구현하지 못할지라도 자책보다는 앞을 볼 수 있었으면 좋겠습니다.