2차 프로젝트 후기 - 클래스101 클로닝

1. 프로젝트 소개

2차 프로젝트 영상

1) 주제

• 다양한 주제에 대해 배울 수 있는 동영상 강의 사이트 클래스 101 사이트 클로닝 - 기획과 디자인만 가져오고 다른 모든 부분은 직접 구현(크롤링, 백엔드 API 구현)
• 두번째 프로젝트로 django로 백엔드 API개발과 git을 활용한 협업

2) 구성원

• 백엔드 3명, 프론트 3명
  벡엔드 깃허브
  프론트엔드 깃허브

3) 기간

• 2020.08.03 ~ 2020.08.14 (2주간)

2. 적용 기술

• Database Modeling
• Mysql
• AWS EC2, RDS, S3 활용
• 크롤링 (selenium, BeautifulSoup)
• django
• Git & Github

3. 사이트 주요 기능

사이트 주요기능으로 직접 구현한 기능은 ▣, 팀원이 구현한 기능은 □로 표시

1) 회원가입 / 로그인 페이지

• □ 회원가입 기능 - 이름에 한글만, email에 @ 꼭 들어가도록 password에 최초 5글자 이상, 대문자 들어가도록 적용
• □ 로그인 - 로그인 정보 입력 후 가입자에 확인 후 jwt 암호화된 토큰 response

2) 소셜로그인(카카오톡)

• □ 카카오톡 회원정보로 로그인하기
• □ 카카오톡에서 제공하는 API를 활용하여 로그인 구현

3) 제품보기 / 제품 상세 보기

• ▣ 클래스101 사이트의 처음 페이지와 카테고리별 화면 구성
• ▣ 시그니처 카테고리의 강의 상세페이지 구현

4) 찜하기

• ▣ 전체보기, 상세보기, 마이페이지등에서 하트를 눌러 찜하기를 하고 마이페이지에서 확인가능 일종의 강바구니 역할
• ▣ 수백개의 사이트에 수만명의 찜하기 정보를 담고 빠르게 표현하기 위해 테이블 구성과 로직 구현

5) 동영상 강의

• ▣ AWS에 동영상 강의 저장하고 동영상 강의 페이지 구현
• ▣ 원하는 강의 GET 방식 QueryString으로 받아 Json Response

6) 댓글(사진, 영상 첨부)

• ▣ 각각 동영상 강의 마다 댓글 입력 구현. 영상이나 사진은 AWS S3에 저장하고 주소를 DB에 담아 Response

4. 기록하고 싶은 코드

class ClassComment(View):
    s3_client = boto3.client(
        's3',
        aws_access_key_id     = AWS_ID,
        aws_secret_access_key = AWS_KEY
    )
    #@auth_decorator
    def post(self, request):
        try:
            if request.FILES:
                file      = request.FILES['photo']
                uid       = uuid.uuid4()
                save_name = str(uid)
                self.s3_client.upload_fileobj(
                    file,
                    "we101",
                    save_name,
                    ExtraArgs={
                        "ContentType": file.content_type
                    }
                )
                Comment(
                    comment    = request.POST['comment'],
                    user_id    = request.POST['user_id'],
                    content_id = request.POST['content_id'],
                    photo      = f'https://we101.s3.ap-northeast-2.amazonaws.com/{save_name}'
                    ).save()

            else:
                Comment(
                    comment    = request.POST['comment'],
                    user_id    = request.POST['user_id'],
                    content_id = request.POST['content_id'],
                    ).save()

            return JsonResponse({'message':'Added'}, status=200)

        except KeyError:
            return JsonResponse({'message':'KEY_ERROR'}, status=400)

댓글기능을 구현하면서 단순히 텍스트만 받을 때와 사진이나 영상을 받을 때가 완전 다름을 알게 되었고 그 기능을 구현하는데 많은 에너지를 쏟았다. 결과적으로 동기의 조언을 바탕으로 S3에 저장하고 혹여나 있을 한글 제목등을 고려해 임의의 값(UUID)로 저장하여 문제가 없도록 하였다. 로컬 환경이 아닌 S3를 이용하여 데이터의 안정성도 지키고 추후 여러가지 기능 구현에 사용할 수 있을 것이다.

5. 느낀점

1) 잘한 점
모델링을 꼼꼼히 하여 모델 구성과 기능 구현에 도움이 되었다. 해보지 않았던 동영상 스트리밍과 찜하기 기능(장바구니와 비슷하였지만..)을 통해 실력이 조금씩 늘고 있음을 느꼈다. 1차 때 아쉬웠던 유닛테스트도 감을 잡을 수 있었고 백엔드 개발자의 방패, 나의 든든한 방패가 될 수 있도록 더 활용해야 겠다는 생각을 많이 했다.

2) 아쉬운 점
1차 프로젝트 당시 필리 웹사이트내 아이템의 수가 많지 않아 아쉬웠는데 이번 클래스101은 아이템의 수가 굉징히 많고 다양한 내용으로 구성이 되어 있어 기초자료 크롤링이 쉽지 않았다. 다양한 조건에서도 섬세하게 자료를 가져왔었으면 좋았을텐데 하는 아쉬움이 남는다.

3) 총평
2차 프로젝트는 클래스101 이라는 동영상 강의 사이트였다. 수많은 강의에 다양한 옵션들도 가능차 있는 사이트를 클로닝 하는 것은 엄청나게 도전적일 수 밖에 없었다. 자료를 수집하는 것도 쉽지 않았고 사이트를 구현해 나가는 것도 매순간 찾아보고 뒤져봐야하는 과정이었다. 그래도 기능을 구현하고 테스트하고 정상적으로 작동하는 것을 보면서 다시한번 내가 배우고 익히고 하고 있는 것에 대한 재미와 유익성을 느끼며 앞으로 맞이하게 될 많은 상황속에서 지금의 기억들을 잘 가지고 찾아보고 활용하면 좋겠다는 생각을 해본다. 같이 해준 팀원들에게 감사하고 벡엔드 팀원들에게는 미안한 마음도 든다. 많이 도와줘서 고맙습니다.